ASP.NET : Freeze GridView Header using GridViewScroll jQuery plugin
DEMO When you have lots of rows to be displayed in a gridview say for example 500 records, if an user is interested in seeing 400t...
https://www.programming-free.com/2013/03/freeze-gridview-header-using-jquery.html
When you have lots of rows to be displayed in a gridview say for example 500 records, if an user is interested in seeing 400th record, the user has to scroll all the way down through the page, if there is no paging or scrolling functionality. Also when gridview is made scrollable, headers will also scroll along with the other gridview contents making it difficult for the user to understand the data properly. There are many javascript and css solutions to freeze gridview header, but each of them has its own drawback like some solutions are not compatible with all browsers, some does not get aligned properly and some does not support other gridview features such as paging and sorting.
Recently, I came across a jQuery plugin called GridViewScroll that enables scrolling in a gridview with fixed headers and is compatible with majority of the browsers. Since this is a client side plugin, this can be used with simple html table also. I used this plugin in one of my real-time applications and found this to be very efficient, since it can be used along with other features of gridview such as paging, sorting and can freeze gridview columns too. We can also use this plugin with Gridview inside AJAX UpdatePanel for other dynamic operations.
It is very simple and easy to implement.
1. Download GridViewScroll jQuery plugin from here.
2. Add the css file, jQuery file and images from the download to your ASP.NET project.
3. In your aspx file, use the below code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Fixed Header GridView</title>
<link href="Styles/GridviewScroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
$('#<%=GridView1.ClientID%>').gridviewScroll({
width: 660,
height: 300,
startHorizontal:0,
wheelstep:10,
barhovercolor:"#3399FF",
barcolor: "#3399FF"
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="width:670px;margin-left:auto;margin-right:auto;">
<h2 style="text-align:center;">Freeze/Fixed GridView Header using GridViewScroll jQuery plugin</h2>
<p style="text-align:center;">Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a></p>
<asp:GridView ID="GridView1" runat="server" Width="660px"
AutoGenerateColumns="false" AllowPaging="false">
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code" />
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="150px" ItemStyle-Width="150px" ItemStyle-CssClass="Wrap" />
<asp:BoundField DataField="Continent" HeaderText="Continent" />
<asp:BoundField DataField="Region" HeaderText="Surface Area" />
<asp:BoundField DataField="Population" HeaderText="Population" />
<asp:BoundField DataField="IndepYear" HeaderText="Year of Independence" />
<asp:BoundField DataField="LocalName" HeaderText="Local Name" />
<asp:BoundField DataField="Capital" HeaderText="Capital" />
<asp:BoundField DataField="HeadOfState" HeaderText="Head of State" />
<asp:BoundField DataField="SurfaceArea" HeaderText="Surface Area" />
</Columns>
<HeaderStyle CssClass="GridviewScrollHeader" />
<RowStyle CssClass="GridviewScrollItem" />
<PagerStyle CssClass="GridviewScrollPager" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Do not forget to reference jQuery and jQueryUI library in aspx page. In the above code, after page had loaded we are calling gridviewscroll jquery method with all necessary parameters like width and height of gridview.4. Write code to load gridview with data in code-behind, I have written code to fetch data from mysql database below,
public partial class GridViewScroll : System.Web.UI.Page
{
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
try
{
//Fetch data from mysql database
MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;password=xxxxx;database=world; pooling=false;");
conn.Open();
string cmd = "select * from country";
MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
DataSet ds = new DataSet();
dAdapter.Fill(ds);
dt = ds.Tables[0];
//Bind the fetched data to gridview
GridView1.DataSource = dt;
GridView1.DataBind();
}
catch (MySqlException ex)
{
System.Console.Error.Write(ex.Message);
}
}
}
5. That is all, now build the project. You can see a beautiful gridview with fixed header, horizontal and vertical scroller. Take a look at the live demo here and start using it to create fixed header gridviews.
There are a lot of other things that you can do with GridViewScroll such as freezing columns, header column merge, row hover, cell wrap etc. I hope this post will help you to get started with GridViewScroll.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!
Nice ...!!!
ReplyDeleteThank you!
DeleteHi Priya, I found this very helpful. I still need your help... My requirement is to use the arrow up and down key for navigating the gridview rows. Can you please let me know is there a work around for that? Your help is greatly appreciated.
DeleteNice Post!
ReplyDeleteHi Likol,
DeleteThank you for creating such a wonderful plugin for us! I am happy that you stopped by here to read this post!
Thanks,
Priya
Hi mam..
ReplyDeleteJquery code for fix header gridview is not working properly under update panel. after rebind the gridview sgow as normally....
Please give me any solution. Iam waiting ur relpy......please give me reply
Thank U..
Hi,
DeleteYou have to tweak this code a little to make it work with update panel. Check out the link below and you have the exact code here,
http://gridviewscroll.aspcity.idv.tw/Demo/Support.aspx#UpdatePanel
Hope this helps!
How to add reference jQuery and jQueryUI library
ReplyDeleteHi,
DeleteThis is how we reference the libraries in aspx page,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Though I have added this code to reference these libraries in my article, I wrote it as an heads up in case if you choose to download these libraries and specify the file path in your project directory.
Thanks,
Priya
I follow the step but I can not get the right result.
ReplyDeleteI can not freeze the header. My gridview is in Panel do I need to set the div
I'm using jquery-1.10.1.min.js in my application. When I attempt to use this plugin it generates an error. Any chance you will update the plugin?
ReplyDeleteHi,
DeleteThis plugin is developed and offered by Likol Lee. You can find more information on this and can post your questions in his project site here, http://gridviewscroll.aspcity.idv.tw/Contact.aspx
Hope this helps!
hi
ReplyDeleteThanx this very nice article.
i have used in my project and its working good.
once again thanx
Most Welcome!
DeleteHi priya
ReplyDeletefreeze-gridview-header-using-jquery code has working properly in C#.net(web application).but the problem is when i am run in a perticular page it automatically go for defaultpage.i need what i did wrong...
pls reply..
Hi mam,
ReplyDeleteThanks for your post. It's working fine, but column freezing is not working there. why? is there add any extra code? please give me rply
Hi,
DeleteYes. You have to add an option called freezesize in your jquery code.
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
$('#<%=GridView1.ClientID%>').gridviewScroll({
width: 660,
height: 200,
freezesize: 2
});
}
Check this out, http://gridviewscroll.aspcity.idv.tw/Demo.aspx#Freeze
Hope this helps!
Hi,
ReplyDeleteFreeze is working. But header alignment is missing in the gridview. Any suggestion
Hi,
ReplyDeleteFreeze is working. But header alignment is missing in the gridview. Any suggestion
Hi its not working for me.. its giving this error Object doesn't support property or method 'gridviewScroll'
ReplyDeletethank uuuu
ReplyDeleteFrezee is working, but how to header column merge.
ReplyDeletelink http://gridviewscroll.aspcity.idv.tw/ died
Hi Priya, This code is very helpful but it is not working with master page. please provide me the solution for master page
ReplyDeleteHi Priya,
ReplyDeleteThanks for the article. I tried to use the code on a page that inherits from a Master Page and also the grid is in an updatepanel..
I saw the link to the Demo page that says "update panel" but I don't see what differences exist there. The Scroll works but the Header Line columns don't line up with the data columns properly.In my asp i have set the specific widths for itemstyle-width and i had also added headerstyle-width still didn't help.
Any Suggestions would be greatly appreciated..
Regards
Meir
Hi, the frozen header and column works great on the desktop. However, on the Safari (iPAD) it doesn't scroll. Any suggestions? Thank you in advance
ReplyDeleteHi, this isn't working for Safari browser on iPAD, is there a work around? help. please.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi.. New version released! Maybe you can get a try.
ReplyDeleteHow to change Height parameter run time in the script ?
Delete