Scrollable gridview with fixed headers and footer

Question

0.00/5 (No votes)

See more:

Hi Everybody,

I want Scrollable GridView with Fixed header and Footer for that purpose im using CSS class and call that Css class in GridView Header and footer also. But whats the problem is when i scroll down header is missing , when i scroll up footer is missing. But i want to fix header and footer and scrolling only DataRow objects . How to do this. Can any one give me some valueble suggestions out of this..

My code is look like below

CSS

<style type="text/css">.GVFixedHeader { font-weight:bold background-color: Green position:relative                  top:expression(this.parentNode.parentNode.parentNode.scrollTop-1)}.GVFixedFooter { font-weight:bold background-color: Green position:relative                 bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode))} </style>

JavaScript

<script language="javascript" type="text/javascript">    function getScrollBottom(p_oElem) {        return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight    }</script>

and call that Css class in Grid Header, Footer styles.

C#

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedFooter"/> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedHeader" />

Note: Place my grid inside Panel Control

Please find the attachments for better understanding..

Thanks in Advance...

[ scrollable]

[ scrollable]

Posted 5-Jul-13 19:38pm

Naveen.Sanagasetti

Add a Solution

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)

**Nirav Prabtani** · Answer 1 · 2013-07-05T19:40:00

Solution 1

Try this...:)

http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx[^]

if you want simple,

C#

<div style="overflow:auto; widht:100%; height:YourHeight">
<asp:gridview xmlns:asp="#unknown">
   .....
</asp:gridview>
</div>

Posted 5-Jul-13 19:40pm

Nirav Prabtani

Comments

Naveen.Sanagasetti 6-Jul-13 1:51am

Hi nirav,

good link but in that link they pass static columns. But i don't want to pass static columns i want to fetch columns from DataBase. Based on database values i want to display columns. But using that link how its possible..

Nirav Prabtani 6-Jul-13 2:01am

i have gave you that only for scrollable grid.
do you want binding of grid also???

Naveen.Sanagasetti 6-Jul-13 2:09am

no, in that link they are hide grid header and statically they pass grid columns using table. But i don't want to pass static columns i want to pass dynamic columns.
If i use this link i do some operations in my grid header that features also i missedout. That's the reason i'm asking..

Nirav Prabtani 6-Jul-13 2:12am

try this....this is telerik control but may be is useful for u..:)

http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx