Reputation:
I need to make filters on table (GridView), on the top of each column should appear "TextBox" to enter filter values. GridView width is not fixed, column's width always changing depending on results. How to make that TextBox width on top of columns auto changed when GridView's columns width changing?
As you see in image, there are 3 columns. White - TextBoxes (for filtering data), yellow - GridView
This is my current code:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="InsertName" runat="server" width="130px" placeholder="Name Filter..."></asp:TextBox>
<asp:TextBox ID="InsertEmail" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
<asp:TextBox ID="InsertCountry" runat="server" width="130px" placeholder="Domain Filter..."></asp:TextBox>
<br />
<br />
</div>
<asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
</asp:GridView>
</form>
Here I set fixed widths for each TextBox and for GridView. But here is problem, GridView have fixed width as I wrote width="390px"
, but columns width always changing. Have you ideas?
Upvotes: 0
Views: 2402
Reputation: 10567
You cannot accomplish this in the current HTML markup since the DIV
containing the text boxes is unaware of the GridView resizing.
Instead, you could use a HeaderTemplate
inside a TemplateField
like this (with a 100% text box width):
<asp:GridView ID="GridView1" runat="server" BackColor="#FFFFB3" width="390px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
...
<asp:TemplateField HeaderText="Name">
<HeaderTemplate>
<asp:TextBox ID="InsertName" runat="server" width="100%" placeholder="Name Filter..."></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:TemplateField>
...
</Columns>
</asp:GridView>
Upvotes: 1