Server side custom filter custom-directives GRID

[Piotr]

Hi i have used this custom directives:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/automatic-operations/#toc-custom-directives    

I can now make custom filter or dont know how ?

<kendo-grid-column field="probeWeight" title="{{ 'ServerTable.probeWeight' | translate }}" width="80" >
<ng-template kendoGridFilterCellTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService">
<kendo-multiselect
[data]="listItems"
[valuePrimitive]="true">
</kendo-multiselect>
</ng-template>
</kendo-grid-column>

How to add this to state object and reload Grid. It is working for Kendo Filters like this:

<kendo-grid-column field="enabled" title="{{ 'ServerTable.enabled' | translate }}" filter="boolean" width="60">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.enabled" disabled/>
</ng-template>
</kendo-grid-column>

But do working for my filter i have to add field like [filter]="filter" or somthing :( 

Thanks for help

[Dimiter Topalov]

Hi Piotr,

It seems that there has been some mix-up between several approaches. There are few separate approaches to customize the Grid filtering UI and their respective interaction with the Grid auto-binding directive are different.

If you need to customize the Grid filtering when the Grid filtering mode is "row" - the default one, there are two possibilities - use the Grid filter cell template:

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

The [filter] option of the Grid needs to be bound to a composite filter descriptor object, and the the valueChange event of the respective custom filtering UI component need to update the filter descriptor accordingly. This will automatically trigger the auto-biding directive, e.g.:

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

You can customize the filter row by introducing a custom filter component as well:

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

When this approach is used, the "applyFilter" method of the base filter cell component will result in triggering the filtering.

The other set of approaches is targeting customizing filter menus (as opposed to filter cells). They are applicable when the Grid filtering mode is "menu":

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

In this case, the kendo filter menu template needs to be used as opposed to the filter cell template. When this approach is used, calling the filterService.filter() method will result in triggering the auto-binding directive.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik