newbieeee newbieeee -4 years ago 110
Javascript Question

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

I assign the datasource into the Kendo grid using javascript:

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");


Note that the datasource - column is generate dynamically (it will expand every year).

Therefore, I could not find a way to customize the columns now.
What can I do here to customize it like, add in additional checkbox column, edit the header, and also set groupFooterTemplate?

Previously, the columns are fixed and I can customize easily:

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') #"
}]


Also, is it possible to make the data editable in the grid?

Please tell me if using javascript is not a good idea :(
Any suggestion or idea is much appreciated. Thanks in advanced.

Answer Source

I post my solution here, maybe it could help someone in future.

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

then customized your own title: 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
        });
    }
}

Thank you Sandman for the hints!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download