static header and scroll bar in grid view

Question

0.00/5 (No votes)

See more:

Hi friends.

I need to set static header and scroll bar in grid view.

i set the statis header and scroll bar.

but in bottom align ment not match with header.

please do needful.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title></title>
    <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>
</head>
<body>
    <form id="form1"  runat="server">
    <div>
    <input id="scrollPos"  runat="server" type="hidden" value="0" />
    <asp:Panel ID="panel1" ScrollBars="Auto" Height="150px" Width="600" runat=server >
    <%--
 <div id="divdatagrid1" style="width: 85%; overflow:scroll; height: 202px;">
             önscroll='javascript:setScroll(this, <% =scrollPos.ClientID %> );'>--%>
          <script language="javascript" type="text/javascript">
    function getScrollBottom(p_oElem) {
        return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
    }
    
    </script>
    <asp:GridView ID="GridView1" Width="96%"   runat="server">
    <HeaderStyle CssClass="GVFixedHeader" />

  </div>
    </form>
</body>
</html></div>

Posted 24-Apr-12 20:12pm

Arul R Ece

Updated 24-Apr-12 20:21pm

sravani.v

v3

Add a Solution

2 solutions

Solution 1

See this link

http://www.dotnetspider.com/resources/43613-Scrollable-Gridview-with-Fixed-Header.aspx[^]

Posted 24-Apr-12 20:26pm

gqadirshabbir

Comments

baluclick 24-May-12 2:16am

This code perfectly working in a single page.
But my requirement is grid view in a web content form
java script in individual file.
that java script call in master page.
now its not working.

How can i ?

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)

Arul R Ece · Accepted Answer · 2012-04-24T21:14:00

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
      <script language="javascript" type="text/javascript">
          function CreateGridHeader(DataDiv, GridView1, HeaderDiv) {
              var DataDivObj = document.getElementById(DataDiv);
              var DataGridObj = document.getElementById(GridView1);
              var HeaderDivObj = document.getElementById(HeaderDiv);

              //********* Creating new table which contains the header row ***********
              var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));

              DataDivObj.style.paddingTop = '0px';
              var DataDivWidth = DataDivObj.clientWidth;
              DataDivObj.style.width = '5000px';

              //********** Setting the style of Header Div as per the Data Div ************
              HeaderDivObj.className = DataDivObj.className;
              HeaderDivObj.style.cssText = DataDivObj.style.cssText;
              //**** Making the Header Div scrollable. *****
              HeaderDivObj.style.overflow = 'auto';
              //*** Hiding the horizontal scroll bar of Header Div ****
              HeaderDivObj.style.overflowX = 'hidden';
              //**** Hiding the vertical scroll bar of Header Div ****
              HeaderDivObj.style.overflowY = 'hidden';
              HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
              //**** Removing any border between Header Div and Data Div ****
              HeaderDivObj.style.borderBottomWidth = '0px';

              //********** Setting the style of Header Table as per the GridView ************
              HeadertableObj.className = DataGridObj.className;
              //**** Setting the Headertable css text as per the GridView css text
              HeadertableObj.style.cssText = DataGridObj.style.cssText;
              HeadertableObj.border = '1px';
              HeadertableObj.rules = 'all';
              HeadertableObj.cellPadding = DataGridObj.cellPadding;
              HeadertableObj.cellSpacing = DataGridObj.cellSpacing;

              //********** Creating the new header row **********
              var Row = HeadertableObj.insertRow(0);
              Row.className = DataGridObj.rows[0].className;
              Row.style.cssText = DataGridObj.rows[0].style.cssText;
              Row.style.fontWeight = 'bold';

              //******** This loop will create each header cell *********
              for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) {
                  var spanTag = Row.appendChild(document.createElement('td'));
                  spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
                  var width = 0;
                  //****** Setting the width of Header Cell **********
                  if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
                      width = spanTag.clientWidth;
                  }
                  else {
                      width = DataGridObj.rows[1].cells[iCntr].clientWidth;
                  }
                  if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
                      spanTag.style.width = width + 'px';
                  }
                  else {
                      spanTag.style.width = width + 20 + 'px';
                  }
                  DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
              }
              var tableWidth = DataGridObj.clientWidth;
              //********* Hidding the original header of GridView *******
              DataGridObj.rows[0].style.display = 'none';
              //********* Setting the same width of all the componets **********
              HeaderDivObj.style.width = DataDivWidth + 'px';
              DataDivObj.style.width = DataDivWidth + 'px';
              DataGridObj.style.width = tableWidth + 'px';
              HeadertableObj.style.width = tableWidth + 20 + 'px';
              return false;
          }

          function Onscrollfnction() {
              var div = document.getElementById('DataDiv');
              var div2 = document.getElementById('HeaderDiv');
              //****** Scrolling HeaderDiv along with DataDiv ******
              div2.scrollLeft = div.scrollLeft;
              return false;
          }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="panel" runat=server >
      <div>
            <%--Div contains the new header of the GridView--%>
            <div id="HeaderDiv">
            </div>
            <%--Wrapper Div which will scroll the GridView--%>
            <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 600px; height: 300px;" onscroll="Onscrollfnction();">
                <asp:GridView ID="GridView1"   AllowPaging="true" runat="server"
                    AutoGenerateColumns="true" CellPadding="6" CssClass="GridViewStyle"
                    onpageindexchanging="GridView1_PageIndexChanging">
                    <HeaderStyle  CssClass="GridViewHeaderStyle" />
                </asp:GridView>
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>