How to make scrollable Grid View with fixed header?

Question

1.00/5 (1 vote)

See more:

Hi!

I am working with my project. I have a grid view that displays lots of records. Now, I want to make my header for my grid view fixed whenever I scroll it down. I made my header fixed by inserting a CSS Selector on my .aspx code. But I got a problem. My header overllaped with the two columns on the first row. I do not know how to fix that. Can anyone help me out?

CSS Selector:

CSS

<pre lang="xml">.FixedHeader{
position: absolute;
font-weight: bold;
}</pre>


.aspx code:

<asp:Gridview ID="Gridviewchecklist" HeaderStyle-CSSCLass="FixedHeader" runat="server" DataKeyNames="checklist_code" AutoGenerateColumns="False" AllowSorting="true" CellPadding="4" OnSelectedIndexChange="GridviewChecklist_OnSelectedIndexChange" ForeColor="#333333" Width="100%" OnSorting="Sorting_checklist" >

Posted 17-Aug-14 15:13pm

DarkDreamer08

Updated 19-Aug-14 17:21pm

v4

Add a Solution

Comments

[no name] 17-Aug-14 21:31pm

What do you mean you could not find it? http://www.google.com/search?q=jquery+datagridview+fixed+header

DarkDreamer08 17-Aug-14 21:38pm

i mean there are articles that they drag a jquery script in their codes that was save in a folder. but i cannot find that file on the page that they posted their article. its just the .cs file and .aspx file. but where is the jquery that they added? that's what I mean. :)

[no name] 17-Aug-14 22:38pm

Well... gee.... considering that we all have probably not read every single article on the internet, how would you expect us to know which articles that you are referring to out of the trillions of articles that it could be?

DarkDreamer08 17-Aug-14 23:27pm

oh, yeah. Sorry about that. Why I did not think about that? How ridiculous I am? hahaha XD anyway, Thanks for your help. I am doing it now :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-08-17T16:00:00

Solution 1

You have to download the file from official jQuery[^] site.

Posted 17-Aug-14 16:00pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

DarkDreamer08 18-Aug-14 1:56am

http://www.codeproject.com/Questions/808534/How-to-search-records-in-a-database help me please here :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Aug-14 3:31am

Okay, sure. Please mark this as answer. :)

DarkDreamer08 18-Aug-14 23:16pm

Kindly help me here... http://www.codeproject.com/Questions/808919/How-to-insert-records-from-database-to-a-label pleaseee :) I really nedd a hand here..

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Aug-14 1:37am

It is solved. :D Great. :)

DarkDreamer08 19-Aug-14 1:43am

Yeah, Thanks to all that helped me :) like you! XD

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 19-Aug-14 6:33am

Welcome. The community is to help you. :)

DarkDreamer08 19-Aug-14 23:09pm

hey, help me out. I just inserted a CSS selector at my .aspx to make the header of my grid view fixed. It is doing good but the header overlapped with the first row and the size of the header is not the same with the whole grid view. how to fix that?

here is my CSS Selector:
.FixedHeader
{
position:absolute;
font-weight:bold;
}