How to do Sorting at Server side.

[shweta]

Hi, 

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. 

Thanks,

Shweta Gupta 

[Thavasianand Sankaranarayanan]

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 

[Index.cshtml] 

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 } 

        ] 

    }); 

    grid.appendTo('#Grid'); 

---------------------------------------------------------------------------------------------------------------- 

[HomeController.cs] 

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. 

 

Link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/?no-cache=1#handling-on-demand-grid-actions 

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

Sample: https://www.syncfusion.com/downloads/support/forum/148995/ze/URLAdaptor-CRUD-remoteSave-324920608.zip 

Regards, 

Thavasianand S. 

[shweta]

Hi,

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. 

[shweta]

Hi,

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

 https://ej2.syncfusion.com/documentation/grid/sorting/

 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.

[Seeni Sakthi Kumar Seeni Raj]

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 }, 

      . . . . . 

    ] 

  }); 

  grid.appendTo("#Grid"); 

   

   

  function getData(gridquery) { 

    var state = gridquery; 

    var BASE_URL = "https://services.odata.org/V4/Northwind/Northwind.svc/Orders"; 

    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=` + 

        state.sorted 

          .map(obj => { 

            return obj.direction === "descending" ? `${obj.name} desc` : obj.name; 

          }) 

          .reverse() 

          .join(","); 

    } 

    // 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( 

      `${BASE_URL}?${pageQuery}${sortQuery}&$count=true` 

    ); 

    ajax.send(); 

    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  

  } 

 

Sample: https://stackblitz.com/edit/custom-bind-sorting-js-l7eovm?file=index.js 

Regards, 

Seeni Sakthi Kumar S