Uncheck all the selections when clicking filter button

[Frank]

Hi,

We have a grid with around 40 columns, and all of them are filterable, there's also a checkbox in each row.

My question is, if the user checked some rows, then do filtering on some column(s), the checked selections are not be unchecked, how to add an action into the filter function with just clearing the selected keys, then continue with the filtering?

We have the function to clear the selected keys, just not sure how to add it without affecting the regular filtering, with the least code change.

 

Some snippets of our code:

userlist.components.html

<kendo-grid #grid="kendoGrid" [kendoGridBinding]="gridData" [groupable]="true" filterable="menu"
  [pageable]="true" [sortable]="true" [reorderable]="true" [columnMenu]="true"
  [kendoGridSelectBy]="mySelectionKey" [selectedKeys]="mySelection" >

<ng-container *ngFor="let column of columnConfig">
  <kendo-grid-column [field]="column.field" [title]="column.title" [width]="column.width" [filter]="column.filter"
    [format]="column.format" [hidden]="column.hidden">
  </kendo-grid-column>
</ng-container>

Column Config Interface

export interface ResultColumnConfig {
  title: string;
  field: string;
  width: string;
  hidden: boolean;
  filter: string;
  format: Format;
  order?: number;
  default?: boolean;
}

Column Config JSON

[
    {
        "title": "User Name",
        "field": "username",
        "width": "100",
        "hidden": false,
        "filter": "text",
        "format": null
    },
    {
        "title": "Status",
        "field": "status",
        "width": "80",
        "hidden": false,
        "filter": "text",
        "format": null
    },
...
]

 

Thanks!

[Martin]

Hi Frank,

Thank you for the provided code snippet.

In general, the filterChange (or dataStateChange) event is triggered every time when the Grid data is filtered (paged, sorted or grouped if the dataStateChange event is used). In order to reset the selected rows, set mySelection array to an empty array in the event handler.

Here is an example of the approach:

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

I hope this helps.

Regards,
Martin
Progress Telerik

[Frank]

Thank you Martin, it works like a magic.

However there's another issue, the selections were cleared when switching to next page, how to avoid the cleaning for page changes?

Thanks!

[Martin]

Hi Frank,

I already answered this question in the ticket:

https://www.telerik.com/account/support-tickets/view-ticket/1452450

Please, choose only one of the threads to continue our communication in order to facilitate a cleaner support history of your account and to provide a better support service in general.

Thank you in advance.

Regards,
Martin
Progress Telerik