HeaderTemplateDirective & FilterMenuTemplateDirective produces verbose template code

[Jonathan]

Hello,

I'm using FilterMenuTemplateDirective and HeaderTemplateDirective  of @progress/kendo-angular-grid in order to custom FilterMenu presentation and behaviour.

It works fines as described in the documentation.

But, in my case I need to use these directives in almost of my grid columns, then it produces a lot of repetitive code as in the example below (see code lines in red and run live code here)

Please, I would be delighted to know what is the best approach to avoid repeating the same code in this case ?

Thanks for your help.
Jonathan.

 

[Yanmario]

Hi Jonathan,

What can be done to reduce code repetivnes, in this case, is to define the Grid columns dynamically and use only one kendoGridFilterMenuTemplate as demonstrated in the following example:

https://stackblitz.com/edit/angular-av8sby-kaviy8?file=src%2Fapp%2Fapp.component.ts

Another option would be to wrap the Grid component and reuse it. Here is a basic example of such an approach:

https://stackblitz.com/edit/grid-wrapper-component?file=app%2Fgrid-wrapper%2Fgrid-wrapper.component.ts

I hope both suggestions help.

Regards,
Yanmario
Progress Telerik

[Jonathan]

Hi Yanmario,

Thanks for you solution, its perfect !

I feel dumb now that I see your solution ! I need to be in Angular mode, no more in asp.net core !  :-)

Thx.

Jonathan.