ASP.NET How to make TextBox width dependent on GridView column's width?

Question

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?

Answer 1

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>