Introduction:
In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery.
In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery.
Description:
In Previous posts I explained lot of articles regarding Gridview. Now I will explain how to implement scrollable gridview with fixed header in asp.net. I have one gridview that contains lot of records and I used paging for gridview but the requirement is to display all the records without paging. I removed paging at that time gridview occupied lot of space because it contains more records to solve this problem we implemented scrollbar. After scrollbar implementation if we scroll the gridview we are unable to see Gridview header.
To implement Scrollable gridview with fixed header I tried to implement concept with css and JavaScript but there is no luck because maintaining fixed header working in IE but not in Mozilla and vice versa to solve this browser compatibility problem I used JQuery plugin which was implemented by Mudassar Khan to maintain fixed header for scrollable gridview and I tested it in all the browsers it’s working fine without any problem.
In Previous posts I explained lot of articles regarding Gridview. Now I will explain how to implement scrollable gridview with fixed header in asp.net. I have one gridview that contains lot of records and I used paging for gridview but the requirement is to display all the records without paging. I removed paging at that time gridview occupied lot of space because it contains more records to solve this problem we implemented scrollbar. After scrollbar implementation if we scroll the gridview we are unable to see Gridview header.
To implement Scrollable gridview with fixed header I tried to implement concept with css and JavaScript but there is no luck because maintaining fixed header working in IE but not in Mozilla and vice versa to solve this browser compatibility problem I used JQuery plugin which was implemented by Mudassar Khan to maintain fixed header for scrollable gridview and I tested it in all the browsers it’s working fine without any problem.
First design the table in database and give name UserInfomation
ColumnName
|
DataType
|
UserId
|
Int(set identity property=true)
|
UserName
|
varchar(50)
|
LastName
|
varchar(50)
|
Location
|
varchar(50)
|
After completion table creation design aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Gridview with Fixed Header</title>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#<%=gvdetails.ClientID %>').Scrollable();
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView runat="server" ID="gvdetails" DataSourceID="dsdetails" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="UserId" HeaderText="UserId" />
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="dsdetails" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"
SelectCommand="select * from UserInformation"/>
</form>
</body>
</html>
|
If you observe above code I added jquery-1.4.1.min.js and ScrollableGridPlugin.js script files in header section of code you need to download the attached code to get these script files. By using these files we can manage the gridview header in fixed position or you can get it from here FreezeGridviewHeaderusingjQuery
Here don’t forgot to set the connection string in web.config file here I am getting database connection from web.config file for that reason you need to set the connectionstring in web.config file like this
<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"/>
</connectionStrings>
|
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
76 comments :
Good Job Suresh..:)
suresh is this possible that if we have more columns and we want horizontal as well as vertical scrolling. is this possible?
my emailid is :
coolnavjot31@gmail.com
Super suresh
Hi suresh if i have more columns then scroll is not attractive when the columns are less.if we have more columns there is any chance to put the scroll on two sides or horiozontal scroll bar.is this possible please mail that code to my mail id.
bhanu388@gmail.com
really this article very helpful to ful me.
sir,how can i display data on gird if m using more then two tables and how to insert,update and delete in that table...?
hi,
reshmi is asking same i want
hi doesnt work in firefox
it's working in all browsers i cross tested it..
@rashmi..
if you want to get data from more than one table then you need to write query using joins and to insert data for more than one table you just your parameter values to your stored procedure in that use two insert quries to save data in different tables based on your requirements.
that is superb... thanx.
hi suresh, i have tried to implement this logic as per the above code ,it is only showing the grid header ,content is not displaying can u tell me the reason,or any thing i mised,very urgent
hi suresh are available
@vijay...
i think you did some mistake because of that your gridview not displaying data please check it once
hi suresh i have not missed any thing as per the above guidlines vijay
hi suresh
I am designing the page using above code.when compiling the code i see only Gridview with Data,im not getting scroll-bar.is there any j-query plugin code file is necesary to add our project?
thanks®ards
Hareesh.A
@hareesh arava...
have u add the JQuery script files mentioned in code or not please check it once. This application is working fine...
hi
i was try but im not getting. By using same java script functions i did gridview details with scrollbar, by using data source as: "xml" file.
Thanks&Regards
hareesh.a
hi
suresh i got it.
thanks®ards
Hareesh
hi
i mention the scroll height in j-query code.
$(document).ready(function() {
$('#<%=gvdetails.ClientID %>').Scrollable({
ScrollHeight: 100
});
});
sir how can i create textboxes on button click and save there values to the data base
thanks in advance
If more than 6-7 columns, the header no longer lines up with the data columns.
It is very good article. It helped and saved my time.
Thanks a lot.
hi,
i want to use gridview and user control on same page.. the code is not working when i put user control on page..
how to use this code when gridview and user control both are on same page.. ?
please help me
i got The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Very Nice
Thanks
Alignment problem,column values not align properly.How to align properly
Header length not same as data colums
hi,
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
how set GridView ID .
@Govind...
check this article
http://www.aspdotnet-suresh.com/2011/12/aspnet-controls-collection-cannot-be.html
hi,
i read this article and apply both method.Error is solved but scroll bar is not show.
Hi Suresh,Is there any artical related to page load on scroll like face book?
Absolutely great ! Thank you for your work - good job
hi suresh ..
it's working .....
thanks good article
Really Superb,,, Searching from long time.. finally i got solutions, thanks.thanks.thanks :)
thank it is very... useful....
if u dont mind can u send me the code of scrollable gridview with footer .....
sir isme client id kya hai.. idont to pl sir help me
Test
Hi,
In my application it is not working if i a gridview is having sorting and checkboxes .Where ever gridview is having only sorting that gridview is working for fist time but when i click on header for sorting it is not working...And checkbox are also not working..please help me out ...
Thanks
hello sir,
i am getting error as file Scripts/ScrollableGridPlugin.js not found.
what to would i need to do fixed header.
please reply sir, its urgent
I think you are missing ScrollableGrid Plugins..Just add that to your app..
Hi Suresh 1st of all I wish to thank you for this great article.I did exactly the same what you wrote in this application after that the fixed header and scrolling part is working perfectly,but the other functionality like if i click on cancel button and show existing button all these functionality are not working.and when i am commenting your script then everything working fine.can you please suggest urgently what may be the problem?
Hi suresh,
Nice article. How to write Code in jquery-1.4.1.min.js & ScrollableGridPlugin.js
hi suresh ,
i am added the .js files and add the script tag also . but it is not working for me ..
pls help me where is the mistake ..
Thanks...
Working Perfectly.. :)
Hi,
how we applay group by rows in gridview.
eg
Group By Year
sudheesh
Hi Sir,
I am using timer to update Gridview control. When gridview databind the scroll will missing. How to fix it.
Thanks in advance.
V.Ariharasudhan
Hi, I can I use this scrollview AND also use the jQuery tablesorter plugin applied to the same grid??? Thanks
Award Winning Performance Sir, Tussi Great and Genius ho
hi how to change gridview height of the for coming scrollbar.
srihari
srihari1203@gmail.com
8867682809
the scroll bar is coming for 13 rows can we change that. if we can change pls replay
i have done exactly and scrolling is also perfect with fixed header but the problem occuring is ass soon as i apply this code my gridview header and their respected columns dont match...that is, its alignment gets altered...help me suresh...
I dealt with the alighnment problem..its fine..but new problem is ... that the scrollable funtion is only working only on load..otherwise if exit button is pressed or some other page is visited..the scroll dissapears..its only coming on the load page....why is that..
Thanks for sharing that. Does anybody know how can I have this scrollbar on the left side of gridview instead of right?
Thanks a lot for sharing this. But there is an alignment problem as column values is not getting aligned properly with header. Could you please help?
hii suresh i tried the above code but..when any event occurs(selectedindexchanging)
its not working.can u help me
Hi Suresh,
I had implemented the fixed header in grid but when we select the row ,scroll position moves to top
please give me your suggestion to maintain the sroll position inside the update panel
Sir
How can I make the gridview responsible also.
Please give me your suggestion.
Manu Sharma
The header column borders are not matching with data column borders if we have more columns which goes beyond the screen width.
Any solution to it?
it is really use full to me thank u suresh
its not working inside update panel?????
its working for me but if i minimize the browser the grid goes away....
Hi Suresh ,am trying above code but it is not working properly because am running application in IE10 browser.So,please tell me any another code for grid view fixed header while scorlling.
its not working inside update panel?
Am not finding scrollableGrid-Plugin.js file in script folder
Good Job Suresh.!
hi,very good job!
how to do when the grid has not yet reached the number of rows to display the scrollbar?
the gridview is shifted to the right compared to the header of 17px...
any tips?
the code not work along with auto complete text box plug in when i remove auto complete plug in work why?
hi,
the code is not working when i have used bootstrip.css and plugin , please help me
hi Sir...the code is working fine except for gridview fixed header and the columns are not aligned....what can be the possible reason for this??anything i am missing??
Hi Suresh,
The above example is good but if we specify height and width parameters, fixed header is not working with respect to Horizontal scroll bar.
Could you please look into this issue? Thanks in advance.
why not working T.T
Note: Only a member of this blog may post a comment.