Server Side Sorting in Infinite Row Model in ag-Grid.

Hello folks, Today we will learn, How we can do Sorting in Infinite Scroll Model.

Sorting is not quite simple in this as like in Client-side row model because we do not have all the data, that's why we will use server side sorting in this model. We will again hit the WEB API to get the sorted data.

this is the Part-2 of 'Infinite Row Model' tutorial. If you haven't check part-1 then Click Here

so let's continue our article on Infinite Scroll Model to achieve sorting. 

Step 1: To enable sorting, firstly set sortable property true in colmnDefs.

Here i am setting in all three column.

Step 2: Now, in the getRows function of a dataSource in OnGridReady function, add below code. 

   let sortParams = '';

        rowParams.sortModel.forEach(model => {

          switch (model.colId) {

            case 'Name':

              if (sortParams) {

                sortParams += `, Name ${model.sort}`;

              } else {

                sortParams += `$orderby=Name ${model.sort}`;

              }

              break;

            case 'Code':

              if (sortParams) {

                sortParams += `, Code ${model.sort}`;

              } else {

                sortParams += `$orderby=Code ${model.sort}`;

              }

              break;

            case 'ExchangeRate':

              if (sortParams) {

                sortParams += `, ExchangeRate ${model.sort}`;

              } else {

                sortParams += `$orderby=ExchangeRate ${model.sort}`;

              }

              break;

            default:

              sortParams = '';

          }

        });

        const queryString = `${pagingParams}&${countParam}&${sortParams}`;

rowParams.sortModel is an array of sotModel which contain the information of sorting like on which field, we are doing sorting. 

when we click on column header for sorting, it will again hit the web API, that's why, we are re-creating an oData web API which will fetch the sorted data.

Note: you can also do multiple sorting on column. Press Shift key and then click on sorting column.

Note: Filtering is also not an easy task in Infinite row model. It is very time consuming process to build Server Side Filtering. Please look the below URL and build your own server side filtering as per your requirement. 

https://www.ag-grid.com/javascript-grid-filtering-overview/

Hope, It will helps you to build Server Side Sorting in ag-Grid.

Keep learning , Keep Growing, Keep sharing !!!