Fix Header Row of ASP.NET GridView

Question

Before getting in details, I would like to mention I've tried various solutions from stackoverflow and net too. But, none suitable in my scenario. So, I provided detailed information.

In an ASP.NET 2.0 Web Application, a gridview controls is used and columns of that gridview are generated at runtime with respect to user's settings. So, in Default.aspx the gridview definition is as below:

<div id="DivListB" runat="server" onscroll="SaveScrollValue(); SetListFloatingHeader()" visible="True">
<asp:GridView ID="ObjList" runat="server" OnLoad="ReloadGrid" CssClass="ObjList" AutoGenerateColumns="false" OnRowDataBound="ObjList_RowDataBound" AutoGenerateSelectButton="false" OnSelectedIndexChanged="ObjList_SelectedIndexChanged" OnRowCreated="ObjList_RowCreated">
    <Columns>
        <asp:TemplateField HeaderText="&nbsp" ItemStyle-Width="46px" ItemStyle-HorizontalAlign="Center">
            <HeaderTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkAll" runat="server" OnCheckedChanged="HeaderChk_Changed" /> 
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkRow" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "Selection")%>' OnCheckedChanged="ChkRow_OnCheckChange" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

The gridview columns are added at runtime and below method creates the columns depending upon user settings from web.config:

private void CreateDefaultGridView(Hashtable htPartSchema)
    {
        string sTempHeader, sTempAlignment, sTempWidth, sTempVisible;
        try
        {
            //get partlist settings section from web.config
            NameValueCollection plConfigKeys = (NameValueCollection)ConfigurationManager.GetSection("CONFIG_SETTINGS/PL_SETTINGS");
            //cond: check partlist config keys exist
            if (plConfigKeys != null && plConfigKeys.Count > 0)
            {
                //loop: every key present in configruation
                foreach (string key in plConfigKeys)
                {
                    //cond: config key is present in part schema
                    if (htPartSchema.ContainsKey(key.ToUpper()) == true)
                    {
                        //create new databound column                        
                        BoundField gridCol = new BoundField();
                        //assign datafield to bind with data table column
                        gridCol.DataField = key;
                        //get value from config key                
                        string sKeyValue = plConfigKeys[key].ToString();                         
                        try
                        {
                            string[] sTempArray = sKeyValue.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
                            sTempHeader = sTempArray[0];
                            sTempAlignment = sTempArray[1];
                            sTempWidth = sTempArray[2];
                            sTempVisible = sTempArray[3];
                            PLDefaultColumnHeaderAlignments.Add(sTempHeader, sTempAlignment);
                            PLDefaultColumHeaderWidths.Add(sTempHeader, sTempWidth);
                        }
                        catch
                        {
                            sTempHeader = string.Empty;
                            sTempAlignment = string.Empty;
                            sTempWidth = string.Empty;
                            sTempVisible = "false";
                        }
                        if (sTempVisible.ToLower().Equals("true"))
                        {
                            //assign display header text
                            gridCol.HeaderText = sTempHeader;
                            //add the column in the gridview
                            ObjList.Columns.Add(gridCol);

                            //cond: to check the specified alignment
                            if (sTempAlignment.ToUpper() == "L")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;        
                            }
                            else if (sTempAlignment.ToUpper() == "R")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
                            }
                            else if (sTempAlignment.ToUpper() == "C")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                            }
                            if (string.IsNullOrEmpty(sTempWidth) == false)
                            {
                                gridCol.ControlStyle.Width = Unit.Pixel(int.Parse(sTempWidth));
                                gridCol.HeaderStyle.Width = int.Parse(sTempWidth);

                                gridCol.HeaderStyle.Wrap = false;
                                gridCol.ItemStyle.Wrap = false;
                                gridCol.ItemStyle.Width = Unit.Pixel(int.Parse(sTempWidth));

                                //set column width
                                double dTempColWidth = 120;  //default value
                                double.TryParse(sTempWidth, out dTempColWidth);
                                //change width of grid view according to column sizes
                                ObjList.Width = new Unit((ObjList.Width.Value + dTempColWidth), UnitType.Pixel);                                   
                            }
                        }
                        gridCol.ItemStyle.Wrap = false;
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

And when rows are bounded with GridView few events and css are also applied at runtime in DataRowBound Event of GridView as mentioned below:

protected void ObjList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            int iDataRowsCounter = 0;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //get datatable from 
                DataTable dtList = (DataTable)Session["ListTable" + ViewState["ViewerId"]];

                //get position of the respective row
                string strPostion = dtList.Rows[e.Row.RowIndex]["Position"].ToString();
                string strLinkNum = dtList.Rows[e.Row.RowIndex]["LinkNumber"].ToString();
                //get row check box
                CheckBox cbRow = ((CheckBox)e.Row.FindControl("chkRow"));
                string pnum = dtList.Rows[e.Row.RowIndex]["PartNumber"].ToString();
                if (a_PartNumber != null && pnum == a_PartNumber)
                {
                    HighlightPic.Value = HighlightPic.Value + "||" + e.Row.RowIndex.ToString();
                    e.Row.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#3D98FF");
                    e.Row.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF");
                }
                //mouse hover effects on gridview (CSS)
                e.Row.Attributes.Add("onmouseover", "this.className='ObjListHighlight'");
                e.Row.Attributes.Add("onmouseout", "this.className='ObjListNormal'");
                //keep position of the row in case needed in javascript
                e.Row.Attributes.Add("RowPosition", strPostion);
                //on row checkbox check change of a single row
                cbRow.Attributes.Add("onclick", "OnRowCheckChange(this, 'ObjList')");
                //on full row click highlight picture 
                e.Row.Attributes.Add("onclick", "HighlightPicture('" + strPostion + "'," + e.Row.RowIndex + ", false)");
                //on row double click 
                e.Row.Attributes.Add("ondblclick", "OnRowDblClick(" + e.Row.RowIndex + ",'ObjList')");                              
            }
            else if (e.Row.RowType == DataControlRowType.Header)
            {
                //find header checkbox control
                CheckBox cbHeader = ((CheckBox)e.Row.FindControl("chkAll"));
                e.Row.Attributes.Add("class", "item_HeaderRow");
                e.Row.Cells[0].Attributes.Add("class", "item_HeaderCell");
                //add header change event on checkbox click
                cbHeader.Attributes.Add("onclick", "OnHeaderCheckChange(this,'ObjList')");                    
            }
        }
        catch
        {
            throw new Exception(ex.Message);
        }
    }

