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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to do Sorting at Server side.

Thread ID:

Created:

Updated:

Platform:

Replies:

148995 Nov 11,2019 01:14 PM UTC Nov 15,2019 10:45 AM UTC JavaScript - EJ 2 4
loading
Tags: Grid
shweta
Asked On November 11, 2019 01:14 PM UTC

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 [Syncfusion]
Replied On 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 

[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. 

 


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


Regards, 
Thavasianand S. 


shweta
Replied On November 12, 2019 06:50 AM UTC

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
Replied On November 12, 2019 11:22 AM UTC

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 [Syncfusion]
Replied On 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 }, 
      . . . . . 
    ] 
  }); 
  grid.appendTo("#Grid"); 
   
   
  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=` + 
        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  
  } 

 



Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon