kendo 网格列自动生成时如何自定义列模板？

Question

我使用 javascript:

将数据源分配到 Kendo 网格中

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "@Url.Action("GetProductList", "Home")",
            type: "POST"
        }
    }       
});
var grid = $("#gridHardwares").kendoGrid({
    dataSource: dataSource,
    height: 600,
    sortable: true,
    groupable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    resizable: true
}).data("kendoGrid");

请注意，数据源列是动态生成的（每年都会扩展）。

因此，我现在找不到自定义列的方法。我可以在这里做些什么来自定义它，添加额外的复选框列，编辑 header，并设置 groupFooterTemplate?

以前，列是固定的，我可以轻松自定义：

columns: [
{
    template: "<input type='checkbox' class='checkbox' />",
    width: 20
}, {
    field: "PRODUCT_NAME",
    title: "Product Name",
    width: 200
}, {
    field: "PRICE2017",
    title: "Price 2017",
    width: 200,
    aggregates: ["sum", "average"],
    groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
}]

另外，是否可以让网格中的数据可编辑？

Answer 1

我post我的解决方案在这里，也许它可以帮助将来的人。

    var customColumns =  [{
            template: "<input type='checkbox' class='checkbox' />",
            width: 20
        }];

然后自定义自己的标题：var customHeaders = []

    for (var i = 0; i < customHeaders.length; i++) {
    if (i > 4) // after Name, Description, Region etc..
    {
        if (i == 5) // start with the first price column
        {
            customColumns.push({ 
                title : customHeaders[i], 
                field: headers[i],
                width: 150,
                template:
                    "# if(" + headers[i] + " != null) {# " +
                    "#= kendo.toString(" + headers[i] + ", 'n') #" +
                    "# } else { #" +
                    "" +
                    "#} # ",
                aggregates: ["sum", "average"],
                groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
            });
        }
        else // compare price with previous year
        {
            customColumns.push({ 
                title : customHeaders[i], 
                field: headers[i],
                width: 150,
                template:
                    "# if(" + headers[i] + " != null) {# " +
                    "#= calculatePercentage(" + headers[i-1] + ", " + headers[i] + ") #" +
                    "# } else { #" +
                    "" +
                    "#} # ",
                aggregates: ["sum", "average"],
                groupFooterTemplate: "Sum: #= kendo.toString(sum, '0.00') # || Average: #= kendo.toString(average, '0.00') #"
            });
        }
    }
    else
    {
        customColumns.push({ 
            title : customHeaders[i], // customized header
            field: headers[i] // original header
        });
    }
}

谢谢睡魔的提示！

kendo 网格列自动生成时如何自定义列模板？

How to customize column template when kendo grid column is auto generated?

javascript

kendo-grid

kendo-asp.net-mvc