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

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>

static header and scroll bar in grid view

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

static header and scroll bar in grid view

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us