Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery scrollable gridview with fixed header in asp.net

Nov 9, 2011
Introduction:

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.

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 RSS subscribe by email Subscribe by Email

76 comments :

Mehtab said...

Good Job Suresh..:)

Anonymous said...

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

Anonymous said...

Super suresh

bhanu said...

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.

rashmi said...

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...?

raju.kakarlapudi said...

hi,

reshmi is asking same i want

Anonymous said...

hi doesnt work in firefox

Suresh Dasari said...

it's working in all browsers i cross tested it..

Suresh Dasari said...

@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.

krish said...

that is superb... thanx.

Vijay said...

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

Anonymous said...

hi suresh are available

Suresh Dasari said...

@vijay...
i think you did some mistake because of that your gridview not displaying data please check it once

Anonymous said...

hi suresh i have not missed any thing as per the above guidlines vijay

Unknown said...
This comment has been removed by the author.
Unknown said...

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&regards
Hareesh.A

Suresh Dasari said...

@hareesh arava...
have u add the JQuery script files mentioned in code or not please check it once. This application is working fine...

Unknown said...

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

Unknown said...

hi

suresh i got it.

thanks&regards
Hareesh

Unknown said...

hi

i mention the scroll height in j-query code.


$(document).ready(function() {
$('#<%=gvdetails.ClientID %>').Scrollable({
ScrollHeight: 100
});

});

yash said...

sir how can i create textboxes on button click and save there values to the data base

thanks in advance

Anonymous said...

If more than 6-7 columns, the header no longer lines up with the data columns.

Rambabu Nagineni said...

It is very good article. It helped and saved my time.
Thanks a lot.

Anonymous said...

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

Anonymous said...

i got The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Anonymous said...

Very Nice
Thanks

Unknown said...

Alignment problem,column values not align properly.How to align properly

Anonymous said...

Header length not same as data colums

Govind said...

hi,
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
how set GridView ID .

Suresh Dasari said...

@Govind...
check this article
http://www.aspdotnet-suresh.com/2011/12/aspnet-controls-collection-cannot-be.html

Govind said...

hi,
i read this article and apply both method.Error is solved but scroll bar is not show.

Unknown said...

Hi Suresh,Is there any artical related to page load on scroll like face book?

Anonymous said...

Absolutely great ! Thank you for your work - good job

Anonymous said...

hi suresh ..
it's working .....
thanks good article

Anonymous said...

Really Superb,,, Searching from long time.. finally i got solutions, thanks.thanks.thanks :)

prasad said...

thank it is very... useful....

prasad said...

if u dont mind can u send me the code of scrollable gridview with footer .....

nilu gupta said...

sir isme client id kya hai.. idont to pl sir help me

Unknown said...

Test

Unknown said...

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

Anonymous said...

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

Unknown said...

I think you are missing ScrollableGrid Plugins..Just add that to your app..

Gyanendra said...

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?

aparna said...

Hi suresh,
Nice article. How to write Code in jquery-1.4.1.min.js & ScrollableGridPlugin.js

sathish said...

hi suresh ,

i am added the .js files and add the script tag also . but it is not working for me ..

sathish said...

pls help me where is the mistake ..

Happy Patel said...

Thanks...

Working Perfectly.. :)

DOTNETERS said...

Hi,

how we applay group by rows in gridview.

eg

Group By Year


sudheesh

Ariharasudhan Dot Net Developer said...

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

Unknown said...
This comment has been removed by the author.
Anonymous said...

Hi, I can I use this scrollview AND also use the jQuery tablesorter plugin applied to the same grid??? Thanks

Abhinavsingh993 said...

Award Winning Performance Sir, Tussi Great and Genius ho

sri said...

hi how to change gridview height of the for coming scrollbar.
srihari
srihari1203@gmail.com
8867682809

sri said...

the scroll bar is coming for 13 rows can we change that. if we can change pls replay

Will said...

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...

Will said...

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..

Anonymous said...

Thanks for sharing that. Does anybody know how can I have this scrollbar on the left side of gridview instead of right?

Anonymous said...

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?

bharath_kurra said...

hii suresh i tried the above code but..when any event occurs(selectedindexchanging)
its not working.can u help me

Sureshp said...

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

Anonymous said...

Sir
How can I make the gridview responsible also.
Please give me your suggestion.
Manu Sharma

Unknown said...

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?

Unknown said...

it is really use full to me thank u suresh

Unknown said...

its not working inside update panel?????








Unknown said...

its working for me but if i minimize the browser the grid goes away....

Unknown said...

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.

satya vatturi said...

its not working inside update panel?

Anonymous said...

Am not finding scrollableGrid-Plugin.js file in script folder

Anonymous said...

Good Job Suresh.!

Anonymous said...

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?

jits said...

the code not work along with auto complete text box plug in when i remove auto complete plug in work why?

Unknown said...

hi,
the code is not working when i have used bootstrip.css and plugin , please help me

Anonymous said...

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??

Anjaneya Prasad said...

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.

Unknown said...
This comment has been removed by the author.
BlackRose MONAVIE said...

why not working T.T

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.