I am populating the Kendo grid with data 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");
The datasource column expands dynamically every year.
Given this dynamic nature, customizing columns with additional checkbox column, header edits, and groupFooterTemplate is challenging. What approach can be taken to achieve these customizations?
In the past, fixed columns allowed for easy customization like so:
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') #"
}]
Furthermore, explorations on making grid data editable are sought after. How can the grid's data be edited?