Filter for KendoUI grid with Angular

[Chau]

Can someone provide me some sample code:

1) to reset grid filters programmatically?

2) to show the 'clear filter' icon when filter criteria is 'Is Null' or 'Is Empty'?  (the 'clear filter' icon currently is only visible when there is text entered in the filter input criteria).

Thanks!

 

[Dimiter Topalov]

Hi Chau,

You can reset the Grid filters programmatically by manipulating the filter configuration the Grid is bound to, e.g. (based on this documentation article):

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

The data collection the Grid is bound to should be also processed accordingly when the filters are cleared.

By design, the "Clear" icon is responsible for clearing the value of the Filtering UI for the corresponding column only. As when the "IsNull" or "isEmpty" operators are used, the value in the filtering UI input is irrelevant, the "Clear" icon is not displayed - the filter should be changed by selecting another operator from the dropdown with options.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Thanks Dimiter for your prompt reply.

In the article you sent, I saw the grid definition is using [data], whereas my grid is using [kendoGridBinding] property.

Can I still use the DataStateChanged event in this case?

  <kendo-grid [kendoGridBinding]="dataresults"
                [groupable]="true"
                [group]="groups"
                (groupChange)="groupChange($event)"
                [filterable]="true"
                [filter]="filter"
                (filterChange)="filterChange($event)"
                [resizable]="true"
                [sortable]="true"
                [sort]="sort"
                (sortChange)="sortChange($event)"
                [pageSize]="pageSize"
                [pageable]="true"
                (pageChange)="pageChange($event)"
                [skip]="skip"                
                [selectable]="{enabled: true, checkboxOnly: true }"
                [kendoGridSelectBy]="mySelectionKey"
                [selectedKeys]="mySelection"
                (cellClick)="editClick($event)"
                
                >

[Chau]

I got clear filters functionality up running after introducing the DataStateChanged event as explained in the article that Dimiter sent out.

Thanks again, Dimiter!

[Chau]

Regarding the isEmpty and isNull filter operators, is there a way to indicate that such filter has been applied to a column, like how to programmatically set background color to the column in the filterChange event where I can detect the filter operator = isNull or isEmpty?

[Chau]

Hi Dimiter,

When a filter is set on a grid column, the filterChange event indicates the field, operator and value of the filter criteria.

How do I get the column index in the grid by  its field name?

If I had the colIndex, then I could call this line to set the cell background color:

(document.querySelector('.k-grid th:nth-child(${colIndex}) kendo-grid-filter-wrapper-cell.k-filtercell-wrapper') as HTMLElement).style.background='blue');

Thanks for any suggestion!

 

[Dimiter Topalov]

Hello Chau,

As direct DOM manipulation is not considered a good practice in Angular applications, I can suggest using the Grid Filter cell template and the built-in filters to conditionally provide a custom class to these cells alongside some CSS to achieve the desired functionality, e.g.:

kendo-grid-column field="ProductName" title="Product Name">
       <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
         <kendo-grid-string-filter-cell
            [column]="column"
            [filter]="filter"
            [ngClass]="{'filtered': isFiltered(column.field)}">
         </kendo-grid-string-filter-cell>
       </ng-template>
   </kendo-grid-column>

styles: [`
    >>> .filtered span.k-select {
      background-color: pink;
      color: white;
    }
  `]

public isFiltered(colName: string) {
      const operators = ['isnull', 'isnotnull', 'isempty', 'isnotempty'];
      return this.state.filter.filters.some(f => (f.field === colName && operators.indexOf(f.operator) > -1));
    }

It is also worth mentioning that several columns can be filtered by these operators, and then targeting the column by index will not work.

Here is an example, demonstrating the described approach (try the ProductName column):

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

I got a build error "Property 'field' does not exist on type 'CompositeFilterDescriptor | FilterDescriptor', so I changed to use array property then it worked!

code changed to:

return this.state.filter.filters.some(f => (f['field'] === colName && operator.indexOf(f['operator']) >  -1))

Thank you, Dimiter!

[JoeThomas]

hi Demiter, I have a similar question here, thanks https://www.telerik.com/forums/angular-kendo-grid-save-sorted-filtered-grid-in-a-variable