How to Fix the GridView header using javascript in Asp.net?

Step 1:- (Default.aspx) Put the below javascript code in the head of HTML tag or ContentPlaceHolder head.

<script type="text/javascript">

        function Onscrollfnction() {

            var div = document.getElementById('divgrd')

            var div2 = document.getElementById('HeaderDiv')

            //****** Scrolling HeaderDiv along with DataDiv ******    

            div2.scrollLeft = div.scrollLeft

            return false;

        }

        function CreateGridHeader(divgrd, GridView, HeaderDiv) {

            var DataDivObj = document.getElementById(divgrd)

            var DataGridObj = document.getElementById(GridView)

            var HeaderDivObj = document.getElementById(HeaderDiv)

            var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'))

            if (DataGridObj != null) {

                DataDivObj.style.paddingTop = '0px'

                var DataDivWidth = DataDivObj.clientWidth

                DataDivObj.style.width = '2500px'

                HeaderDivObj.className = DataDivObj.className

                HeaderDivObj.style.cssText = DataDivObj.style.cssText

                HeaderDivObj.style.overflowX = 'hidden'

                HeaderDivObj.style.overflowY = 'hidden'

                HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 5 + 'px'

                HeaderDivObj.style.borderBottomWidth = '0px'

                HeadertableObj.className = DataGridObj.className

                HeadertableObj.style.cssText = DataGridObj.style.cssText

                HeadertableObj.border = '1px'; HeadertableObj.rules = 'all'

                HeadertableObj.cellPadding = DataGridObj.cellPadding

                HeadertableObj.cellSpacing = DataGridObj.cellSpacing

                var Row = HeadertableObj.insertRow(0)

                Row.className = DataGridObj.rows[0].className

                Row.style.cssText = DataGridObj.rows[0].style.cssText

                Row.style.fontWeight = 'bold'

                Row.style.textAlign = 'center'

                Row.style.fontSize = '11px'

                Row.style.height = '40px'

                Row.style.color = '#ffffff'

                Row.style.backgroundColor = '#0082BF'

                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

        }

    </script>

Step 2:-(Default.aspx) Put the GridView inside the div tag.

<div id="HeaderDiv"></div>

<div id="divgrd" style="overflow: auto; border: 1px solid olive; width: 100%; height: 350px;" onscroll="Onscrollfnction()">

  <asp:GridView ID="GridView1" runat="server">

             <%-- Bind Your Column Here--%>

  </asp:GridView>

</div>

Step 3:-(Default.aspx.cs) Put the below line in Page_Load event to Call the javascript CreateGridHeader() function using ClientScript.RegisterStartupScript() function.

protected void Page_Load(object sender, EventArgs e)

{

ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('divgrd', '" + GridView1.ClientID + "', 'HeaderDiv');</script>");

}

Step 4:- Complete Code (Default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridViewDemo.FixGridHeader" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function Onscrollfnction() {

            var div = document.getElementById('divgrd')

            var div2 = document.getElementById('HeaderDiv')

            //****** Scrolling HeaderDiv along with DataDiv ******    

            div2.scrollLeft = div.scrollLeft

            return false;

        }

        function CreateGridHeader(divgrd, GridView, HeaderDiv) {

            var DataDivObj = document.getElementById(divgrd)

            var DataGridObj = document.getElementById(GridView)

            var HeaderDivObj = document.getElementById(HeaderDiv)

            var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'))

            if (DataGridObj != null) {

                DataDivObj.style.paddingTop = '0px'

                var DataDivWidth = DataDivObj.clientWidth

                DataDivObj.style.width = '2500px'

                HeaderDivObj.className = DataDivObj.className

                HeaderDivObj.style.cssText = DataDivObj.style.cssText

                HeaderDivObj.style.overflowX = 'hidden'

                HeaderDivObj.style.overflowY = 'hidden'

                HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 5 + 'px'

                HeaderDivObj.style.borderBottomWidth = '0px'

                HeadertableObj.className = DataGridObj.className

                HeadertableObj.style.cssText = DataGridObj.style.cssText

                HeadertableObj.border = '1px'; HeadertableObj.rules = 'all'

                HeadertableObj.cellPadding = DataGridObj.cellPadding

                HeadertableObj.cellSpacing = DataGridObj.cellSpacing

                var Row = HeadertableObj.insertRow(0)

                Row.className = DataGridObj.rows[0].className

                Row.style.cssText = DataGridObj.rows[0].style.cssText

                Row.style.fontWeight = 'bold'

                Row.style.textAlign = 'center'

                Row.style.fontSize = '11px'

                Row.style.height = '40px'

                Row.style.color = '#ffffff'

                Row.style.backgroundColor = '#0082BF'

                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

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="HeaderDiv"></div>

        <div id="divgrd" style="overflow: auto; border: 1px solid olive; width: 100%; height: 350px;" onscroll="Onscrollfnction()">

            <asp:GridView ID="GridView1" runat="server" PageSize="5" CellPadding="4" GridLines="Both">

            </asp:GridView>

        </div>

    </form>

</body>

</html>

Step 5:- Complete Code (Default.aspx.cs)

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace GridViewDemo

{

    public partial class FixGridHeader : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            BindDataToGridView();

            ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('divgrd', '" + GridView1.ClientID + "', 'HeaderDiv');</script>");

        }

        protected void BindDataToGridView()

        {

            DataTable dt = new DataTable();

            DataRow dr = null;

            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

            dt.Columns.Add(new DataColumn("Column1", typeof(string)));

            dt.Columns.Add(new DataColumn("Column2", typeof(string)));

            dt.Columns.Add(new DataColumn("Column3", typeof(string)));

            int totalRow=50;

            for (int i = 0; i < totalRow; i++)

            {

                dr = dt.NewRow();

                dr["RowNumber"] = i + 1;

                dr["Column1"] = "Row" + i;

                dr["Column2"] = "Row" + i;

                dr["Column3"] = "Row" + i;

                dt.Rows.Add(dr);

            }

            GridView1.DataSource = dt;

            GridView1.DataBind();

        }

    }

}

Note :-

Make sure that Page Load code i.e. 

ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('divgrd', '" + GridView1.ClientID + "', 'HeaderDiv');</script>");

Always put outside of Page postback to call each time CreateGridHeader() function during page postback.