0

我正在尝试创建一个可编辑的网格，我可以在其中添加 TransactionItems。每个 TransactionItem 将有一个产品（组合框）、费率（文本框）、数量（文本框）、总计（文本框）和 IsTaxable（复选框）字段。当我选择产品时，我还想更新该产品同一行上的 Rate 和 IsTaxable 字段。如何？

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

1 回答 1

0

我们检查了附加的样本，我们怀疑您已经使用 ForeignKey 列执行了批量编辑。

在您的代码示例中，我们发现您没有在执行 CRUD 操作所需的唯一 Grid 列中定义column.isPrimaryKey属性。

请参阅以下文档以获取更多信息

帮助文档： https ://ej2.syncfusion.com/documentation/api/grid/column/#isprimarykey
https://ej2.syncfusion.com/documentation/grid/edit/#editing

查询：当我选择产品时，我还想更新该产品同一行上的 Rate 和 IsTaxable 字段。如何？

根据您的查询，我们可以在更改事件下拉编辑中使用 updateCell 方法选择产品时更新 Rate、IsTaxable 列值。请参阅以下语法和文档以获取更多信息。

句法：

gridInstance.updateCell(rowIndex, field, value);

帮助文档： https ://ej2.syncfusion.com/documentation/api/grid/#updatecell

从您的代码示例中，我们需要有关您的查询的更多详细信息以进一步验证，因此请确保我们提供以下详细信息。

在您的示例中，我们发现 Grid 的 dataSource 已经为空，并且您没有定义 foreignKeyColumn 的 dataSource，下拉列表编辑是执行 Grid 的 CRUD 操作所需的 dataSource。

在 ForeignKeyColumn 中，您没有在 foreignKeyColumn(Product) 中定义 column.dataSource 属性，并且您尝试在 field 和 foreignKeyField 中映射不同的列值。默认情况下，在 ForeignKey 列中，将外部表/JSON 数据绑定到 Grid 列，它将显示来自 foreignKeyValue 的值，该值取决于 column.field 和 column.foreignKeyField 的唯一值。

我们分享了有关 ForeignKeyColumn 功能的 Demo 示例和文档。

演示示例： https ://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html

文档： https ://ej2.syncfusion.com/documentation/grid/columns/#foreign-key-column

注意：默认情况下，我们无法更新 ForeignKeyField(ProductId)，我们应该定义 foreignKeyColumn 的 dataSource，因为我们可以使用该列 dataSource 将 ForeignKeyValue 映射到 Grid 列。

您还启用了Product列中的下拉编辑，但 dataSource 未定义。由于请确保您希望在执行 Grid 的添加操作时将数据源添加到下拉编辑中，否则我们误解了请与我们分享确切的要求，这将有助于进一步验证。

于 2021-06-28T06:50:02.373 回答