Click here to Skip to main content
11,648,094 members (71,236 online)
Click here to Skip to main content

GridviewFix jQuery plugin

, 11 Oct 2011 CPOL 41.9K 1.2K 31
Rate this:
Please Sign up or sign in to vote.
GridviewFix is a helper jQuery plugin that solves the compatibility problem in between .NET Gridview and dataTable plugin.

Introduction

In this article, I have discussed the problem that the developer faces while using dataTable plugin with ASP.NET Gridviewcontrol 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 Gridviewcontrol, then you will find that dataTable plugin does not work with ASP.NET Gridviewcontrol. Let's see why gridviewis not working with dataTableplugin 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 dataTableplugin. Let's use the below Gridviewcode 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 dataTableproperly, 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 Gridviewcontrol doesn't work with datatableplugin.

Therefore, if we use dataTable plugin on Gridviewthen 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.

break.PNG

The above error comes because the gridviewis 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 dataTableplugin. See the below screen-shot.

wo.PNG

Let's Look for the Solution to this Problem.

Solution is GridviewFix Helper Plugin

I have created one helper plugin and named it as GridviewFixthat can be applied on GridviewControl before calling dataTableplugin. This helper plugin will make ASP.NET GridviewControl's rendered table HTML compatible with the dataTableplugin and hence, GridviewFixwill make dataTableplugin working with gridviewcontrol. 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 dataTableplugin. GridviewFixmethod 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 Gridviewshould have proper class names for Header, Footer and Rows section.

  • How GridviewFixplugin works: As we know that default rendered HTML for gridviewis 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 gridviewtable by removing its 'tbody' section.
    • And then it appends the above grouped sections one by one in the gridviewtable. Hence the gridviewtable now contains 'thead', 'tbody' and 'tfoot' sections with the proper rows inside them.

Therefore, if you apply GridviewFixplugin on gridviewbefore applying dataTableplugin. Then the gridviewwould become ready by having proper table format required for dataTableand will work properly.

GridviewFix Plugin in Action

Now we will see how we can use GridviewFixplugin 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 gridviewcontrol. 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 gridviewand 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.

gridviewfix.PNG - Click to enlarge image

You can see, once we applied our helper plugin's GridviewFix() method on the gridview, then gridviewis rendering properly and dataTableplugin 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 GridviewFixplugin 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.

codestruct.PNG - Click to enlarge image

History

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rupesh Kumar Tiwari
Software Developer (Senior)
United States United States

I am a Senior Software Developer working since 2005 in Microsoft ASP.Net and related Technologies.

I work on C#, Asp.Net, MVC, RAZOR, Entity Framework, JavaScript, jQuery, HTML5, CSS3, WCF, Silverlight, WPF, MVVM, SQL, SSIS, etc. Did Function Point Analysis, WBS to estimate projects and worked on Agile Scrum team.

I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.

I wrote an article on Swami Vivekananda posted his audio speeches by reading them.


You may also be interested in...

Comments and Discussions

 
GeneralThank you Pin
Member 802465029-Jul-12 23:00
memberMember 802465029-Jul-12 23:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150804.4 | Last Updated 11 Oct 2011
Article Copyright 2011 by Rupesh Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid