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

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn