Advanced Filtering in Angular Data Grid

The Syncfusion® Grid component provides advanced filtering functionality through the Query Builder interface, which enables the creation of complex filtering conditions with multiple criteria and logical operators.

Enable advanced filtering

Advanced filtering is enabled by setting the allowAdvancedFiltering property to true. This adds an Filter button to the toolbar, which opens the Query Builder dialog for creating advanced filter conditions.

To use advanced filtering, inject the AdvancedFilter module into the Grid along with the other required modules.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  AdvancedFilterService,
  GridComponent,
  GridModule,
  SortService,
  ToolbarService,
  VirtualScrollService,
  LoadEventArgs,
} from '@syncfusion/ej2-angular-grids';
import { ticketdata } from './datasource';

@Component({
  selector: 'app-root',
  template: `<div class="control-section">
    <div>
      <ejs-grid #grid id='AdvancedFilter' [dataSource]='data' [allowAdvancedFiltering]='true' [allowSorting]='true'
        [enableVirtualization]='true' [pageSettings]='pageSettings' [advancedFilterSettings]='advancedFilterSettings'
        height='400' rowHeight='45' [toolbar]='toolbar' (load)='onLoad($event)'>
        <e-columns>
          <e-column field='TicketID' headerText='Ticket ID' textAlign='Right' width='120' isPrimaryKey='true'></e-column>
          <e-column field='Title' headerText='Title' width='260'></e-column>
          <e-column field='TypeofRequest' headerText='Type' width='150'></e-column>
          <e-column field='Assignee' headerText='Assignee' width='150'></e-column>
          <e-column field='Priority' headerText='Priority' width='130'></e-column>
          <e-column field='Status' headerText='Status' width='130'></e-column>
          <e-column field='CreatedDate' headerText='Created Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
          <e-column field='DueDate' headerText='Due Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>`,
  providers: [ToolbarService, AdvancedFilterService, SortService, VirtualScrollService],
  standalone: true,
  imports: [GridModule],
})
export class AppComponent implements OnInit {
  public data: Object[];
  public toolbar: string[];
  public pageSettings: Object;
  public advancedFilterSettings: Object;

  @ViewChild('grid') public grid?: GridComponent;

  public ngOnInit(): void {
    this.data = ticketdata;
    this.pageSettings = { pageSize: 50 };
    this.toolbar = ['AdvancedFilter'];
    this.advancedFilterSettings = {};
  }

