Styling ASP.NET GridView using jQuery Theme Switcher Widget
Posted by: Suprotim Agarwal
in Category jQuery and ASP.NET
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
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