Grid grouping with remote data binding

[Hugo Aristizabal]

Good morning. How do you get the grouping feature o the grid to work when you use remote binding. Every time you drag a column, the grid shows no data. I was able to reproduce this in the Remote Binding sample provided in Stackblitz here:

https://ej2.syncfusion.com/angular/demos/#/bootstrap4/grid/remote-data 

7r5aey.run

I took the HTML for that sample and added Grouping features, and once you group, the grid always says that it didn't find any data.

Is there something additional that needs to be configured? I checked the network calls that happen when you group, and all I saw was that it makes a call to the same URL, passing the column I grouped in the orderby parameter of the query string.

Code:

<div class="control-section">

    <ejs-grid #grid [dataSource]='data' 

              allowPaging='true' 

              [pageSettings]='pageSettings'

              allowGrouping=true

              [groupSettings]="{ disablePageWiseAggregates: false }">

        <e-columns>

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'>e-column>

            <e-column field='CustomerID' headerText='Customer ID' width='160'>e-column>

            <e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right'>e-column>

            <e-column field='Freight' headerText='Freight' width='150' format="C2" textAlign='Right'>e-column>

            <e-column field='ShipCountry' headerText='Ship Country' width='150' >e-column>

        e-columns>

    ejs-grid>

div>

import { Component, OnInit, ViewChild } from '@angular/core';

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import { GridComponent } from '@syncfusion/ej2-angular-grids';

const SERVICE_URI: string = 'https://ej2services.syncfusion.com/production/web-services/';

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html'

})

export class AppComponent {

    public data: DataManager;

    public pageSettings: Object;

    @ViewChild('grid')

    public grid: GridComponent;

    ngOnInit(): void {

        this.data = new DataManager({ url: SERVICE_URI + 'api/Orders', adaptor: new WebApiAdaptor });

        this.pageSettings = { pageCount: 3 };

    }

}

Thanks for your help.

[Ajith Govarthan]

Hi Hugo, 

Greetings from Syncfusion. 

Based on your code example we found that you have used Syncfusion web service to bind the data. In Syncfusion web service we have not handled the grouping, so when you group a column will always return no data from the service 

In the WebAPI adaptor you will get orderby as query string in the server side, so when you group a column in the grid component you need to handle in server-side using orderby Query and return the data as Items and count to the grid as response to group the columns. 

We have share the code snippet in that we have handled for sorting and grouping which is handled in the same way for grouping also using that you can handle them at our end. 

Code Snippet:  

namespace WebApplication61.Controllers 

{ 

 

    public class OrderController : ApiController 

    { 

        // GET: api/Order 

        public object Get() 

        { 

             

            var queryString = System.Web.HttpContext.Current.Request.QueryString; 

            int skip = Convert.ToInt32(queryString["$skip"]); //paging 

            int take = Convert.ToInt32(queryString["$top"]); 

            string filter = queryString["$filter"]; // filtering  

            string sort = queryString["$orderby"]; // sorting // grouping 

            var data = OrdersDetails.GetAllRecords(); 

            List<OrdersDetails> Datae = new List<OrdersDetails>(); 

            List<OrdersDetails> Datase = new List<OrdersDetails>(); 

            if (sort != null) //Sorting 

            { 

                switch (sort)           // grouping and sorting is handled same here 

                { 

                    case "OrderID": 

                        if (sort.Substring(sort.IndexOf(' ') + 1) != null) 

                            data = data.OrderByDescending(x => x.OrderID).ToList(); 

                        else 

                            data = data.OrderBy(x => x.OrderID).ToList(); 

                        break; 

                    case "CustomerID": 

                        if (sort.Substring(sort.IndexOf(' ') + 1) != null) 

                            data = data.OrderByDescending(x => x.CustomerID).ToList(); 

                        else 

                            data = data.OrderBy(x => x.CustomerID).ToList(); 

                        break; 

                    case "ShipCity": 

                        if (sort.Substring(sort.IndexOf(' ') + 1) != null) 

                            data = data.OrderByDescending(x => x.ShipCity).ToList(); 

                        else 

                            data = data.OrderBy(x => x.ShipCity).ToList(); 

                        break; 

                    case "ShipCountry": 

                        if (sort.Substring(sort.IndexOf(' ') + 1) != null) 

                            data = data.OrderByDescending(x => x.ShipCountry).ToList(); 

                        else 

                            data = data.OrderBy(x => x.ShipCountry).ToList(); 

                        break; 

                } 

            } 

 

            return new 

            { 

                Items = data.Skip(skip).Take(take), 

                Count = data.Count() 

                //  return order; 

            }; 

        } 

    } 

} 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.