javascript - Kendo Grid 更改数据绑定(bind)上的动态列标题

Question

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

 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]
        }
)}

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

Answer 1

我通过在初始化网格之前通过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 来回聊天后)，网格控件不支持真正的动态列。