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
close icon

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

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

Thank you.

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 7, 2019 09:56 AM UTC

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, 
 

Regards, 
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon