Scrollable GridView With Fixed Headers Asp.Net
how to create scrollable GridView with fixed headers which don't get scrolled with records and stay on the top in asp.net using css
Html Source :
how to create scrollable GridView with fixed headers which don't get scrolled with records and stay on the top in asp.net using css
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 [EmployeeID], [EmployeeName], [EmployeeLocation] FROM [EMPDetails]"> </asp:SqlDataSource> </asp:Panel> </div> </form>
css style in the head section
<head runat="server">
<title>Dotnetinfomedia scrollable GridView with fixed headers</title>
<style type="text/css">
.header
{
font-weight:bold;
position:absolute;
background-color:White;
}
</style>
</head>
Place the code in Gridview RowData Bound
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");
}
}
Happy coading !! Byhttp://dotnetinfomedia.blogspot.com/
No comments:
Post a Comment