Click here to Skip to main content
13,860,671 members
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 11 Oct 2011
Licenced CPOL

GridviewFix jQuery plugin

, 11 Oct 2011
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.


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.


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.

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">
  <th>Column 1</th>
  <th>Column 2</th>

  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>

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


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">
            <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" />
        <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.

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">
<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 class="rowStyle">
  <td>c sharp, jquery</td>
//rest rows...
//tfoot section (optional)...

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
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
    $.fn.GridviewFix = function (params) {
        var settings = $.extend({},{header:"headerStyle",row:"rowStyle",
        return this.each(function ( ){
            ctxt= $(this)
	        ,thead =$("").append($("tr.".concat(settings.header),ctxt)) 
	        ,tbody = $("").append($("tr.".concat(settings.row),ctxt))
	        ,tfooter = $("").append($("tr.".concat(settings.footer),ctxt));

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.

gridviewfix.PNG - Click to enlarge image

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.

codestruct.PNG - Click to enlarge image


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


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


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

QuestionClarification Pin
Member 784642925-Oct-15 7:01
memberMember 784642925-Oct-15 7:01 
QuestionHow to add first and last button in pagination in the datatable (Gridviewfix Helper Plugin) Pin
Member 115621497-Oct-15 23:30
memberMember 115621497-Oct-15 23:30 
QuestionIn gridviewfix number sorting not proper Pin
Member 1156214931-Jul-15 1:46
memberMember 1156214931-Jul-15 1:46 
Bug[My vote of 1] This is an INCOMPLETE Article. Pin
MacSpudster16-Jul-15 6:52
professionalMacSpudster16-Jul-15 6:52 
QuestionHow to Hide some columns? Pin
chandruprakash24-Nov-14 20:37
memberchandruprakash24-Nov-14 20:37 
QuestionI've Another Very Simple Solution for this headache. Pin
Haresh_Jaiswal1-Sep-14 2:00
memberHaresh_Jaiswal1-Sep-14 2:00 
AnswerRe: I've Another Very Simple Solution for this headache. Pin
willeess3-Mar-15 10:46
memberwilleess3-Mar-15 10:46 
QuestionIs that all necessary? Pin
Sandeep Thomas18-Feb-14 20:42
memberSandeep Thomas18-Feb-14 20:42 
PraiseRe: Is that all necessary? Pin
Member 124441048-Apr-16 5:58
memberMember 124441048-Apr-16 5:58 
QuestionHow about if I want to enable AllowPaging for huge data Pin
aminkh1714-Aug-13 2:23
memberaminkh1714-Aug-13 2:23 
AnswerRe: How about if I want to enable AllowPaging for huge data Pin
Angel Blandón14-Aug-13 12:36
memberAngel Blandón14-Aug-13 12:36 
QuestionJScript error Pin
babyDaniel10-Feb-13 3:52
memberbabyDaniel10-Feb-13 3:52 
BugDoes not work with editable Grid Pin
tigerwilliams31-Jan-13 9:10
membertigerwilliams31-Jan-13 9:10 
QuestionRegarding GridviewFix jQuery plugin Pin
ashishaapaliya16-Jan-13 2:20
memberashishaapaliya16-Jan-13 2:20 
QuestionThank you so much!! Pin
pramod gurav30-Dec-12 22:11
memberpramod gurav30-Dec-12 22:11 
Answerfor all types of options like sorting, searching, paging....printing... Pin
varaprasadreddy.bh18-Dec-12 9:01
membervaraprasadreddy.bh18-Dec-12 9:01 
QuestionIssues with grid in Master Page Pin
satleonine99-Oct-12 1:41
membersatleonine99-Oct-12 1:41 
AnswerRe: Issues with grid in Master Page Pin
Member 784642925-Oct-15 12:43
memberMember 784642925-Oct-15 12:43 
AnswerRe: Issues with grid in Master Page Pin
Member 1265391727-Jul-16 0:27
memberMember 1265391727-Jul-16 0:27 
Questionusing jquery tooltip with DataTables Pin
shehbazshkh9-Aug-12 22:35
membershehbazshkh9-Aug-12 22:35 
AnswerRe: using jquery tooltip with DataTables Pin
Rupesh Kumar Tiwari15-Aug-12 8:04
memberRupesh Kumar Tiwari15-Aug-12 8:04 
GeneralRe: using jquery tooltip with DataTables Pin
shehbazshkh15-Aug-12 21:48
membershehbazshkh15-Aug-12 21:48 
GeneralRe: using jquery tooltip with DataTables Pin
Rupesh Kumar Tiwari16-Aug-12 2:32
memberRupesh Kumar Tiwari16-Aug-12 2:32 
GeneralThank you Pin
NehaliAmin0130-Jul-12 0:00
memberNehaliAmin0130-Jul-12 0:00 
QuestionUse ColumnFilter Plugin Pin
Tan414-Apr-12 10:53
memberTan414-Apr-12 10:53 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 11 Oct 2011
Article Copyright 2011 by Rupesh Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid