Styling ASP.NET GridView using jQuery Theme Switcher Widget

Posted by: Suprotim Agarwal , on 2/23/2011, in Category jQuery and ASP.NET
Views: 186378
Abstract: In this article, we will see how to style the ASP.NET GridView using the jQuery Theme Switcher Widget

In this article, we will see how to style the ASP.NET GridView using the jQuery Theme Switcher Widget.

Let’s get started:

Note: If you are using jQuery with ASP.NET Controls, check out my EBook called 51 Recipes with jQuery and ASP.NET Controls.

Step 1: Create an ASP.NET application and add a GridView to it. Now bind the GridView to some datasource. The source code contains a sample with the GridView bound to the SQLDataSource control

Step 2: Now add some references to the jQuery CSS library, jQuery Library, jQuery UI library as shown below:

Step 3: Create a folder called ‘Scripts’ in your application and download the jQuery Theme Switcher Tool in it. Add a reference to this script file in your application. You may be tempted to hotlink the theme tool directly, but do not do so.

Read my post: How jQuery Resource Hotlinking will affect your applications

The solution is to download the theme switcher JavaScript code and images to your own server and modify the code to point to the images you downloaded. Read more here. For demonstration purposes, I have downloaded the first four images and have kept in the source code of this article.

Step 4: Now create a div called ‘themewidget’ and call the theme switcher tool on this Div using the following code:

Step 5: This is the most important part. The ASP.NET GridView does not render the <thead>, <tbody> <tfoot> tags by default. Use the following code to make it generate these accessibility tags

If you observe, we have set some CSS classes like the ui-widget-content and ui-widget-header on the GridView and its header row. These classes belong to the jQuery UI CSS Framework which includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller.

Note: In our application, we have only used the Widget Containers classes on the Table. However there are many more classes and you can use them as required.

That’s it. Now run the application and you should see the following:

Click on the ‘Switch Theme’ dropdown to select a theme of your choice (say UI Lightness)

and the GridView will be stylized as shown below:

I hope you liked the article and I thank you for viewing it.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Eduardo on Wednesday, February 23, 2011 6:38 PM
Many thanks for this wonderful article. I will use the other css classes and share the solution here
Comment posted by Hajan Selmani on Friday, February 25, 2011 3:12 AM
Excellent post.
Comment posted by Thanigainathan on Friday, February 25, 2011 7:22 AM
Very nice article.Will switched themes preference be saved somewhere so that when the user revisits the site the last selected themse will be applied ?
Comment posted by Suprotim Agarwal on Friday, February 25, 2011 9:49 AM
Yes you can save the preference using a cookie. Just modify the themeswitcher.js file to get/set a cookie.
Comment posted by Sreedhar on Friday, February 25, 2011 11:19 AM
Could you let us know whether it will work from Asp.net 2.x or 3.5x? thanks
Comment posted by Suprotim Agarwal on Friday, February 25, 2011 7:12 PM
Sreedhar: works for ASP.NET 2, 3.5, 4
Comment posted by Sandeep Ramani on Friday, February 25, 2011 10:59 PM
Nice post...
Comment posted by Iraklis Kyriakidis on Saturday, February 26, 2011 4:47 AM
Very nice post.
Comment posted by Joris Rodger on Wednesday, March 2, 2011 4:44 AM
Another excellent article on this site. I have become a regular visitor of dotnetcurry.com!
Comment posted by mona on Monday, July 11, 2011 2:50 AM
it is a nice way to use net i like it thanks for sharing this post.keep it up....
[url=http://www.dlotw.org]Business Directory[/url]
Comment posted by Rajeev on Friday, August 19, 2011 4:30 AM
Thank you very very much for great tutorial...u are great bro...
Comment posted by Lijo on Wednesday, February 8, 2012 8:14 AM
Thanks. Its a unique article - talking about making asp.net controls themeroller ready. Do you have posts for any other controls? Also, in IE the gridline is not visible when there is only one page in the girdview. In firefox, there is no gridline for header. In Chrome it works fine. I am highly impressed with themeroller ready. If you can provide more thoughts about that - it would be really helpful.
Comment posted by Lijo on Wednesday, February 8, 2012 8:14 AM
Thanks. Its a unique article - talking about making asp.net controls themeroller ready. Do you have posts for any other controls? Also, in IE the gridline is not visible when there is only one page in the girdview. In firefox, there is no gridline for header. In Chrome it works fine. I am highly impressed with themeroller ready. If you can provide more thoughts about that - it would be really helpful.
Comment posted by Lavanya.S.J on Wednesday, March 7, 2012 10:16 PM
Thank You so much .. It is great.It works well
Comment posted by Sarita on Tuesday, June 19, 2012 1:49 AM
It's a nice code.Thanks a lot for posting this type of useful codes.....
Its really helpful....
Comment posted by fghjtr on Wednesday, August 1, 2012 6:40 AM
gfghhj
Comment posted by Developer on Wednesday, January 16, 2013 4:45 PM
Excelen blog steel like this it's really helpfull...
Comment posted by pablo on Tuesday, July 9, 2013 11:04 AM
Not work for me

Dont change style

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel