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

Question

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');

score 1 · Answer 1 · edited Sep 30 '21 at 21:40

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 update a different column/cell's value based on current column selected value - editable grid Syncfusion(Javascript es5)

1 Answers1