How do I restyle the grid filter row?

[Fredric]

Is there a way to restyle the grid filter row (e.g. move the filter icon below the searchbox)?

[Martin Bechev]

Hello Fredric,

Thank you for the provided screenshot.

Indeed there is no built-in option that would help to accomplish the desired layout. What I could suggest is to utilize the kendoGridFilterCellTemplate which allows adding any custom components in the filter row.

For more details and examples of such an approach please check the following article which covers that topic:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-customizing-filter-rows

It is worth mentioning that when using templates, the developer is responsible for the filtering logic, and needs to handle the respective events of the custom components in the template, and manually update the Grid collection.

Another option is to use entirely custom CSS code as the following example demonstrate:

https://stackblitz.com/edit/angular-fw8iqa

I hope this helps. In case of further questions do not hesitate to write back.

Regards,
Martin
Progress Telerik