Iterate over Kendo Grid Cells Created Dynamically

[Brandon]

I am currently building out multiple kendo grids dynamically by sending it a json of key value pairs. I do not explicitly define kendo column components. 

I now have a requirement to append a icon in the corner of the cell if it meets a certain criteria based on the row header and col header of the particular cell.

Is there any way to iterate over the cells of a grid? Or a list of cells the grid component has

 

Thanks!

[Dimiter Topalov]

Hi Brandon,

When Grid columns are not defined, the only available approach for accessing the header and content cells, is via JavaScript after the Grid is rendered (e.g. document.querySelectorAll('.k-grid .k-grid-content td') - cells, document.querySelectorAll('.k-grid .k-grid-header th') - header cells).

However, such an approach is not recommended, and you can create Grid columns dynamically via iterating an array of column configuration objects like in the following online demo:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/hidden/#toc-using-structural-directives (second example)

When this approach is used, you can style certain cells using the approach demonstrated in the following demo:

https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-cells

... as well as column headers via the column class and style bindings:

https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles

You can also provide custom content to header cells via the header template:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-header-template

... and to cells via the cell template:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template

For example you can provide a custom icon in some header cells conditionally via *ngIf:

https://plnkr.co/edit/duoV6WMw0AsL2HTYqxTv?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik