Rendering columns within the `Grid` component using the `map` function is not working as expected. For example:
- When defining the `GridColumn` properties, such as `cell`, the `className` property doesn't apply as expected. If I remove the cell property from the GridColumn component it works as expected.
- If I don't explicitly define the `headerCell` property, the filter icon (three dots) isn't visible. Hence, I need to manually add the filter options in the header cell.
Note: Everything works as expected when I define each column component individually, without using the `map` function approach.
Objective: I need to display 20+ columns in the grid, and I want to avoid manually defining each `GridColumn` component. Instead, I would like to dynamically render the columns using the `map` function. In my case, the column headers are custom components, and the column filter functionality should be displayed conditionally.Please find the attached file with implementation.
I kindly request your help. Thank you.
1 Answer, 1 is accepted
Hi, Benjith,
Thank you for the provided attachment.
After examining the provided code, I can suggest utilizing our new `cells` property. Instead of `cell` and `cellRender` to enable the new customization options for the Grid, that come with it.
The difference between the aforementioned properties is that with the new `cells` you can choose which type of cells you want to customize rather than customizing all the cells at once like with the `cell` prop.
For instance, you can specify that you only want to customize the headerCell. This allows you to use the default stylization for the rest of the grid.
I prepared a demo example that displays the use of a custom headerCell, a custom data cell, and also a column menu:
You can read more about the new custom cells from this article in our documentation:
The new `ColumnMenu` unlocks the opportunity to use the described functionality for a menu (three dots) in the header cell without having to manually implement it. You can read more about this new feature here:
I hope the above information resolves the matter but if not, please provide me with a runnable example so I can further help you with the integration of the `cells` property.
Regards,
Yanko
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.