Articles → ASP .NET GRIDVIEW → Freeze gridview header in asp.net

Freeze gridview header in asp.net








Click to Enlarge



-- Script for inserting 1000 records
declare @i as int

Set @i =1

while @i < 1000
begin
	Insert into Task Values(
	    'Task ' + cast(@i as varchar(10)), 
	     Getdate() + @i, 
	     'Person ' + cast(@i as varchar(10))
	)
	set @i = @i + 1
end



Add controls in the page




<asp:GridView ID="gvTest" runat="server" DataSourceID="source" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Title">
                    <ItemTemplate>
                        <asp:Label ID="lblTitle" runat="server" Text='<%#Eval("Title")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Deadline">
                    <ItemTemplate>
                        <asp:Label ID="lblDeadLine" runat="server" Text='<%#Eval("Deadline")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Assigned To">
                    <ItemTemplate>
                       <asp:Label ID="lblAssignedTo" runat="server" Text='<%#Eval("AssignedTo")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
<asp:SqlDataSource ID="source" runat="server" ConnectionString="conn_string"
        SelectCommand="Select * from Task"></asp:SqlDataSource>





Put gridview inside a div




<div style="height: 400px; overflow: scroll;">
<!—GRID VIEW -->
</div>






.HeaderStyle
{
            position: absolute;
}



Giving a final touch




<style type="text/css">
        .HeaderStyle
        {
            position: absolute;
            margin-top: -1px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        
    </style>
    <div style="height: 400px; overflow: scroll;">
        <asp:GridView ID="gvTest" runat="server" DataSourceID="source" AutoGenerateColumns="false"
            OnRowDataBound="gvTest_RDB" HeaderStyle-CssClass="HeaderStyle">
            <Columns>
                <asp:TemplateField HeaderText="Title" HeaderStyle-Width="200px" ItemStyle-Width="200px"
                    HeaderStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-BackColor="Aqua">
                    <ItemTemplate>
                        <asp:Label ID="lblTitle" runat="server" Text='<%#Eval("Title")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Deadline" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="129px" ItemStyle-Width="120px"
                    HeaderStyle-BackColor="Aqua">
                    <ItemTemplate>
                        <asp:Label ID="lblDeadLine" runat="server" Text='<%#Eval("Deadline")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Assigned To" HeaderStyle-Width="117px" ItemStyle-Width="120px"
                    HeaderStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Bottom" ItemStyle-CssClass="ItemStyle"
                    HeaderStyle-BackColor="Aqua">
                    <ItemTemplate>
                        <asp:Label ID="lblAssignedTo" runat="server" Text='<%#Eval("AssignedTo")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <asp:SqlDataSource ID="source" runat="server" ConnectionString="conn_string"
        SelectCommand="Select * from Task"></asp:SqlDataSource>




protected void gvTest_RDB(object sender, GridViewRowEventArgs e)
{
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (e.Row.RowIndex == 0)
                {
                    e.Row.Style.Add("height", "70px");
                }
            }          
}



Output



Click to Enlarge


Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, January 10, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250