服务回调中的KendoUI网格服务器动态列绑定

KendoUI Grid Server Dynamic Column binding in service callback

本文关键字：服务器 动态 绑定 网格 KendoUI 回调 服务      更新时间：2023-09-26

我正在努力理解KendoUI网格的工作原理。我已经成功地从服务器返回了分页数据，服务器端分页也在工作。

但我在动态设置列详细信息时遇到了问题，即既不显示标题也不显示模板，列标题显示绑定字段的名称。我认为这个问题与列何时初始化有关，因为我在从服务回调后了解了列的详细信息。

以下是我如何绑定网格：

$("#kGrid").kendoGrid({
            dataSource: {
                serverPaging: true,
                schema: {
                    data: "data",
                    total: "total"
                },
                pageSize: 10,
                transport: {
                    read: function(options) {
                        var searchParam = new Model.SearchParamsCM('QuoteDomainTasks', 'QuoteList', false, options.data.page, options.data.pageSize);
                        seHttpService.GetWithParms('/spa/api/genericrequest', searchParam)
                            .then(function (result) {
                                var data = oThis.createJSONFromResults(result.data, oThis);
                                options.success(data);
                            },
                            function(result) {
                                options.error(result);
                            });
                    }
                }
            },
            columns: oThis._gridColumns, 
            scrollable: false,
            pageable: { "refresh": true, "pageSizes": true },
            sortable: true,
            filterable: true
        });

这个在哪里_gridColumns填充在oThis.createJSONFromResults中。此代码位于TypeScript中。

数据源仅用于读取网格的内容，而不是其配置（在设置网格时只需要创建一次）。您需要将这两个关注点分开，以便在调用$("#kGrid").kendoGrid()时oThis._gridColumns具有列定义。

Kendo Grid并不真正支持动态更改列定义，因此如果您需要，您可以选择：

  • 只要列定义必须更改，就重新创建整个轴网
  • 手动更改内容（例如，如果只有标题更改，则可以通过jQuery选择和编辑元素来完成更改）
  • 试着弄乱内部，例如下面这样的东西

（注意，这在很大程度上是未经测试的，可能会与新的剑道UI版本决裂）

grid.options.columns = changedColumnDefinition;
grid.table.find(">thead").empty();
grid._columns(grid.options.columns);
grid._thead();
相关文章：