Home > ASP.Net > Freez Gridview Header

Freez Gridview Header


Hi

try this example:

<%@ Page Language="C#" AutoEventWireup="true" %>

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

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .WrapperDiv {
            width:800px;height:400px;border: 1px solid black;
        }       
        .WrapperDiv TH {
            position:relative;
        }
        .WrapperDiv TR
        {
         /* Needed for IE */
            height:0px;
        }
    </style>
    <script>
        function onLoad()
        {
            FreezeGridViewHeader('GridView1','WrapperDiv');
        }   
       
       
        function FreezeGridViewHeader(gridID,wrapperDivCssClass)
        {
            /// <summary>
            ///   Used to create a fixed GridView header and allow scrolling
            /// </summary>
            /// <param name="gridID" type="String">
            ///   Client-side ID of the GridView control
            /// </param>
            /// <param name="wrapperDivCssClass" type="String">
            ///   CSS class to be applied to the GridView's wrapper div element. 
            ///   Class MUST specify the CSS height and width properties. 
            ///   Example: width:800px;height:400px;border:1px solid black;
            /// </param>
            var grid = document.getElementById(gridID);
            if (grid != 'undefined')
            {
                grid.style.visibility = 'hidden';
                var div = null;
                if (grid.parentNode != 'undefined')
                {
                    //Find wrapper div output by GridView
                    div = grid.parentNode;
                    if (div.tagName == "DIV")
                    {
                        div.className = wrapperDivCssClass; 
                        div.style.overflow = "auto";                  
                    }
                }               
                //Find DOM TBODY element and remove first TR tag from
                //it and add to a THEAD element instead so CSS styles
                //can be applied properly in both IE and FireFox
                var tags = grid.getElementsByTagName('TBODY');
                if (tags != 'undefined')
                {
                    var tbody = tags[0];
                    var trs = tbody.getElementsByTagName('TR');
                    var headerHeight = 8;
                    if (trs != 'undefined')
                    {
                        headerHeight += trs[0].offsetHeight;
                        var headTR = tbody.removeChild(trs[0]);
                        var head = document.createElement('THEAD');
                        head.appendChild(headTR);
                        grid.insertBefore(head, grid.firstChild);
                    }
                    //Needed for Firefox
                    tbody.style.height =
                      (div.offsetHeight -  headerHeight) + 'px';
                    tbody.style.overflowX = "hidden";
                    tbody.overflow = 'auto';
                    tbody.overflowX = 'hidden';
                }
                grid.style.visibility = 'visible';
            }
        }
    </script>

</head>
<body onload="onLoad();">
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" Style="visibility:hidden;" runat="server" AutoGenerateColumns="False" CellPadding="4"
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
            </Columns>
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="left" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address] FROM [Customers]">
        </asp:SqlDataSource>
   
    </div>
    </form>
</body>
</html>

Good Luck

Advertisements
Categories: ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: