The Kendo UI Angular Grid: Filtering Without the Fuss

Kendo UI is known for its massive component library—over 100 ready-to-use pieces across React, Angular, and Vue. But what really sets it apart isn't just the breadth of components; it's how much functionality comes baked in. Data binding, for instance, is handled so cleanly that you spend your time on presentation, not plumbing.

A good demonstration is the Angular Data Grid. It's built natively for Angular, not ported from another framework. Out of the box, it handles a lot of the heavy lifting you'd otherwise have to code yourself: exporting to Excel or PDF, sorting, grouping, pagination, and virtualization.

Filtering is where the grid really shines. With large datasets—say, thousands of employee records—users need quick ways to narrow things down. The grid supports two filtering modes: a dedicated filter row and a filter menu triggered from each column header. Both give users fine-grained control over what they see.

One way to filter the data is to click on a column header, select the Filter option, and set the criteria.

Setting It Up: Four Simple Steps

The path from an empty Angular project to a fully functional, filterable grid is short. The official documentation makes it straightforward, and the setup breaks down into just a few clear stages.

1. Import the Component

Nothing unusual here—you bring the grid into your module like any other Angular component. The import also pulls in the employee data model we'll use for binding.

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';
import { employees } from './employees';
import { images } from './images';

2. Drop the Component Into Your Template

The markup for the grid is minimal. You declare the component and then move on to configuration.

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid>
      // ...
    </kendo-grid>
  `
})

3. Configure Features and Columns

The grid accepts a wide range of feature flags. Filtering, for instance, requires just a single line to wire up to the column headers. Alongside filtering, you can enable sorting, grouping, and pagination in the same declarative manner—no custom logic needed.

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid
      [kendoGridBinding]="gridView"
      kendoGridSelectBy="id"
      [selectedKeys]="mySelection"
      [pageSize]="20"
      [pageable]="true"
      [sortable]="true"
      [groupable]="true"
      [reorderable]="true"
      [resizable]="true"
      [height]="500"
      [columnMenu]="{ filter: true }"
    >
      // etc.
    </kendo-grid>
  `
})

Column definitions are handled in the markup too. For a clean look, you can apply styling via a styles parameter directly on the component. The grid looks polished even before any data is bound.

4. Bind the Data

This is where Kendo UI does the hard work for you. Binding the previously imported employee data to the grid takes only a few lines. The API manages the rest—filtering, sorting, and rendering all happen as expected.

// Active the component on init
export class AppComponent implements OnInit {
  // Bind the employee data to the component
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
  // Set the grid's data source to the employee data file
  public gridData: any[] = employees;
  // Apply the data source to the Grid component view
  public gridView: any[];

  public mySelection: string[] = [];

  public ngOnInit(): void {
    this.gridView = this.gridData;
  }
  // Start processing the data
  public onFilter(inputValue: string): void {
    this.gridView = process(this.gridData, {
      filter: {
        // Set the type of logic (and/or)
        logic: "or",
        // Defining filters and their operators
        filters: [
          {
            field: 'full_name',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'job_title',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'budget',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'phone',
            operator: 'contains',
            value: inputValue
          },
          {
            field: 'address',
            operator: 'contains',
            value: inputValue
          }
        ],
      }
    }).data;

    this.dataBinding.skip = 0;
  }

  // ...
}

Accessibility Is Covered Too

The grid doesn't stop at feature parity. It also ships with significant accessibility work already done. That means keyboard-navigable UI compliant with WCAG 2.0, Section 508, and WAI-ARIA standards—concerns you don't have to engineer from scratch.

The Kendo UI Angular Grid demonstrates how much functionality can be delivered with minimal effort. From filtering to accessibility, the heavy lifting is handled, leaving you to focus on the user experience and design.