Telerik RadGrid Sorting Client Side JavaScript jQuery

Question

I need a way to sort a rad grid using javascript of jQuery I want to avoid using a web service because no where else in the project makes use of a web service.

I bind to the grid using JavaScript and don't require a OnNeedDataSource event.

<ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" OnCommand="RadGridCommand"/>

On the client RadGridCommand event I cancel default command to prevent postback/ajax request and check if the command is a sort event at this point i would like to provide a way to sort my grid.

      //RadGrid Command function 
      function RadGridCommand(sender, args) {

          args.set_cancel(true); //cancel the default command to prevent postback/ajax request

          if (args.get_commandName() == "Sort") {
             var sortExpressions = sender.get_masterTableView().get_sortExpressions();

Any suggestions would be much appreciated

Ryan Gavin Ryan Gavin · Accepted Answer · 2016-05-05T10:44:40

I got it working using a JavaScript sort function

 LotResults.sort(function (a, b) {
    return b.LotResult - a.LotResult    //Sort DESC order
 })

I use the command name to check if the sort command is called and cancel the default command to prevent a postback.

I then grab the sortExpressions to get the sort order to decide if the order is to be ascending or descending order. And finally bind my object to the grid to update the view.

Below is how I did it needs a bit more work from my side to get it to the way I need it to be, but it does work and is sorting my grid :)

//RadGrid Command function 
function RadGridCommand(sender, args) {

 args.set_cancel(true); //cancel the default command to prevent postback/ajax request

 if (args.get_commandName() == "Sort") {
    var sortExpressions = sender.get_masterTableView().get_sortExpressions();
    var sortVal = sortExpressions.toString();

    if (sortVal != "") {

       var fieldName = sortExpressions.getItem(0).get_fieldName();
       var sortOrder = sortExpressions.getItem(0).get_sortOrder();

       if (sortOrder == 1) {
          LotResults.sort(function (a, b) {
                   return b.LotResult - a.LotResult  
          })
        }
        else if (sortOrder == 2) {                    
                LotResults.sort(function (a, b) {
                          return a.LotResult - b.LotResult
                })
        }
   }

   var masterTable = $find("<%= DeactivationLotResultsRadGrid.ClientID %>").get_masterTableView(); 
   masterTable.set_virtualItemCount(LotResults.length);
   masterTable.set_dataSource(LotResults);
   masterTable.dataBind();
   }}

Telerik RadGrid Sorting Client Side JavaScript jQuery

1 Answers