Search code examples
reactjskendo-uikendo-gridkendo-ui-gridkendo-react-ui

Kendo UI Grid React customize header


I updated my data grid from Kendo UI React Wrappers to new React package @progress/kendo-react-grid 0.3.0. In old jQuery grid version (or wrapped into React components) I was able to manipulate grid header (e.g.: set columnMenu filterable to false) or to define headerTemplate.

Documentation of new package does not mention anything about this. In package source files I found directory header which contains files GridFilterRow.js, GridHeader.js, GridHeaderRow.js, but there is no way (or, I didn't found it) to customize these components.

I wonder if there is any way to customize grid header in new rewritten version of Kendo UI Grid for React?


Solution

  • The FilterRow of the grid is not customizable in the 0.3.0 version, and this is why it is not mentioned in the documentation.

    There is an issue logged in the official kendo-react repository about this: Make Grid Filter Cells more customizable

    For the current version, the filterable and filter settings can be controlled using the columns settings per each column. And there is property headerClassName that you can use for styling the cells.

    Column/filter menu is not in the roadmap for now, but you can vote for it in the official feedback portal.