How to Get Filtered Data from Kendo UI Grid

Kendo UI Grid supports binding to local data on the client side with kendoGridBinding directive. The directive supports client-side filtering, paging and sorting of the data out of the box. As the directive takes care of all operations, you might wonder how to access the filtered data across pages in the grid.

Unfortunately neither the grid nor the data binding directive do not allow access to filtered data. However, it is possible to obtain the filtered data by applying the same filter independently from the grid:

  getFilteredData(): unknown[] {
    return process(this.gridData, { filter: this.filter }).data;
  }Code language: TypeScript (typescript)

process function allows us to access the same filtered results the grid is displaying. Before we can process grid data though, we need to have the current filter used on the grid.

Start by handling the filterChange event of the grid. This event fires when filters change, allowing us to keep a copy of the current filter.

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid
            [kendoGridBinding]="gridData"
            (filterChange)="onFilterChange($event)">
            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>
            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>
            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  gridData: unknown[] = customers;

  filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [],
  };


  onFilterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
  }
}

Code language: HTML, XML (xml)

Next, use the current filter to process the grid data:

import { Component } from '@angular/core';
import { customers } from './customers';
import {
  CompositeFilterDescriptor,
  FilterOperator,
  process,
} from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `
        Filtered data count: {{ getFilteredData().length }}

        <kendo-grid
            [kendoGridBinding]="gridData"
            [pageSize]="10"
            [pageable]="true"
            [sortable]="true"
            [filterable]="true"
            [height]="420"
            (filterChange)="onFilterChange($event)">
            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>
            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>
            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  gridData: unknown[] = customers;

  filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [],
  };

  getFilteredData(): unknown[] {
    return process(this.gridData, { filter: this.filter }).data;
  }

  onFilterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
  }
}

Code language: TypeScript (typescript)

Putting it all together in a live demo: