更新由远程数据填充的 Kendo 网格列的值

Question

我有一个 Kendo 网格，它会在页面加载后立即呈现。网格由远程数据填充。

 logMonitoringGrid.kendoGrid({
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: window.$vars['webApiHost'] + "logs",
                            dataType: "json",
                        }
                    },
                    serverFiltering: false,
                    serverPaging: false,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                TTId: { type: "string" },
                                LUId: { type: "number" },
                                Level: { type: "string" },
                                Server: { type: "string" },
                                Thread: { type: "number" },
                                Message: { type: "string" },
                                Ip: { type: "string" },
                                RId: { type: "string" },
                                Timestamp: { type: "date" }
                            }
                        }
                    }
                },
                columns: columnObjects
            });

var lGrid = logMonitoringGrid.data("kendoGrid");

还有一个API有所有租户的数据，像这样(JSON)

{
    Id: 5196
    Name: "unittest"
    ContactEmail: "admin@unittest.com"
    Theme: "default"
    DefaultLocale: "en-US"
    IsInternal: false
}

我需要用相应的租户名称替换网格每一行的租户 ID。网格的远程数据不会随它发送任何租户名称。这就是为什么我要创建所有租户 ID 及其名称的地图。

 var tenantData = new kendo.data.DataSource({
                transport: {
                    read: {
                        beforeSend: function (xhr) {
                            o9Util.setRequestHeaders(xhr);
                        },
                        url: crudUrl("tenants"),
                        dataType: "json"
                    }
                }
            });

            var myMap = new Map();

            tenantData.fetch(function () {
                var data = tenantData.data();
                for (var i = 0; i < data.length; i++) {
                    myMap.set(data[i].Id, data[i].Name);
                }
            })

现在我正在像这样更新网格列

lGrid.dataSource.fetch(function () {
                var data = this.data();
                for (var i = 0; i < data.length; i++) {
                    for (var [key, value] of myMap.entries()) {
                        if (parseInt(data[i].TTId) === key) {
                            data[i].set("TTId", value);
                        }
                    }
                }
            })

这种方法可行，但每次加载页面时都需要一些时间来更改列的值。此外，页面在一段时间后变得无响应。有没有其他方法可以在页面加载后立即更新网格？

Answer 1

A 建议如下：

在 Kendo 的电话之前拨打您的 API（租户）电话。记住在这个请求完成时初始化网格，也就是说，在 DataSource's requestEnd event;
初始化您的网格；

在网格的 dataSource.schema.parse 中，您可以设置所需的值。示例：

logMonitoringGrid.kendoGrid({
    dataSource: {
        schema: {
            parse: function(data) {
                let tenantJsonData = tenantData.data().toJSON();

                data.forEach(item => {
                    let tenantItem = tenantJsonData.find(ti => ti.Id === item.TTId);

                    if (tenantItem) {
                        item.TTTId = tenantItem.Name;
                    }
                });

                return data;
            }
        }
    }
 }

我没有测试过，但应该可以。

更新由远程数据填充的 Kendo 网格列的值

Update the values of a Kendo grid column which is populated by remote data

javascript

jquery

kendo-ui

kendo-grid