We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to apply initial filter on custom binding in Angular Grid

I have a grid with Observable (async) as a datasource. To populate the grid for the first time in the onInit I have to call the my api with an initial state.  I set this predefined settings with the filterSettings property of the grid. The values are correctly displayed in the filtebar. 

When the filter is changed the dataStateChanged event is fired, and the API can do the call. 

The problem is that there are predefined filtersettings and ordersettings which have to be part of my API call, but the dataStateChanged is not fired when these settings are set with the properties. Is there a way in the onCreate event to force the grid to fire the dataStateChanged event. 

1 Reply

RR Rajapandi Ravi Syncfusion Team March 5, 2020 06:13 AM

Hi Arnaud, 

Greetings from syncfusion support 

Query#: Is there a way in the onCreate event to force the grid to fire the dataStateChanged event. 

The dataStateChanged event does not triggered the initial rendering of the Grid. We have called the dataStateChange event in ngOnInit method() by passing state arguments such as skip and take query. If you want to perform initial filtering you have to pass the filter query in the state argument and then it will triggered the dataStateChange event. Please refer the below code example and screenshot for more information. 


import { Component, OnInit, Inject, ViewChild } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { OrdersService } from './order.service'; 
import { DataStateChangeEventArgs, GroupSettingsModel, FilterSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids'; 
import { Predicate, Query, DataUtil } from '@syncfusion/ej2-data'; 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [OrdersService] 
export class AppComponent { 
    public data: Observable<DataStateChangeEventArgs>; 
    public pageOptions: Object; 
    public state: DataStateChangeEventArgs; 
    public filterOptions: FilterSettingsModel; 
    public predicate: any = []; 
    public grid: GridComponent; 
    constructor( private service: OrdersService) { 
        this.data = service; 
    public dataStateChange(state: DataStateChangeEventArgs): void { 
    public ngOnInit(): void { 
        this.pageOptions = { pageSize: 10, pageCount: 4 }; 
        this.filterOptions = { 
            columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }] 
        for (var i =0; i< this.filterOptions.columns.length; i++) {              //push the filter query to the predicates 
          this.predicate.push(new Predicate(this.filterOptions.columns[i].field, this.filterOptions.columns[i].operator, this.filterOptions.columns[i].value, true, false )) 
        let where = new Query().where(Predicate.and(this.predicate)) 
        let state = { skip: 0, take: 10, where: where.queries[0] }; 
        this.service.execute(state);                            //it will helps to pass the filter query to datastatechange event 



Rajapandi R 

Live Chat Icon For mobile
Up arrow icon