How can I do client side grouping by async pipe in Angular Grid

[Unknown]

I have grid in page. And I use async pipe. How do I use  this.grid.groupOptions.columns = ['CompanyText'];

Thank you.

[Seeni Sakthi Kumar Seeni Raj]

Hi Kenan, 

Thanks for contacting Syncfusion support. 

Grouping action is the combination of the grouping the key values followed by sorting the respective column. In this case, handle the grouping of keys values after collecting data from server-end. But, sorting has to be done in the server-end (remote-binding) followed by query preparation in the client-end. Likewise, we have prepared a sorting query for the Grouping action. Refer to the following code example.  

 

Grid code example. 

<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' allowGrouping= 'true' [groupSettings]='groupOptions' [filterSettings]='filterOptions'(dataStateChange)= 'dataStateChange($event)'(actionFailure)="actionFailure($event)"> 

  <e-columns> 

      <e-column field= "OrderID" headerText="Order ID" width="130" ></e-column> 

      <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column> 

      . . . . . 

  </e-columns> 

</ejs-grid> 

Preparing Grid with the initial grouping action  with the Sort. 

  

public groupOptions = {columns: ['CustomerID']} // initial grouping 

 

  constructor(public service: OrdersService) { 

    this.data = service; 

  } 

  public dataStateChange(state: DataStateChangeEventArgs): void { 

      this.service.execute(state); 

    } 

 

  public ngOnInit(): void { 

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

    let state = { skip: 0, take: 10, sorted: [{ 'name': 'CustomerID', direction: 'Ascending' }], group:['CustomerID'] };  // before grouping we need to perform sorting for columns(initial) 

    this.service.execute(state); 

  } 

Query Processing for the Sorting action. getResult method will perform the grouping action in the client-end with the retrieved results. 

 

public execute(state: any): void { 

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

} 

 

public getData( 

  state: DataStateChangeEventArgs 

): Observable<DataStateChangeEventArgs> { 

  this.gridState = state; 

  let sortQuery: String = ""; 

  . . . . . 

  if ((state.sorted || []).length) { // perform sorting  

    sortQuery = 

      `&$orderby=` + 

      state.sorted 

        .map((obj: Sorts) => { 

          return obj.direction === "descending" 

            ? `${obj.name} desc` 

            : obj.name; 

        }) 

        .reverse() 

        .join(","); 

  } 

 

  return this.http 

    .get( 

      `${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true` 

    ) 

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

    .pipe( 

      map((response: any) => { 

        return state.dataSource === undefined 

          ? <DataResult>{ 

              result: this.getResult(response), 

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

            } 

          : response["value"]; 

      }) 

    ) 

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

} 

 

public getResult(response) { 

  //  group the column based on the condition 

  if (this.gridState.group != undefined &&(this.gridState.action == undefined ||this.gridState.action.rows != undefined)) { 

    var json = response["value"]; 

    this.gridState.group.forEach(element => { 

      // 'DataUtil.group' groups the input data based on the field name 

      json = DataUtil.group(json, element); // intila grouping 

    }); 

    return json; 

  } else { 

    return response["value"]; 

  } 

} 

Refer to the following sample demo, 

 

Sample : https://stackblitz.com/edit/angular-ntgj93-qzyqye?file=async-pipe.html 

Regards, 

Seeni Sakthi Kumar S