http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html
We need to alter the header's width as per we need using HeaderStyle-Width property
HTML Source
<form id="form1" runat="server"> <div> <asp:Panel ID="Panel1" runat="server" Height="200px" Width="200px" ScrollBars="Vertical"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" RowStyle-VerticalAlign="Bottom" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> <asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" /> </Columns> <HeaderStyle CssClass="header"Height="20px" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]"> </asp:SqlDataSource> </asp:Panel> </div></form>
CSS Code
<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">
.header
{
font-weight:bold;
position:absolute;
background-color:White;
}
</style>
</head>
Code Behind
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if(e.Row.RowIndex == 0)
e.Row.Style.Add("height","40px");
}
}
No comments:
Post a Comment