Client side sorting on ASP.NET MVC WebGrid - asp.net

Question

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

Answer 1

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);
}

Answer 2

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.