Kendo Grid 更改数据绑定上的动态列标题答案

【问题标题】：Kendo Grid Change dynamic columns title on databoundKendo Grid 更改数据绑定上的动态列标题
【发布时间】：2017-05-12 13:58:44
【问题描述】：

我有一个没有列定义的剑道网格，因为网格的字段是动态的，我没有机会在数据绑定事件之前知道这些字段。示例：

 var dataSource = new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
        read: {
            url: appPath + "Controller/GetGridData",
            dataType: "json",
            type: "POST",
            data: {
                dataSourceID: dataSourceId
            }
        },
    },
    schema: { data: "data", total: "total"},   
    pageSize: 10,
    serverSorting: true,
    serverPaging: true,
    serverFiltering: true,
});

 $("#grid").kendoGrid({
        dataSource: dataSource,
        filterable: {
            extra: false
        },
        dataBound: function (data) {

        },
        pageable: {
            pageSizes: true,
            pageSizes: [10, 20, 50, 100]
        }
)}

有没有办法在数据绑定事件或数据加载之后但在向用户显示之前动态修改列标题？

【问题讨论】：

你会为此走多远？我的意思是，我认为使用内置方式是不可能的，但是您可以处理网格外的请求，这不是很好。我这么说是因为更改任何选项（包括列定义）的唯一方法是使用 setOptions 并且您不能在任何事件中调用它，因为该方法会重新创建整个小部件。
我必须更改列标题才能在 javascript 中实现标题翻译。我认为一种可能的方法是在构建网格之后放置我的代码。我不知道是否有办法知道网格何时构建和有界。
问题是：如果你在创建后调用setOptions，它会重新创建然后再次向服务器打开一个新的请求。我认为可能的方式是用@987654325请求@网格外。
因为我在使用ServerPaging和过滤是不可能的..
好吧，您可以做的一件事是直接操作小部件的 DOM：dojo.telerik.com/Ajivi 但请记住，在小部件刷新的情况下，修改可能会丢失。

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

我通过在初始化grid 之前通过AJAX 调用请求数据，然后根据数据确定列名称，实现了“动态”列标题（在 Telerik 来回发送许多令人恼火的故障排除消息之后）。

$.ajax({
    type: "POST",
    url: "/Controller/GetGridData",
        // *Important* stringify the server-bound object
        data: JSON.stringify(dataSourceId),
        dataType: "json",
        contentType: "application/json",
        async: true,
        success: function(response) {
            // response contains data required for grid datasource
            ConstructGrid(response);
        }
    });

function ConstructGrid(gridData) {
    var dataSource = new kendo.data.DataSource({
       ... attributes
       data: gridData,
       ... more attributes
    });
    var columnsArray = [];
    if(gridData.attributeToCheck = "someValue") {
       columnsArray.push({field: attributeEqualToSomeValue, title="attributeMatchingSomeValue"});
    }
    else {
        columnsArray.push({field: attributeNotEqualToSomeValue, title="attributeNotMatchingSomeValue"});
    }
    .. continue to add more columns based on data then initialise grid
    $("#grid").kendoGrid({
        dataSource: dataSource,
        filterable: {
            extra: false
        },
        columns: columnsArray,
        pageable: {
            pageSizes: true,
            pageSizes: [10, 20, 50, 100]
        }
    )};
}

不完全是 100% 动态的，但它会根据从 AJAX 调用和 AFAIK 检索到的值更改列名（在与 Telerik 来回聊天之后），网格控件不支持真正的动态列。

【讨论】：

谢谢，很好的解决方案。对于我的问题，我认为最好在服务器端翻译 DataTable 列名称。

【解决方案2】：

检查这个 Jsbin

`https://output.jsbin.com/lesoxes/`

在这个例子中，我使用了剑道的数据源。

您将在控制台中获得所有列详细信息。

可能会帮助你

【讨论】：

OP 希望“更改动态列标题”。您知道一旦您可以访问列数组，是否有可用的方法来执行此操作？