Its presentation is something like below: Respective css is as below:

    .ObjList
{
    height: auto;    
}
.ObjListHighlight
{
    background-color: #CAE4FF;
    cursor: pointer;
}
.ObjListNormal
{
    background-color: White;
    cursor: pointer;
}

.ObjList tr.row
{
    cursor: pointer;
    color: #1B3A7A;
    background-color: #FFFFFF;
}

.ObjList tr.row:hover
{
    background-color: #CAE4FF;
}

.ObjList tr.row_selected
{
    cursor: default;
    color: #FFFFFF;
    background-color: #3D98FF;
}

What I wanted to do is to fix the header row of that gridview. Solution can be in javascript or jQuery. Suggestions are appreciated.

Answer 1

Try this,

ASPX page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script src="gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            gridView1 = $('#gridtest').gridviewScroll({
                width: 600,
                height: 300,
                railcolor: "#F0F0F0",
                barcolor: "#CDCDCD",
                barhovercolor: "#606060",
                bgcolor: "#F0F0F0",
                freezesize: 1,
                arrowsize: 30,                
                headerrowcount: 1,
                railsize: 16,
                barsize: 8
            });
        }
    </script>
    <div style="width: 100%; height: 400px; overflow: scroll">
            <asp:GridView ID="gridtest" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="UserID" HeaderText="ID" SortExpression="UserID" ReadOnly="true" />
                    <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
                </Columns>
            </asp:GridView>
        </div>

CS page:

protected void Page_Load(object sender, EventArgs e)
    {
        gridtest.DataSource = getUserDetails();
        gridtest.DataBind();
    }
    public class details
    {
        public int UserID { get; set; }
        public string FirstName {get;set;}
    }
    public List<details> getUserDetails()
    {
        List<details> gt = new List<details>();
        for (int i = 1; i < 40; i++)
        {
            details objDetails = new details();
            objDetails.UserID = i;
            objDetails.FirstName = "test" + i;
            gt.Add(objDetails);
        }
        return gt;
    }

For reference use this : http://gridviewscroll.aspcity.idv.tw/

Answer 2

Your best bet would be to create two GridViews. One purely for the header. Second, for the body wrapped in a scrollable div just below the first one. Position the second gridview with a negative top margin to hide its header. This way you will use the header of the first girdview and scroll the second one.

Alternatively, you can use a plugin like this one: http://www.fixedheadertable.com

This plugin also uses the same logic as I described above.