@NgRx example

[Clayton Graf]

Hi there, 

do you haven an example of grid working with @NgRx instead of Observables?

@NgRx Entity or even @NgRx Data would be a plus....

Thank you in advance!

[Balaji Sekar]

Hi Clayton, 

 

Greetings from the Syncfusion support, 

In the below sample, we have used custom data binding for Grid and handle paging action in Grid. For every grid action we have triggered the dataStateChange event with corresponding action details(event arguments) based on that we have performed the actions in server side and the grid expects an object from your service and the emitted value should be an object with properties result and count. Since you need to handle the service with return object in result and count pair using NgRx instead of Observables. 

 

At the initial Grid rendering please call your service within the ngOnInit event of the Angular and please return the result like as “{result: […], count: …}” format to Grid. If you want to perform any Grid actions (like CRUD, sorting, filtering, paging, grouping) then we suggest to use Grid dataStateChange and dataSourceChanged events. For grid actions such as paging, grouping, sorting, etc., the dataStateChange event is invoked. You have to query and resolve data using your service in this event based on this event arguments. 

 

Please refer the below code example and sample for more information. 

 

<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' (dataStateChange)= 'dataStateChange($event)'> 

</ejs-grid> 

 

public dataStateChange(state: DataStateChangeEventArgs): void { 

    // if you want to send additional information then we suggest you to assign the object in state and access it in server 

    state.addparams = JSON.stringify({"pageNumber" : 1,"pageSize" : 10,"fieldNames" : "","sortOrder" : "ASC"})  

    this.service.execute(state); // here you can able to get the corresponding action details 

} 

 

public ngOnInit(): void { 

  this.pageOptions = { pageSize: 10, pageCount: 4 }; 

  let state = { skip: 0, take: 10 };  // initial rendering 

  this.service.execute(state); 

} 

 

public execute(state: any): void { 

  this.getData(state).subscribe(x => super.next(x)); 

} 

 

public getData(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> { 

   

  let pageQuery = ''; 

  const takeQuery = state.take ? `$top=${state.take}` : null; 

  if (skipquery) { 

    pageQuery = `${skipquery}&`; 

  } 

  if (takeQuery) { 

    pageQuery = `${pageQuery}${takeQuery}`; 

  } 

  return this.http 

    .get(`${this.BASE_URL}?${pageQuery}&$count=true`) 

    .pipe(map((response: any) => response.json())) 

    .pipe(map((response: any) => { 

      return state.dataSource === undefined ? (<DataResult>{ 

        // need to send data as result and count  

        result: response['value'],   

        count: parseInt(response['@odata.count'], 10), 

      }) : response['value']; 

    })) 

    .pipe(map((data: any) => data)); 

} 

} 

 

Sample : https://stackblitz.com/edit/angular-ntgj93-j9ubcg?file=package.json 

 

Demo sample : https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe 

 

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/?no-cache=1 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Balaji Sekar.