  public onLoad(args: LoadEventArgs): void {
    if (args) {
      args.enableSeamlessScrolling = true;
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Initial filter

Initial filter conditions can be set and applied automatically when the Grid loads. The advancedFilterSettings property with queryBuilderSettings is used to define the initial rule.

The following example demonstrates displaying only tickets with a priority of High and a status other than Done.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  AdvancedFilterService,
  GridComponent,
  GridModule,
  SortService,
  ToolbarService,
  VirtualScrollService,
  LoadEventArgs,
} from '@syncfusion/ej2-angular-grids';
import { ticketdata } from './datasource';
 
@Component({
  selector: 'app-root',
  template: `<div class="control-section">
    <div>
      <ejs-grid #grid id='AdvancedFilter' [dataSource]='data' [allowAdvancedFiltering]='true' [allowSorting]='true'
        [enableVirtualization]='true' [pageSettings]='pageSettings' [advancedFilterSettings]='advancedFilterSettings'
        height='400' rowHeight='45' [toolbar]='toolbar' (load)='onLoad($event)'>
        <e-columns>
          <e-column field='TicketID' headerText='Ticket ID' textAlign='Right' width='120' isPrimaryKey='true'></e-column>
          <e-column field='Title' headerText='Title' width='260'></e-column>
          <e-column field='TypeofRequest' headerText='Type' width='150'></e-column>
          <e-column field='Assignee' headerText='Assignee' width='150'></e-column>
          <e-column field='Priority' headerText='Priority' width='130'></e-column>
          <e-column field='Status' headerText='Status' width='130'></e-column>
          <e-column field='CreatedDate' headerText='Created Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
          <e-column field='DueDate' headerText='Due Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>`,
  providers: [ToolbarService, AdvancedFilterService, SortService, VirtualScrollService],
  standalone: true,
  imports: [GridModule],
})
export class AppComponent implements OnInit {
  public data: Object[];
  public toolbar: string[];
  public pageSettings: Object;
  public advancedFilterSettings: Object;
  public initialAdvancedFilterRule: Object;
 
  @ViewChild('grid') public grid?: GridComponent;
 
  public ngOnInit(): void {
    this.data = ticketdata;
    this.pageSettings = { pageSize: 50 };
    this.toolbar = ['AdvancedFilter'];
    this.initialAdvancedFilterRule = {
      condition: 'and',
      rules: [
        {
          field: 'Status',
          label: 'Status',
          type: 'string',
          operator: 'notequal',
          value: 'Done',
        },
        {
          field: 'Priority',
          label: 'Priority',
          type: 'string',
          operator: 'equal',
          value: 'High',
        },
      ],
    };
    this.advancedFilterSettings = {
      queryBuilderSettings: {
        rule: this.initialAdvancedFilterRule,
      },
    };
  }
 
  public onLoad(args: LoadEventArgs): void {
    if (args) {
      args.enableSeamlessScrolling = true;
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, hidden columns are not included in the advanced filter builder. Setting advancedFilterSettings.includeHiddenColumns to true displays hidden columns in the Query Builder, enabling filter conditions to be created using their values.

Advanced filtering events

The Advanced Filter feature provides the following events for customizing the dialog and filter operations.

  1. The advancedFilterOpen event is triggered when the Advanced Filter dialog opens. The event arguments provide access to the dialog and Query Builder instances.
  2. The advancedFilterClose event is triggered when the Advanced Filter dialog closes. Set the cancel property to true to prevent the dialog from closing.
  3. The advancedFilterActionBegin event is triggered before a filter is applied or cleared. Set the cancel property to true to prevent the operation. The event arguments include the filter rule, dialog instance, and Query Builder instance.
  4. The advancedFilterActionComplete event is triggered after a filter is applied or cleared. Set the cancel property to true to keep the Advanced Filter dialog open after the operation.

Methods

The Advanced Filter feature provides the following methods for controlling the dialog and managing filter rules programmatically:

  1. The openAdvancedFilterDialog method opens the Advanced Filter dialog.
  2. The closeAdvancedFilterDialog method closes the Advanced Filter dialog.
  3. The applyAdvancedFilter method applies the specified filter rule to the Grid.
  4. The clearAdvancedFilter method clears the applied Advanced Filter and restores the original data view.
  5. The getAdvancedFilter method retrieves the currently configured filter rule.
  6. The setAdvancedFilter method sets the specified rule as the current rule configuration in the Advanced Filter Query Builder.
import { Component, OnInit, ViewChild } from '@angular/core';
import {
  AdvancedFilterService,
  GridComponent,
  GridModule,
  SortService,
  ToolbarService,
  VirtualScrollService,
  LoadEventArgs,
} from '@syncfusion/ej2-angular-grids';
import { ticketdata } from './datasource';

@Component({
  selector: 'app-root',
  template: `<div class="control-section">
    <div>
      <button (click)="openAdvancedFilter()">Open dialog</button>
      <button (click)="applyAdvancedFilter()">Apply rule</button>
      <button (click)="setAdvancedFilter()">Set rule</button>
      <button (click)="getAdvancedFilter()">Get rule</button>
      <button (click)="clearAdvancedFilter()">Clear filter</button>
    </div>
    <div>
      <ejs-grid #grid id='AdvancedFilter' [dataSource]='data' [allowAdvancedFiltering]='true' [allowSorting]='true'
        [enableVirtualization]='true' [pageSettings]='pageSettings' [advancedFilterSettings]='advancedFilterSettings'
        height='400' rowHeight='45' [toolbar]='toolbar' (load)='onLoad($event)'>
        <e-columns>
          <e-column field='TicketID' headerText='Ticket ID' textAlign='Right' width='120' isPrimaryKey='true'></e-column>
          <e-column field='Title' headerText='Title' width='260'></e-column>
          <e-column field='TypeofRequest' headerText='Type' width='150'></e-column>
          <e-column field='Assignee' headerText='Assignee' width='150'></e-column>
          <e-column field='Priority' headerText='Priority' width='130'></e-column>
          <e-column field='Status' headerText='Status' width='130'></e-column>
          <e-column field='CreatedDate' headerText='Created Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
          <e-column field='DueDate' headerText='Due Date' width='140' textAlign='Right' type='date' format='yMd'></e-column>
        </e-columns>
      </ejs-grid>
    </div>
  </div>`,
  providers: [ToolbarService, AdvancedFilterService, SortService, VirtualScrollService],
  standalone: true,
  imports: [GridModule],
})
export class AppComponent implements OnInit {
  public data: Object[];
  public toolbar: string[];
  public pageSettings: Object;
  public advancedFilterSettings: Object;
  public initialAdvancedFilterRule: Object;

  @ViewChild('grid') public grid?: GridComponent;

  public ngOnInit(): void {
    this.data = ticketdata;
    this.pageSettings = { pageSize: 50 };
    this.toolbar = ['AdvancedFilter'];
    this.initialAdvancedFilterRule = {
      condition: 'and',
      rules: [
        {
          field: 'Status',
          label: 'Status',
          type: 'string',
          operator: 'notequal',
          value: 'Done',
        },
        {
          field: 'Priority',
          label: 'Priority',
          type: 'string',
          operator: 'equal',
          value: 'High',
        },
      ],
    };
    this.advancedFilterSettings = {
      queryBuilderSettings: {
        rule: this.initialAdvancedFilterRule,
      },
    };
  }

  public onLoad(args: LoadEventArgs): void {
    if (args) {
      args.enableSeamlessScrolling = true;
    }
  }

  public openAdvancedFilter(): void {
    this.grid?.openAdvancedFilterDialog();
  }

  public applyAdvancedFilter(): void {
    this.grid?.applyAdvancedFilter(this.initialAdvancedFilterRule);
  }

  public setAdvancedFilter(): void {
    this.grid?.setAdvancedFilter(this.initialAdvancedFilterRule);
  }

  public getAdvancedFilter(): void {
    console.log(this.grid?.getAdvancedFilter());
  }

  public clearAdvancedFilter(): void {
    this.grid?.clearAdvancedFilter();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));