Thursday, 11 June 2015

Static Header for Grid View asp.net


Step 1: Put the below code in Page_Load method

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + gvrecords.ClientID + "'); </script>", false); 



if (!IsPostBack)
{
//*** other codes are here ****
}


Step 2: Put the below code in aspx page


<script language="javascript" type="text/javascript">
        function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
            var tbl = document.getElementById(gridId);
            var height = 400;
            var width = 505;
            var headerHeight = 30;
            var isFooter = false;
            if (tbl) {
                var DivHR = document.getElementById('DivHeaderRow');
                var DivMC = document.getElementById('divGrid');

                //*** Set divheaderRow Properties ****
                DivHR.style.height = headerHeight + 'px';
                DivHR.style.width = (parseInt(width) - 16) + 'px';
                DivHR.style.position = 'relative';
                DivHR.style.top = '0px';
                DivHR.style.zIndex = '10';
                DivHR.style.verticalAlign = 'top';
                DivHR.style.left = '-8px';

                //*** Set divMainContent Properties ****
                DivMC.style.width = width + 'px';
                DivMC.style.height = height + 'px';
                DivMC.style.position = 'relative';
                DivMC.style.top = -headerHeight + 'px';
                DivMC.style.zIndex = '1';
                DivHR.appendChild(tbl.cloneNode(true));
            }
        }
  function OnScrollDiv(Scrollablediv) {
      document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft - 10;
  }
  </script>


<div style="overflow: hidden;" id="DivHeaderRow"></div>
<div id="divGrid" runat="server" style="overflow: scroll;" onscroll="OnScrollDiv(this)">
<asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="false"
GridLines="Both" AllowPaging="false" HeaderStyle-Height="25px">
<Columns>
......
</Columns>
</asp:GridView>
</div>