Custom filter for grid

[Pouya]

Hi,

Assume I have a datasource with ID and Name fields. I display the Name but the main field is ID. I manage to show the right Name and get the ID with a combobox in Edit and Add mode. But how can I fix the filter for Name?

<kendo-grid-column field="ID" title="Begrepp">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.Name}}
    </ng-template>
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column" let-formGroup="formGroup" let-isNew="isNew">
        <kendo-combobox [valuePrimitive]="true" [formControl]="formGroup.get(column.field)" [data]="personBegreppData" textField="Name"
            valueField="ID" [placeholder]="dataItem.Name" (filterChange)="handleACFilter($event)"
            [filterable]="true">
        </kendo-combobox>
    </ng-template>
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-string-filter-cell [showOperators]="false" [column]="column" [filter]="state.filter">
        </kendo-grid-string-filter-cell>
    </ng-template>
</kendo-grid-column>

[Dimiter Topalov]

Hi Pouya,

There are couple of viable approaches for filtering the Grid in scenarios where a column is bound to a complex object (either directly or via a foreign key) that are applicable for filtering on a field that is different than the one the column is bound to as well.

You can either create a reusable custom filter component, as described and demonstrated in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/reusable-filter/

https://plnkr.co/edit/oR7Tu8lFxYTDt1CumtEe?p=preview

... or handle the filterChange (or dataStateChange) event and provide custom logic for filtering the data, based on the incoming filter text value, e.g.:

https://plnkr.co/edit/ZSNJ9kFWtzs9yWlon156?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Pouya]

Hi Dimiter,

A quick question. We have decided to use Menu mode for filtering. Is it possible to implement reusable filter for the menu approach?

Regards,

/Pouya

[Pouya]

And also, how can it be down with a Textbox (input)?

[Dimiter Topalov]

Hello Pouya,

You can customize both Filter Rows and Filter Menus depending on the preferred filtering mode. Both Filter Rows and Filter Menus can be customized either by using the built-in Grid filtering UI in the respective template (in this case - the FilterMenuTemplate), or by providing a custom reusable component in this template:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/

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

An example for creating a reusable filter menu component is available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-operations/filtering/reusable-filter/#toc-filter-menu

However, in the discussed scenario, keeping the default Grid Filter Menu for the respective column, and manipulating the filters before processing the Grid data as previously described, should suffice:

https://plnkr.co/edit/pA0ydVPk7vYfhPBHTV4T?p=preview

Note that in this case, the incoming filter descriptors are of type CompositeFilterDescriptor and the actual FilterDescriptor is nested 1 level further.

Regards,
Dimiter Topalov
Progress Telerik