We Keep Coding

How to update a different column/cell's value based on current column selected value - editable grid Syncfusion(Javascript es5)

I am trying to create an editable grid where I can add TransactionItems. Each TransactionItem will have a product (combobox), rate (textbox), quantity(textbox), total(textbox) and IsTaxable(checkbox) field. When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
var productElem;
var productDDL;
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: [],
toolbar: ['Add', 'Cancel'],
editSettings: { showConfirmDialog: true, showDeleteConfirmDialog: true,allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
columns: [
{
field: 'Product', headerText: 'Product',
type: 'string',
foreignKeyField: "ProductId",
foreignKeyValue: "Product",
edit: {
create: function () {
productElem = document.createElement('input');
return productElem;
},
read: function () {
return productDDL.text;
},
destroy: function (e) {
productDDL.destroy();
},
write: function (args) {
productDDL = new ej.dropdowns.ComboBox({
fields: { text: 'product', value: 'product' },
placeholder: "Select a Product",
allowFiltering: true,
filtering: (e) => {
if (!e.text || e.text.length < 3) { return; }
else {
var query = new ej.data.Query().addParams("searchText",e.text.trim());
e.updateData(productDDLSource, query);
}
},
change: (item) => {
// HERE I want to update value of Rate and IsTaxable based on Product selected
}
});
productDDL.appendTo(productElem);
},
}
},
{ field: 'Rate', headerText: 'Rate', type: 'number' },
{ field: 'Quantity', headerText: 'Quantity', type: 'number' },
{ field: 'Total', headerText: 'Total', type: 'number' },
{ field: 'IsTaxable', headerText: 'Is Taxable', type: 'checkbox' }
],
height: 315
});
grid.appendTo('#grid');

We checked attached sample and we suspect that you have performed the Batch editing with ForeignKey column.
In your code example we found that, you have not defined the column.isPrimaryKey property in the unique Grid column which is required to perform the CRUD action.
Please refer the below documentation for more information
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/column/#isprimarykey
https://ej2.syncfusion.com/documentation/grid/edit/#editing
Query: When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
Based on your query we can update Rate, IsTaxable column value when select Product using updateCell method in the change event dropdown editing. Please refer the below syntax and documentation for more information.
Syntax:
gridInstance.updateCell(rowIndex, field, value);
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#updatecell
From your code example, we need more details about your query to validate further so, please ensure the following details us.
In your sample, we found that the Grid’s dataSource has been empty and you do not define the dataSource of foreignKeyColumn, dropdownlist editing which are required dataSource to perform the Grid’s CRUD action.
In ForeignKeyColumn, you do not define the column.dataSource property in the foreignKeyColumn(Product) and you have tried to map the different columns value in field and foreignKeyField. By default, in ForeignKey column, bind the external table/JSON data to Grid column and it will display value from foreignKeyValue which is depending on unique values of column.field and column.foreignKeyField.
We shared the Demo sample and documentation about the ForeignKeyColumn Feature.
Demo Sample: https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html
Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#foreign-key-column
Note: By default, we are unable update the ForeignKeyField(ProductId) and we should define that foreignKeyColumn’s dataSource since we can map the ForeignKeyValue to Grid column using that columns dataSource.
Also you have enabled the dropdown editing in Product column but dataSource is undefined. Since please ensure that you want to add the dataSource to dropdown editing while perform Grid’s Add action or we misunderstood please share exact requirement to us that will help to validate further.

How to render the text in the editor of column of grid panel differently(ExtJs6.0.2)

I have grid with a column that has an editor configured as text field.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
itemId: 'gridPanel123',
store: store,
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield'
}
}]
});
Say the column looks something like this,
Clearly the value of the column is ABCDE.
Now when the user clicks on the column, the editor mode pops up something like this :
Now my question is, is there any kind of renderer that would change the content of the editor based on the value of the column.
Considering my example, column value is "ABCDE", so the editor value is also coming as "ABCDE".
But what if I want to replace all 'A' in the column with 'Z' in the editor .So the editor value for me should have been 'ZBCDE'. How is this possible in extjs?

You can do it by setting value in beforeEdit event in cell editing plugin.
cellediting: {
listeners: {
beforeEdit: function (editor, context) {
context.value = context.value.replace("A", "Z");
}
}
}
To determine which column should be replaced just add check:
if(context.column.dataIndex == 'name'){
context.value = context.value.replace("A", "Z");
}
To reverse replace try :
validateEdit: function (editor, context){
context.record.set('name', context.value.replace("Z", "A"));
context.record.commit();
}
Example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2thq.

Where to programmatically set column filters when using a spreadsheet selModel?

This is a follow up question that I got answered here: How can I programmatically set column filters?
I have a 188 line Ext.js view. In this view I extend Ext.grid.Panel and in this grid I have set the selModel like so ...
selModel: {
cellSelect: false, // Only support row selection.
type: 'spreadsheet' // Use the new "spreadsheet" style grid selection model.
},
On one of the columns, the Status column, I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders. I have been doing this here in the code:
columns: [
...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true);
}
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
},
... more columns ...
A helpful SO member pointed out that is not the most efficient place for the code that sets the filter as the code will be executed for each row in the grid.
I have tried adding an afterrender function like so ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
listeners: {
afterrender: function(value) {
Ext.Msg.alert('We have been rendered value is ' + value );
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true); //Uncaught TypeError: Cannot read property 'setChecked' of null
}
}},
... but that results in this error message, //Uncaught TypeError: Cannot read property 'setChecked' of null.
What am I doing wrong here? Do I need the listeners:? Am I not getting passed the data I think I am getting passed to my afterrender function? Should I defining a initComponent function?
UPDATE:
I changed my code to what DrakeES suggested, ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
flex: 1,
filter: {
type: 'list',
value: 'Ready'
}
... but the result is this:
Where the animated loading image just sits there and spins. This prevents the user from be able to change the filter interactively. I wonder what it is I am doing wrong here?

I am programmatically setting the filter so that only rows that have
the Status of Ready will appear when the page firsts renders
What checking the filter's checkbox effectively does is setting filter on the store. Because you want the filter to be applied initially, it would be better to have it in the store config right away:
filters: [
{
id: 'x-gridfilter-status',
property: 'status',
value: 'Ready'
}
]
That way the grid view appear filtered in the first place — instead of initially showing all rows and only then filtering them out once the column menu renders and applies the filter. Note that having id: 'x-gridfilter-status' on the store's filter is required so that the column's filter picks it up instead of creating a duplicate.
Setting filter on the store, however, will not send feedback to the column filter menu, so the latter will remain unchecked unless you explicitly check it. Therefore, you still need an afterrender handler on either the grid or the column to make things look in sync.
A simple and elegant solution without listeners and stuff:
filter: {
type: 'list',
value: 'Ready'
}
Full working example: https://fiddle.sencha.com/#fiddle/prp

ExtJS Grid Row Specific EmptyText?

Our application uses the Ext.grid.Panel to display rows of data. When the user clicks a "New..." button we are adding a new record to the grid store. Everything is working fine.
However, on certain fields, of just this new (as of yet) unsynced records, we would like to display specific empty text within certain cells. For example: 'Enter title here' or 'Choose a platform".
I know there is an emptyCellText property on Column, but a) its broken, and b) I'd like to have this happen only on new, unsynced (e.g. phantom) records.
As I am new to this framework, any ideas are most welcome.

You can add this text in column renderer. You can test if record column value is not set and record is phantom. In this case you can add to column your placeholder text:
columns: [
{
header: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
emptyText: 'Enter name'
},
renderer: function(value, metaData, record) {
if (!value && record.phantom) {
return 'Enter name';
} else {
return value;
}
}
}
]
Edit
For displaying empty text also in editor fields just use emptyText config property in editor configuration. In editor configuration you can define by xtype which type of field will be used (textfield, numberfield, etc.) and add any of field config propertis:
editor: {
xtype: 'textfield',
emptyText: 'Enter name',
// other filed config properties...
},
Fiddle with live example: https://fiddle.sencha.com/#fiddle/3b5

Dojo Dgrid row selection not working and retrieving the values of dgrid selectors?

Currently i am using the Dojo dgrid with select box,textbox and two checkboxes but i am not able to disable the whole row selection and also when i click the second checkbox the dgrid select and deselect not working and its reflecting the first checkbox.
1.How to disable the whole row selection in dojo Dgrid?
2.How to get the values of Dgrid selectbox and Dgrid textbox when i click on save?
3.If i use selectors(Checkbox) i am not able to render the label for that column?
var columns = {
person :{
sortable: false,
renderCell: lang.hitch(this, function(object,value,node) {
if(value == true){
myTextBox = new dijit.form.TextBox({
name: "Amount",
value: "" ,
placeHolder: "Enter Amount"
}).placeAt(node);
}
})
},
description:{
label:"description",
field:"description",
sortable: false,
renderCell : lang.hitch(this, function(object,
value, node, options) {
new Select({
name : "select",
options : [ {
label : "Daily",
value : "daily"
}, {
label : "Weekly",
value : "weekly",
}]
}).placeAt(node);
}),
},
email : selector({
sortable:false,
field:"email"
})
/*i tried this instead of using selectors inserting a checkbox so that i can remove complete row selection but not working*/
email: {
sortable:false,
field:"email",
renderHeaderCell : function(node) {
var cellDiv = domConstruct.create("label", {
innerHTML : "Email"
}, node);
var checkBox = new CheckBox({
name: "checkBox",
id:"emailAddress",
checked: false,
}, cellDiv);
},
renderCell:createMessageLabel
}
};
function createMessageLabel(object,value, node,options){
console.log("node option",node);
var checkbox = new CheckBox({
name: "checkBox",
id:"emailAddress",
checked: false,
}).placeAt(node);
};
var grid = new GridView().show(gridData, columns, "",
"dgridAutoHeight", true);
function addSelection(self, event) {
console.log("Row selected: ", event.rows[0].data);
}
function removeSelection(self, event) {
console.log("Row deselected: ", event.rows[0].data);
}
grid.startup();
grid.on("dgrid-select", lang.hitch(grid, addSelection, this), true);
grid.on("dgrid-deselect", lang.hitch(grid, removeSelection, this), true);
Hope i can get some valuable answers....

To disable direct selection, set selectionMode: "none" in the properties passed to the constructor. This does not affect selection via a selector column.
You should still be able to set the label in the header cell of a selector column by setting the label property in the object passed to the selector column plugin.
If you want to use Dijit form widgets for the purpose of changing values of fields in items, you should probably not be defining renderCell functions yourself, but instead use the editor column plugin, which does the work of maintaining the state of data and putting it back in the store when you call save.

Thank you so much Ken for your valuable answer and as you said editor suits perfect for the above situation....but i have an another doubt like can't we user editor inside a renderCell like below as i needed the value of textbox on datachange so i thought of using editor inside rendercell....below code is working fine but the TextBox is not getting placed inside a particular node(Textbox view is not getting rendered) whereever the value is "True"....
dollarThresholdAvailable :{
field: "dollarThresholdAvailable",
label : "Threshold Limit",
sortable: false,
"class":"dollarThresholdAvailableValue",
renderCell: lang.hitch(this, function(object,value,node) {
if(value === true){
editor({
field: "dollarThresholdAvailable",
sortable: false
},TextBox).placeAt(node);
}
}),
}