javascript - Kendo Grid 的动态默认值

Question

我想在我的 Kendo Grid 中添加一个自动递增列。此字段不是服务器端自动递增，因为我希望用户看到该值并能够更改它。

我目前的解决方案是将 click 属性添加到 Create 按钮并遍历行以找到最高值并将其递增。

但是我怎样才能将这个值插入到新创建的行中呢？ Click 事件发生在新行创建之前。

所以有两种可能的解决方案:

1. 有一个变量作为默认值并在我的 JS 代码中更新它。
2. 以某种方式访问​​新创建的行，并更新值。

这是我的 JS 代码:

function createClick(id) {
    var grid = $("#" + id).data('kendoGrid');
    var highestRadif = 0;
    grid.tbody.find('>tr').each(function () {
        var dataItem = grid.dataItem(this);
        var radif = dataItem.SRadifReqR;
        highestRadif = highestRadif < radif ? radif : highestRadif;
    })
    alert(++highestRadif);
}

Answer 1

您可以使用 Grid 的 edit 事件将新的 generatedId 值添加到新 Grid 的 model。

这是他们的一些解释 documentation :

Edit

fired when the user edits or creates a data item.

• e.container jQuery, jQuery object of the edit container element, which wraps the editing UI.
• e.model kendo.data.Model, The data item which is going to be edited. Use its isNew method to check if the data item is new (created) or not (edited).
• e.sender kendo.ui.Grid, The widget instance which fired the event.

我想你的点击是这样的

//generate id code
vm.newId = ++highestRadif; // we need to store generated Id
grid.addRow();

然后在编辑事件上

edit: function(e) {
    var model = e.model; // access edited/newly added model
    // model is observable object, use set method to trigger change event
    model.set("id", vm.newId);
}

注意:您的架构模型的字段必须设置属性 editable: true，因为我们可以使用 set 方法更改模型字段值。此外，如果您的字段架构需要验证，您需要将其删除。

model: {
    id: "ProductID",
    fields: {
        ProductID: { editable: true, nullable: true },
    }
}

Sample