Configuring built-in filters

[Chau]

From the article https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/#toc-hiding-row-filter-operators, it seems that I can specify the available filter operators for a grid column.

With the code below, should I expect to only see 'Contains' and 'Is Equal To' in the the filter menu?  I tried but the filter menu shows all filter operators.

<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-contains-operator></kendo-filter-contains-operator>

           <kendo-filter-eq-operator></kendo-filter-eq-operator>

       </kendo-grid-string-filter-menu>

   </ng-template>

</kendo-grid-column>

Thanks for any clarification.

[Dimiter Topalov]

Hello Chau,

I tried the provided snippet and it seems to yield the expected result on my end:

https://plnkr.co/edit/4EMO5bQOQKMmU3ycRkoT?p=preview

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/#toc-setting-the-order-of-the-filter-operators

Please make sure that the filterable mode is set to "menu" to enable the Grid filter menu functionality (as opposed to the default filter row one). You can inspect the example above and apply the necessary adjustments to your implementation.

If the issue persists, please send us a similar isolated runnable project where the problem can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Thanks Dimiter for the clarification.

I was using filterable="true" (which shows the default filter row), and used the kendoGridFilterMenuTemplate, that's why it did not work. I changed to use the kendoGridFilterCellTemplate and the list of filter operators is showing correctly now.

[Dimiter Topalov]

Hi Chau,

Thank you for sharing your experience and the adjustment that lead to resolving the issue.

Regards,
Dimiter Topalov
Progress Telerik

[jubin]

I m new to kendoGridFilterCellTemplate.

I'm using templateref to pass ng-template to the shared kendo grid. So, it looks something like this.

In the page.component.html

<!-- ng template for custom row filter cell mod kendo -->
<ng-template #cellFilterTemplate let-filter let-column="colum">
    <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="startswith">
        <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
        <kendo-filter-eq-operator></kendo-filter-eq-operator>
    </kendo-grid-string-filter-cell>
</ng-template>

The above template I'm passing to the shared kendo grid html

In the shared kendogrid.component.html

       <!-- ng template for modding filter type = row -->
                <ng-template *ngIf="col.cellFilterTemplateRef !== undefined" kendoGridFilterCellTemplate let-filter
                    let-column="column">
                    <ng-container *ngTemplateOutlet="col.cellFilterTemplateRef; context:{$implicit:filter,colum: column}">
                    </ng-container>
                </ng-template>

I seem to be getting the two operators namely starts with and equals to, but there is no text in them and also clicking on them don't work. I have attached the image of the problem.

 

 

I have only included the relevant parts of the code.

Thanks.

[Dimiter Topalov]

Hello Jubin,

We recommend using the template markup directly within the Grid Column markup to ensure it will be working as expected. If a generic custom component is used as a wrapper, and different templates should be used for different Grid columns that are generated dynamically, all templates can be defined within the Grid Column markup, and the desired one could be displayed via *ngIf, e.g.:

https://stackblitz.com/edit/angular-b4gopp?file=app/app.component.ts

As for the specific setup, we cannot determine what is causing the described problem, based on the provided information. I can suggest checking the browser developer tools console for some JavaScript errors that might point you in the right direction. Also, if you send us an isolated runnable project, similar to the one above where the exact setup and the described problem can be observed, we will inspect it further, and try to provide an answer that is most suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik