Styling ASP.NET GridView using 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