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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How can I client side grouping by async pipe

Thread ID:

Created:

Updated:

Platform:

Replies:

148079 Oct 4,2019 08:37 AM UTC Oct 7,2019 09:56 AM UTC Angular - EJ 2 1
loading
Tags: Grid
kenan dogan
Asked On October 4, 2019 08:37 AM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon