Last year on October, Matt Berseth wrote few posts about improving styles of GridView, these posts are the following:
Last month, I posted a revised version of his work using Script#. And in this post I'm going to show that same features can be applied using jQuery. And I was really amazed by the simplicty and less of code that I had to write to get the same feature on hand.
I've implemented this using jQuery plugins. So I had to author a plugin and I can call it very simple one as the idea was already done and I had it on my head. I'm not going to explore how jQuery plugins can be authored, but you can return to the following links:
You can view demos here [demo 1] & [demo 2]. I will start from the end, on how to use the plugin. Actually it is very simple, all you need to do is to add this JavaScript line to your code when the page, or as a startup script. I did that using onLoad event of the ASP.NET AJAX Application as I have ScriptManager installed on the page:
$(selector).gridviewex(options);
For example:
<script type="text/javascript">
function pageLoad(s,e)
{
$('#gvProducts').gridviewex({hasPageRow:true,dataRowClass:'row',altDataRowClass:'altrow',
rowHoverClass:'rowhover', rowSelectClass:'rowselect',
cellHoverClass:'cellhover',cellSelectClass:'cellselect',
columnHoverClass:'columnhover'});
}
</script>This will initialize the GridView with the style needed. It worth to mention that you can use this plugin with any Table based HTML.
More...