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

Server side pagination,sorting,grouping

Hi,

As of now in my application I am fetching all the data and binding it to grid and pagination,sorting and grouping is done on client side. I was wondering as the data will grow this will have performance issue like getting 5K records at a time and binding them to grid.  Do you think this will be an issue binding such a huge records to grid?
So I wanted to understand how can I get server side pagination/sorting and grouping implemented.

Here is how I am binding data to grid - 
on init -
GetAll() {
        this._myService.getAll('', this.maxResultCount, this.skipCount).subscribe(result => {
            this.dataList = result.items;
        })
    }
and dataList is used as datasource for the grid.
<ejs-grid #dataGrid [dataSource]='dataList ' [enableHover]='false' [searchSettings]='false' allowPaging='true' allowSorting="true" [toolbar]='false' [allowGrouping]="true" [groupSettings]="groupOptions"  [pageSettings]='pageSettings'>
     <e-column ...></e-column>
</ejs-grid>

If user is sorting on a column which event gets triggered - where I can call my service method and pass the name of column to sort?
If user is navigating between pages - which event is triggered - where I can call my service method and pass the pageindex or count to skip records?
If user is grouping - which event is triggered - and what is the expected data structure and how does it work with pagination? Or can I just sort records based on grouping column and do grouping on client side?

Your help is much appreciated. 

Thanks,
Sunita

14 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 11, 2019 12:23 PM UTC

Hi Sunita, 

Greeting from Syncfusion. 

By default, Grid rendered based on the cell element while using large amount of data then it take considerable time to render the Grid. As per your requirement, we suggest you to bind the actionBegin event to find out grid actions such as paging, sorting, filtering etc., and their arguments (current page ,previous page, sort direction and column name etc). 



We have data manager to access remote(server) data so please check the below documentation for more information about data binding based on your service you may use any of our adaptor. 




Note: By default, Grouping will be done by client side only. 

Please get back to us if you need further assistance.  

Regards, 
Thavasianand S. 



SU Sunita April 13, 2019 04:46 PM UTC




Hello Thavasianand,

As per your suggestion "actionBegin event" helps me to do server side pagination and sorting. Thanks for your help. But I am not sure how to do grouping. If it is done on client side then it will be based on the records as per page size and will not consider all records in db.

Below url talks about server side grouping but I am not sure how can I implement it in our application -

Can you please guide me on how can I achieve server side grouping ? Or is it possible only to return grouped rows first and then on expand load its respective rows (lazy loading) ? I need grouping feature of grid but it has to be server side.

Help appreciated.

Thanks,
Sunita


SU Sunita April 14, 2019 12:55 PM UTC

Hello Thavasianand,

This is again related to server side pagination I am trying to implement using actionBegin() event. But every time I click on any page number it resets to 1. Please find below code - I am not sure what is wrong with my code. actionBegin() for paging is fired twice.

                                  [pageSettings]='pageSettings' (actionBegin)="onActionBegin($event)" (dataBound)="dataBound($event)" (beforeDataBound)="beforeDataBound($event)">
pagesettings:
this.pageSettings = { pageSizes: true, pageSize: this.defaultPageSzie, pageCount: 0, currentPage: 1 };

code- 
Note: on init I am calling GetAll(); (for the first time binding)





Help me to resolve this issue.

Thank,
Sunita


TS Thavasianand Sankaranarayanan Syncfusion Team April 15, 2019 01:25 PM UTC

Hi Sunita, 

Thanks for your update. 

In your application, you are assigning value for currentPage(pageSettings) property dynamically so that it call actionBegin event twice. As per your requirement, we suggest you to use observables that will helps you to bind the custom data and handled Grid actions in server side. Based on the dataStateChange event arguments you can perform grid actions and return result to Grid. 

Please refer the below help docuemantion link for more information.  


If you are not comfortable with async-pipe then we suggest you to refer the below link(Here we have subscribe the observables). 


Regards, 
Thavasianand S. 



SU Sunita April 15, 2019 04:25 PM UTC

Hello Thavasianand,

I will try to implement it is using observables and async pipe. Thanks for your suggestion. Hope it works as per my requirement.

Can you please also help me with grouping - 

 If it is done on client side then it will be based on the records as per page and will not consider all records in db.

Below url talks about server side grouping but I am not sure how can I implement it when using observables and async pipe -

Can you please guide me on how can I achieve server side grouping ? Or is it possible only to return grouped rows first and then on expand load its respective rows (lazy loading) ? I need grouping feature of grid but it has to be server side.


Thanks,
Sunita


TS Thavasianand Sankaranarayanan Syncfusion Team April 17, 2019 03:11 AM UTC

Hi Sunita, 

Thanks for your update. 

As per your suggestion, we have created a sample(Angular with Core) and perform grouping in sever side(like EJ1). In the below sample, we have used urlAdaptor and handle the grid actions in server side. Please refer the below sample and documentation for more information. 

[ClientApp/app/components/fetchdata.component.ts] 
 ngOnInit(): void { 
    this.data = new DataManager({ 
        url: 'Home/UrlDatasource', 
        adaptor: new UrlAdaptor 
    }); 
  } 

[HomeController.cs] 
     public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
 
            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            } 
            IEnumerable GroupDs = new List<object>(); ;