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.
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:
No comments:
Post a Comment