How to make fixed header in gridView inside asp:panel?
-
Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks
<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
<asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
AutoGenerateColumns="False" >
<EditRowStyle BackColor="skyblue" />
<HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
<RowStyle Height="20px" VerticalAlign="Middle" />
<FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
<Columns>
<asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
<asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
<asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
<asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
</Columns>
</asp:GridView>
</asp:Panel>Follow your goals, Means will follow you ---Gandhi---
-
Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks
<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
<asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
AutoGenerateColumns="False" >
<EditRowStyle BackColor="skyblue" />
<HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
<RowStyle Height="20px" VerticalAlign="Middle" />
<FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
<Columns>
<asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
<asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
<asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
<asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
</Columns>
</asp:GridView>
</asp:Panel>Follow your goals, Means will follow you ---Gandhi---
-
Hi I ran into a strange issue. I am able to put gridview inside asp:panel and scrolling works too. But the moment I down, the header of gridView scrolls above inside the panel and gets hidden. I just want to scroll rows, not the header. How can I do that? Please advise. Following is what I am using. On a side note, I have tried to wrap gridView in DIV but div doesn’t show the scroll bars in the first load for some reason. Thanks
<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="200" Width="60%">
<asp:GridView ID="GvBidLists" AllowSorting="true" AllowPaging="false" runat="server"
AutoGenerateEditButton="true" DataKeyNames="ListId" EmptyDataText="No data available."
AutoGenerateColumns="False" >
<EditRowStyle BackColor="skyblue" />
<HeaderStyle BackColor="LightSteelBlue" ForeColor="#0000C0" Height="20px" HorizontalAlign="Center" />
<RowStyle Height="20px" VerticalAlign="Middle" />
<FooterStyle BorderColor="White" Height="20px" HorizontalAlign="Center" />
<Columns>
<asp:BoundField HeaderText="ListId" DataField="ListId" SortExpression="ListId" />
<asp:BoundField HeaderText="ListName" DataField="ListName" SortExpression="ListName" />
<asp:BoundField HeaderText="ProductTypeName" DataField="ProductTypeName" SortExpression="ProductTypeName" />
<asp:BoundField HeaderText="Size" DataField="Size" SortExpression="Size" />
</Columns>
</asp:GridView>
</asp:Panel>Follow your goals, Means will follow you ---Gandhi---
Try: Step 1 : Create a CSS class as following
.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}Step 2 Set Gridview’s HeaderStyle CssClass as
CssClass="HeaderFreez"
-
Yusuf wrote:
have you seen this?[^].
Have you seen the solution given there? There is nothing that would freeze a grid header in that css.
-
Yusuf wrote:
have you seen this?[^].
Have you seen the solution given there? There is nothing that would freeze a grid header in that css.
No I did not try that example. Nor did I made any claim as far as it working. If you see the second link it was to LMGTFY.
Yusuf May I help you?
-
No I did not try that example. Nor did I made any claim as far as it working. If you see the second link it was to LMGTFY.
Yusuf May I help you?
Yep... got that... was sort of a FYI to you!