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

How to do Sorting at Server side.


I am trying to achieve sorting at server side with the ej2-grid. I have gone through all the documents and got confused. Some says foreignKeyValue should be given. But on other examples it is not there. 

Please create a stackblitz example for me. because I am clearly unbale to find difference in client and server side sorting through your examples. 

Shweta Gupta 

4 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team November 12, 2019 05:48 AM UTC

Hi Shweta, 

Greetings from Syncfusion support. 

We can achieve your requirement by using the below code example. In this we have handle the sorting in server end 


var dataManager = new ej.data.DataManager({ 
        url: "/Home/UrlDatasource", 
        updateUrl: "/Home/Update", 
        insertUrl: "/Home/Insert", 
        removeUrl: "/Home/Delete", 
        adaptor: new ej.data.UrlAdaptor() 
    var grid = new ej.grids.Grid({ 
        dataSource: dataManager, 
        allowPaging: true, 
        allowSorting: true, 
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true, validationRules: { required: true } }, 
            { field: 'CustomerID', headerText: 'Customer ID', width: 120, validationRules: { required: true, minLength: 3 }, defaultValue: 'HANAR' }, 
            { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' }, 
            { field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 } 

public ActionResult UrlDatasource(DataManagerRequest dm) 
            IEnumerable DataSource = orddata; 
            DataOperations operation = new DataOperations(); 
            if (dm.Search != null && dm.Search.Count > 0) 
                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 
            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); 
            int count = DataSource.Cast<OrdersDetails>().Count(); 
            if (dm.Skip != 0) 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            if (dm.Take != 0) 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 

Refer the below screen shot. 


We have prepared a sample and it can be downloadable from the below location. 

Thavasianand S. 

SH shweta November 12, 2019 06:50 AM UTC


thanks for your reply. But I am using JavaScript and not with C#(.Net MVC). Can you please help me with javascript. Like Let me know what all I have to do at client side(javascript side) to achieve server side sorting. There must be some sort of way of sending the request to the server each time sort icon is clicked (to Acheive Server side sorting)? 

Let me know if you did not get me. 

SH shweta November 12, 2019 11:22 AM UTC


 In continuity with previous mail I am referring this link for server side sorting with JavaScript: - 


 Here I am referring 

Sort foreign key column based on Text section

Let me know if this is the correct approach for server-side sorting in JavaScript grid.

Please crate an example of server-side sorting with fake backend and post here. So that I can use that in our demo since we don’t have the real backend ready yet.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 15, 2019 10:45 AM UTC

Hi Shweta, 

Thanks for your update. 

In the below sample, we have used custom data binding for Grid and handle paging and sorting actions in Grid. For every grid action we have triggered the dataStateChange event with corresponding action details(event arguments) based on that we have performed the actions in server side and bind result and count pair object to dataSource property as follows. Please refer the below sample and code example for more information. 

var grid = new ej.grids.Grid({ 
    dataSource: [], 
    created: created, 
    allowSorting: true, 
    dataStateChange: dataStateChange, 
    pageSettings: {pageSize: 10}, 
    allowPaging: true, 
    columns: [ 
      { field: "CustomerID", headerText: "Customer Name", width: 150 }, 
      . . . . . 
  function getData(gridquery) { 
    var state = gridquery; 
    var sortQuery = ""; 
    const skipquery = state.skip ? `$skip=${state.skip}` : null; 
    var pageQuery = ""; 
    const takeQuery = state.take ? `$top=${state.take}` : null; 
    if (skipquery) { 
      pageQuery = `${skipquery}&`; 
    if (takeQuery) { 
      pageQuery = `${pageQuery}${takeQuery}`; 
    var filterQuery = ""; 
    if ((state.sorted || []).length) { 
      sortQuery = 
        `&$orderby=` + 
          .map(obj => { 
            return obj.direction === "descending" ? `${obj.name} desc` : obj.name; 
    // based on the grid query we have form the url and get the result you can generate query based on your service 
    var ajax = new Ajax( 
    ajax.onSuccess = data => { 
      if (grid.element !== undefined) { 
        var final = JSON.parse(data); 
        // finally return the value as result(JSON Object) and count(total count) pair  
        grid.dataSource = { result: final.value, count: final["@odata.count"] }; 
  function dataStateChange(state) { 
    // get grid queries from the Grid action 
    getData(state);  // trigger for every grid action (page, sort, ect.,) 
  function created() { 
      var state = { skip: 0, take: 10 }; 
      getData(state);  // for initial grid settings  


Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon