On-the-fly add client-side filtering and sorting to GridView

ASP.Net GridView is a powerful UI-control to visualize an overview of (business) data entities. Also standard / COTS products (e.g. for SharePoint) make heavily usage of the GridView control and it's capabilities.

In case of using a COTS product, it can be challenging to address requests from endusers wrt the grid behavior. You do not have the option to change the server-side behaviour yourself, but are dependent on the supplier. Ok, so server-side falls off; but in these days we prefer client-side anyhow. As it gives a faster interactive ui-responsiveness and thus a better user-experience.

In our scenario, the customer requested to add filtering and sorting ui-behaviour to an overview grid. As the output of GridView in the browser is simple an HTML Table element, I searched on the internet for any javascript library to sort and filter on tables. There are several of these available. I picked the combination of List.js and jQuery.TableSorter.js.

Next step is to activate their clientside behaviour in the rendered GridView output. This requires some straightforward jQuery-coding: select the Table element, enrich it which new child elements that are needed by the sorting and filtering libraries, runtime import the javascript libraries, and activate the sorting respectively filtering clientside behaviour.

/* Add client-side filtering and sorting to the requests overview. */
$.getScript( "/.../scripts/list.js", function( data, textStatus, jqxhr ) {
   $("#RequestsOverview tbody").addClass("list");
   var filters = '<tr > \
       <td><div id="filterPH1"> </div></td> \
       <td><div id="filterPH2"> </div></td> \
       <td><input type="text" id="date" class="search" placeholder="Filter"</td> \
       <td><input type="text" id="description" class="search" placeholder="Filter"</td> \
       <td><input type="text" id="state" class="search" placeholder="Filter"</td> \
       </tr>';
   $("#RequestsOverview thead tr").after(filters);
   
   $("#RequestsOverview").parent().attr('id', 'RequestsOverviewDiv');   
   $("#RequestsOverview .wf-id-event").each(function(i) {
 $(this).parent().children().each(function(i) {
    switch(i)
    {
  case 2: $(this).addClass("date"); break;
  case 3: $(this).addClass("description"); break;
  case 4: $(this).addClass("state"); break;
    }
 });
   });  
   
   var userList = new (List)('RequestsOverviewDiv', 
                             { valueNames: ['date', 'description', 'state'] } );
});
   
$.getScript( "/.../scripts/jquery.tablesorter.js", function( data, textStatus, jqxhr ) {
   $("#RequestsOverview").tablesorter( {
      cssHeader: "headerSort", 
      headers: { 0: { sorter: false}, 1: {sorter: false} }, 
      dateFormat: 'pt' 
   }); 
}); 

Result:

Without clientside plug-in of sorting and filtering:

Grid ui-behaviour enriched with sorting and filtering:

Limitation:

As the plugged-in sorting and filtering works on the client-side available data, it cannot be used in case of server-side GridView paging. For that it is required to also sort and filter server-side, or replace the server-side paging by a clientside approach. The latter is typically not desirable, as this requires that all the data is immediately send to the client; while the user may be interested in only the first page.