Home Client side sorting on ASP.NET MVC WebGrid
Reply: 2

Client side sorting on ASP.NET MVC WebGrid

Srijit
1#
Srijit Published in 2013-01-31 03:11:38Z

I have a partial view which contain an MVC WebGrid as below

 <div id="grid">
            @{
                var grid = new WebGrid(source: Model.Items,
                                       defaultSort: "Name", 
                                       rowsPerPage: 100);


            }
            @grid.GetHtml(columns: grid.Columns(
                        grid.Column(columnName: "Name", header: "Name", canSort:true),
                        grid.Column(columnName: "Code", header: "Code")
                    ))
            </div>

This partial view is loaded using Jquery ajax call and result is inserted into a DIV in the main page.

The table render fine but my problem is that the sorting always generates a callback to the server. I want the sorting to happen at the client side only. Is it possible using WebGrid without using external datatables like jQuery datatable?

Thanks in advance

Mortalus
2#
Mortalus Reply to 2013-01-31 04:02:54Z

You should probably implement Cline-Side Sorting by yourself according to the loaded table take a look here...

NOTE!: you could always make it more generic by using html attributes to tag your WebGrid. Tag the table with 'data-clineSideSort=true' then add a jquery event that will attach the JS functionality to all such tables holding this property...

 function SortTable(sortOn)
 {
     var table = document.getElementById('results');
     var tbody = table.getElementsByTagName('tbody')[0];
     var rows = tbody.getElementsByTagName('tr');

     var rowArray = new Array();
     for (var i = 0, length = rows.length; i < length; i++)
     {
         rowArray[i] = new Object;
         rowArray[i].oldIndex = i;
         rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
     }

     if (sortOn == sortedOn)         {
         rowArray.reverse();
     }
     else         {
         sortedOn = sortOn;
         /*
    Decide which function to use from the three:RowCompareNumbers,
    RowCompareDollars or RowCompare (default).
    For first column, I needed numeric comparison.
    */
         if (sortedOn == 0)             {
             rowArray.sort(RowCompareNumbers);
         }
         else             {
             rowArray.sort(RowCompare);
         }
     }

     var newTbody = document.createElement('tbody');
     for (var i = 0, length = rowArray.length; i < length; i++)
     {
         newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
     }

     table.replaceChild(newTbody, tbody);
 }

 function RowCompare(a, b)
 {
     var aVal = a.value;
     var bVal = b.value;
     return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
 }

 // Compare number
 function RowCompareNumbers(a, b)
 {
     var aVal = parseInt(a.value);
     var bVal = parseInt(b.value);
     return (aVal - bVal);
 }

 // compare currency
 function RowCompareDollars(a, b)
 {
     var aVal = parseFloat(a.value.substr(1));
     var bVal = parseFloat(b.value.substr(1));
     return (aVal - bVal);
 }
Jon P
3#
Jon P Reply to 2013-01-31 05:04:49Z

Have a look at jQuery Tablesorter. It can be applied to any well formed table (ie, has thead and tbodyelements. The only gotcha I can think of here is to make sure you bind table sorter once the data has been loaded in your ajax call.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.300088 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO