GridviewFix jQuery plugin

Introduction

In this article, I have discussed the problem that the developer faces while using dataTable plugin with ASP.NET Gridview control and suggested the solution for the same problem. This article is for you, if you are using the very famous dataTable jquery plugin with ASP.NET data-bound server controls.

Background

jQuery plugin dataTable is vastly used in web applications. It can be easily integrated with repeater and table. DataTable plugin is used to make a normal Gridview/table/repeater to a powerful table having functionalities such as:

1. Dynamically add a new row
2. Individual column filtering
3. Highlight rows and columns
4. Show and hide details about a particular record
5. User selectable rows (multiple rows)
6. User selectable rows (single row) and delete rows
7. Editable rows (with jEditable)
8. Submit form with elements in table
9. Index column (static number column)
10. Show and hide columns dynamically
11. Regular expression filtering

Apart from the above listed APIs, DataTable plugin gives many more functionalities. We can convert any table into a jquery datatable by writing below one line query.

//Applying dataTable on table element.
    $("#table-id").dataTable();

There is a prerequisite for dataTable plugin to function properly. Which says that the target table must be in a well formed manner by having the 'thead' and 'tbody' sections. Here 'tfoot' section is optional. Below is the example of the an ideal target table:

//Ideal Table structure for applying dataTable plugin.
<table id="table_id">
<thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>etc</th>
</tr>
</thead>

<tbody>
<tr>
  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>
 <td>etc</td>
</tr>

<tr>
  <td>Row 2 Data 1</td>
  <td>Row 2 Data 2</td>
  <td>etc</td>
</tr>
//rest rows...

</tbody>
</table>

In the above table, I have not used tfoot section because it is optional. One can also include the 'tfoot' section also if required.

Problem with Gridview and dataTable Plugin

If you use DataTable plugin with ASP.NET Gridview control, then you will find that dataTable plugin does not work with ASP.NET Gridview control. Let's see why gridview is not working with dataTable plugin and try to resolve it by writing one helper plugin.

Analysis of the Problem

If we use Gridview, then it renders HTML that is not compatible with dataTable plugin. Let's use the below Gridview code to see its rendered HTML table.

//Gridview Code used in ASP.NET page
<asp:GridView ID="GridViewExample" runat="server" 
	AutoGenerateColumns="false" cellpadding="0" cellspacing="0" 
	border="0" class="display">
        <columns>
            <asp:BoundField HeaderText="Name" DataField="Name" />
            <asp:BoundField HeaderText="Town" DataField="Town" />
            <asp:BoundField HeaderText="Age" DataField="Age" />
            <asp:BoundField HeaderText="Employee Id" DataField="Id" />
            <asp:BoundField HeaderText="Skills" DataField="Skills" />
        </columns>
        <rowstyle cssclass="rowStyle"> //Giving class name to all rows
        <HeaderStyle CssClass="headerStyle" /> //Giving class name to header row
        <footerstyle cssclass="footerStyle">//Giving class name to footer row.
</footerstyle></rowstyle>

Below is the HTML rendered for the above Gridview.

//Table HTML that gridview rendered on the DOM.
//thead and tfoot sections are missing.
<table id="Table1" style="border-collapse: collapse;" 
	border="0" rules="all" cellspacing="0" cellpadding="0">
<tbody>
<tr class="headerStyle">
  <th scope="col">Name</th>
  <th scope="col">Town</th>
  <th scope="col">Age</th>
  <th scope="col">Employee Id</th>
  <th scope="col">Skills</th>
</tr>
<tr class="rowStyle">
  <td>Rupesh</td>
  <td>Louisville</td>
  <td>29</td>
  <td>114230</td>
  <td>c sharp, jquery</td>
</tr>
//rest rows...
//tfoot section (optional)...
</tbody>
</table>

In the above table HTML, you can see that there is only tbody section. However, there is no thead and tfoot sections.

As I mentioned earlier that in order to work dataTable properly, the target table must have 'thead' and 'tbody' as mandatory elements.

Absence of 'thead' and 'tbody' elements in the gridview's rendered HTML is the reason behind why Gridview control doesn't work with datatable plugin.

Therefore, if we use dataTable plugin on Gridview then it will never work. Let's see it in action. Below is the code required to apply dataTable plugin on gridview.

//calling dataTable plugin on above Gridview
$(">

If you run your application and load the page, then you will see that code will break in dataTables.js file by throwing an exception that says "asSorting is null or not an object". See the below screen-shot.

The above error comes because the gridview is not rendering in a required format before applying dataTable() method. If you click on continue button, then you would see the table without being modified by dataTable plugin. See the below screen-shot.

Let's Look for the Solution to this Problem.

Solution is GridviewFix Helper Plugin

I have created one helper plugin and named it as GridviewFix that can be applied on Gridview Control before calling dataTable plugin. This helper plugin will make ASP.NET Gridview Control's rendered table HTML compatible with the dataTable plugin and hence, GridviewFix will make dataTable plugin working with gridview control. Let's understand the same plugin's code details, its use, and see it in action.

GridviewFix Plugin Code

//GridviewFix Plugin Code
(function($,undefined){
   /*
An object required as an argument for the class names of the header , 
rows and footer of the target table.
Below are the default values for the plugins parameter object.
{
    header:"headerStyle" // header class name
    ,row:"rowStyle" //row class name
    ,footer:"footerStyle" //footer class name
}
*/
(function($,undefined){
    $.fn.GridviewFix = function (params) {
        var settings = $.extend({},{header:"headerStyle",row:"rowStyle",
		footer:"footerStyle"},params);
        return this.each(function ( ){
            var 
            ctxt= $(this)
	        ,thead =$("").append($("tr.".concat(settings.header),ctxt)) 
	        ,tbody = $("").append($("tr.".concat(settings.row),ctxt))
	        ,tfooter = $("").append($("tr.".concat(settings.footer),ctxt));
	        $("tbody",ctxt).remove();
	        ctxt.append(thead).append(tbody).append(tfooter);
        });
    }
})(jQuery);

This plugin will make Gridview's default rendered table HTML to required standard format for dataTable plugin. GridviewFix method is created inside the jquery prototype object so that it will be available in jQuery object.

• Method Name is GridviewFix.
• Parameters required to call this method are a JSON object having header, row and footer class names of the target table.

     //JSON object required to call GridviewFix method.
     {
      header:"headerStyle" // header class name
      ,row:"rowStyle" //row class name
      ,footer:"footerStyle" //footer class name
  }

  Before calling plugin method, the target Gridview should have proper class names for Header, Footer and Rows section.

• How GridviewFix plugin works: As we know that default rendered HTML for gridview is not proper so if we could make it proper before rendering then we can solve this problem. Let's see how this is being done by GridviewFix helper plugin.
  • First it finds header row, footer row and normal rows by searching them with their given classnames.
  • After finding rows, it wraps them in their corresponding required element section. Like header row would be wrapped under 'thead' element, normal rows would be wrapped under 'tbody' element and footer row would be wrapped under 'tfoot' element section.
  • After segregating and grouping them in the above mentioned sections, it cleans the gridview table by removing its 'tbody' section.
  • And then it appends the above grouped sections one by one in the gridview table. Hence the gridview table now contains 'thead', 'tbody' and 'tfoot' sections with the proper rows inside them.

Therefore, if you apply GridviewFix plugin on gridview before applying dataTable plugin. Then the gridview would become ready by having proper table format required for dataTable and will work properly.

GridviewFix Plugin in Action

Now we will see how we can use GridviewFix plugin in our page and see how it is resolving the problem. We will take the same above mentioned Gridview control. Include GridviewFix.js helper plugin file in the script section of the page. Call GridviewFix() helper method before making dataTable() method call on gridview control. Below is the query for the same:

//Applying GridviewFix plugin before calling dataTable method.
$(">

In the above query, I have first called GridviewFix() method on gridview and then called dataTable(). I didn't pass any arguments on GridviewFix() method. Because, I have used the same class names in the target Gridview that is defined in the plugin's default parameter object. If you have given different class names for the header, footer and rows of the target gridview then you can pass their class names in the argument object of the GridviewFix() method. See code for that:

//passing class names for header, footer and rows to GridviewFix method.
$(">

Now let's run the application and see the below screen-shot of the rendered gridview.

You can see, once we applied our helper plugin's GridviewFix() method on the gridview, then gridview is rendering properly and dataTable plugin is working fine. Therefore, GridviewFix plugin is a simple and useful solution to the above mentioned problem.

Source Code

I have attached the source code in this article. Inside the source code, I have put the datatable.aspx for the demo. There, I have used the GridviewFix plugin on gridview. If you run the project, then you can see the demo. The source code can be downloaded from here. Below is the screen-shot of the project.

History

This is the first version of GridviewFix plugin. I need your feedback to make it more generic and useful.