How can I sever side grouping by async pipe

[Tran Tho Tuong]

I have a grid on the page. And I use the async pipe. I use sever side data filter is done, but I can't use server side with a group.

[Rajapandi Ravi]

Hi Tran, 

Greetings from syncfusion support 

Based on your query we have prepared a sample of grouping with async pipe and achieved your requirement. Please refer the below code example and sample for more information. 

order-service.ts 

import { Ajax } from "@syncfusion/ej2-base"; 

import { 

  DataResult, 

  DataStateChangeEventArgs, 

  Sorts 

} from "@syncfusion/ej2-vue-grids"; 

/** 

* OrderData Service. 

*/ 

export class OrderService { 

  public ajax: Ajax = new Ajax({ 

    type: "GET", 

    mode: true, 

    onFailure: (e: Error) => { 

      return false; 

    } 

  }); 

  private BASE_URL: string = 

    "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders"; 

  public execute(state: DataStateChangeEventArgs): Promise<DataResult> { 

    return this.getData(state); 

  } 

  private getData(state: DataStateChangeEventArgs): Promise<DataResult> { 

    const pageQuery = `$skip=${state.skip}&$top=${state.take}`; 

    let sortQuery: string = ""; 

    if ((state.sorted || []).length) { 

      sortQuery = 

        `&$orderby=` + 

        (<any>state).sorted 

          .map((obj: Sorts) => { 

            return obj.direction === "descending" 

              ? `${obj.name} desc` 

              : obj.name; 

          }) 

          .reverse() 

          .join(","); 

    } 

    this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`; 

    return this.ajax.send().then((response: any) => { 

      let data: any = JSON.parse(response); 

      return <DataResult>{ 

        result: data["d"]["results"], 

        count: parseInt(data["d"]["__count"], 10) 

      }; 

    }); 

  } 

} 

Sample: https://codesandbox.io/s/vue-forked-wy4u4?file=/src/App.vue 

Screenshot: 

 

Regards,
Rajapandi R