How to apply initial filter on custom binding in Angular Grid

[Unknown]

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. 

[Rajapandi Ravi]

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. 

App.component.ts 

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'; 

 

@Component({ 

    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 = []; 

 

    @ViewChild('grid') 

    public grid: GridComponent; 

 

    constructor( private service: OrdersService) { 

         

        this.data = service; 

    } 

 

    public dataStateChange(state: DataStateChangeEventArgs): void { 

        this.service.execute(state); 

    } 

 

    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 

    } 

} 

 

Screenshot: 

 

API: https://ej2.syncfusion.com/documentation/api/grid/#datastatechange 

Regards, 

Rajapandi R 

[Aparna Cilusani]

Hi,

Can we use excel like filter with infinite scrolling ?

[Rajapandi Ravi]

Hi Aparna,

Greetings from Syncfusion support

After reviewing your shared information, we could see that you are facing the problem with filter popup. We have already discussed about your requirement in our public forum threads. Please refer the below public forum thread for more information.

Forum: https://www.syncfusion.com/forums/175514/sorting-filtering-not-working-with-server-side-pagination-enabled-grid

              https://www.syncfusion.com/forums/156622/how-to-fetch-the-data-when-the-scrollbar-reaches-the-end-of-the-scroller-in-angular-grid

Regards,

Rajapandi R