Custom filter for grid

2 Answers 4870 Views
General Discussions
Pouya
Top achievements
Rank 1
Pouya asked on 12 Mar 2018, 04:00 PM

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>

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 13 Mar 2018, 09:43 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Pouya
Top achievements
Rank 1
commented on 14 Mar 2018, 01:02 PM

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
Top achievements
Rank 1
commented on 14 Mar 2018, 02:35 PM

And also, how can it be down with a Textbox (input)?
0
Dimiter Topalov
Telerik team
answered on 16 Mar 2018, 08:20 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Pouya
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or