How to override grid filter menu - is null/is empty

[Veronika]

Hello, I'm having trouble overriding the grid filter menu.

The issue I'm trying to resolve is combining operators is null + is empty (and is not null + is not empty) - from the user's point of view, there is no difference between value being null or an empty string. For the user it's just blank.

I tried to follow the documentation, to omit the is null/is not null operators, but then all the labels inside the custom string filter popup are completely missing. The other (default) string filter labels are shown as usual. Also - how can I replace the default string filter with my custom filter, so that it affects all the grids in my application?

 

[Martin Bechev]

Hello Veronika,

Thank you for the provided details on this case.

Using the kendoGridFilterMenuTemplate with <kendo-grid-string-filter-menu> component is the right way to go when the built-in string filter operators need to be customized.

Here is an example where Is null, Is empty, Is not null, and Is not empty operators are removed from the list:

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

 <kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
          <kendo-grid-string-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService">
              <kendo-filter-eq-operator></kendo-filter-eq-operator>
              <kendo-filter-neq-operator></kendo-filter-neq-operator>
              <kendo-filter-contains-operator></kendo-filter-contains-operator>
              <kendo-filter-not-contains-operator></kendo-filter-not-contains-operator>
              <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
              <kendo-filter-endswith-operator></kendo-filter-endswith-operator>
          </kendo-grid-string-filter-menu>
    </ng-template>
    </kendo-grid-column>

Currently, there is no built-in option that can be used to apply this change to all of the Grids. A possible approach is to wrap the Grid into a custom component that can be further reused as a base. However, creating such a component is considered a developer effort. 

In order to customize completely the Filter Menu of the Grid, the kendoGridFilterMenuTemplate directive is the way to go again but replacing the suggested initially <kendo-grid-string-filter-menu> component with a custom one. For example:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-multi-checkbox-menu-filtering

I hope this helps

Regards,
Martin
Progress Telerik