当另一个单元格更改时，使用 Ajax 响应更改 Kendo 网格单元格

Question

使用具有 3 列的 Kendo 网格，我有一个事件会在第一列发生更改时触发，该事件会进行 ajax 调用并返回一些数据。我想用返回的数据更新第二列，但我没有运气，我什至不确定这是否是正确的方法。我可以通过向我的网格的数据源添加更改事件来使用静态数据更改第二列，但这当然没有帮助。我似乎可以找到的唯一示例显示使用客户端数据更改另一列，而不是从服务器返回的数据。到目前为止，这是我所拥有的：

 $("#manualStatsGrid").kendoGrid({
        dataSource: this.GetManualStatisticsDataSource(),
        sortable: true,
        pageable: false,
        filterable: true,
        toolbar: ["create"],
        editable: "inline",
        messages: {
            commands: {
                create: "Add New Statistic"
            }
        },
        edit: function (e) {
            var _this = _manualStats;
            var input = e.container.find(".k-input");

            var value = input.val();                

            input.keyup(function(){
                value = input.val();
            });                

            $("[name='Statistic']", e.container).blur(function(){
                var input = $(this);
                $("#log").html(input.attr('name') + " blurred " + value);

                //valid the GL account number
                $.ajax({
                    type: "GET",
                    url: _this.ValidateGlUrl,
                    dataType: 'json',
                    data: { glNumber: value },
                    success: function (response) {
                        var newDescription = response.Data.description;
                        console.log(newDescription);
                        //change description column here?
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });


            });
        },
        columns: [
            { field: "Statistic" },
            { field: "Description" },
            { field: "Instructions" },
            { command: ["edit", "destroy"], title: " ", width: "250px"}
        ]            
    });
}

this.GetManualStatisticsDataSource = function () {
    var _this = _manualStats;
    var dataSource = {
        type: "json",
        transport: {
            read: {
                type: "POST",
                url: _this.GetManualStatisticsUrl,
                dataType: "json"
            },
            update: {
                type: "POST",
                url: _this.UpdateManualStatisticsUrl,
                dataType: "json"
            },
            create: {
                type: "POST",
                url: _this.CreateManualStatisticsUrl,
                dataType: "json"
            },
            destroy: {
                type: "POST",
                url: _this.DeleteManualStatisticsUrl,
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "Statistic",
                fields: {                        
                    Statistic: {
                        type: "string",
                        editable: true,
                        validation: { required: true, pattern: "[0-9]{5}.[0-9]{3}", validationmessage: "Please use the following format: #####.###" }
                    },
                    Description: { editable: false },
                    Instructions: { type: "string", editable: true }
                }
            }
        }

Answer 1

在edit 事件中，您有e.model。该模型具有set() 方法，可以更改任何dataItem 的属性值：

edit: function (e) {
    ...
    var editEvent = e; // Creates a local var with the edit's event 'e' variable to be available inside the 'blur' event
    $("[name='Statistic']", e.container).blur(function() {
        ...
        $.ajax({
            ...
            success: function(e, response) { // 'e' inside this callback is the 'editEvent' variable
                e.model.set("Description", response.Data.description); // e.model.set() will change any model's property you want
            }.bind(null, editEvent) // Binds the 'editEvent' variable to the success param
        });
    });

Working demo

把这个sn-p放在我的头上。如果有什么问题，请告诉我。