I am facing an issue with the dynamically created kendo UI grid.
When I specify the the columns array with title and field properties and render the grid, the grid columns do not show the specified title instead they show the field name. I do not want the field name to show up as it is, cause the field name itself will not make sense as a column header.
Note: This is done inside an angular controller.
This is my grid definition
<div kendo-grid="ctrl.commonGrid" options="ctrl.commonGridOptions"></div>
Here is the code that I use to generate the columns.
var columns = [];
angular.forEach(ctrl.ColumnConfig, function (col) {
var newCol ={
title: col.displayName,
field: col.mappingProperty.toCamelCase(),
}
columns.push(newCol);
});
After this I assign this to the grid columns collection
ctrl.commonGridOptions = {
columns: columns,
};
and then just use the grid dataSource data method to populate the data.
ctrl.commonGrid.dataSource.data(ctrl.TableData);
I am scratching my head since yesterday, but not able to figure out whats going wrong.
Can anyone help me out.
Thanks
Ok I fixed this. Following is the code that works as expected. The firstRow is nothing but the row from the list of objects that I fetch from the server, and the columnConfig is the configuration of the columns I want to display.
for (var property in firstRow) {
if (firstRow.hasOwnProperty(property)) {
model.fields[property] = { type: 'string' };
var col = $.grep(ctrl.columnConfig, function (e) { return e.mappingProperty === property });
if (col.length) {
columns.push({
title: col[0].displayName,
field: col[0].mappingProperty
});
}
}
}