Dynamic Kendo UI Grid

Question

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

Answer 1

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