Filtering gridview with textbox in header

Question

Soo I'm trying to filter my gridview with textboxes in the header. I created a textchanged method for every textbox. Now I want to filter the gridview and bind the filtered data. For some reason the datasource is null once it hits the textchanged method. See my code below:

<asp:GridView ID="GridView_Imported" runat="server" CssClass="GridView-Upload" Width="100%" OnRowDataBound="GridView_Imported_RowDataBound" HorizontalAlign="Center" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="checkAll" runat="server" CssClass="checkAll" onclick="checkAll(this);" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkCtrl" runat="server" CssClass="chkCtrl" onclick="Check_Click(this)" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField AccessibleHeaderText="filter">
                    <HeaderTemplate>
                        <asp:Label ID="lbArticleName" runat="server" Text="Article-Name:" CssClass="Article-Name-Label"></asp:Label>
                        <br/>
                        <asp:TextBox ID="tbFilterArticleName" runat="server" placeholder="Filter..." OnTextChanged="tbFilterArticleName_TextChanged" AutoPostBack="True"></asp:TextBox>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ArticleNameText" runat="server" Text='<%# Eval("Article-Name") %>'></asp:Label>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>

                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="lbArticle" runat="server" Text="Article:" CssClass="Article-Label"></asp:Label>
                        <br/>
                        <asp:TextBox ID="tbFilterArticle" runat="server" placeholder="Filter..." OnTextChanged="tbFilterArticle_TextChanged" AutoPostBack="True"></asp:TextBox>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lbArticleText" runat="server" Text='<%# Eval("Article") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="lbWarehouse" runat="server" Text="Warehouse:" CssClass="Warehouse-Label"></asp:Label>
                        <br/>
                        <asp:TextBox ID="tbFilterWarehouse" runat="server" placeholder="Filter..." OnTextChanged="tbFilterWarehouse_TextChanged" AutoPostBack="True"></asp:TextBox>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lbWarehouseText" runat="server" Text='<%# Eval("Warehouse") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:Label ID="lbLocation" runat="server" Text="Location:" CssClass="Location-Label"></asp:Label>
                        <br/>
                        <asp:TextBox ID="tbFilterLocation" runat="server" placeholder="Filter..." OnTextChanged="tbFilterLocation_TextChanged" AutoPostBack="True"></asp:TextBox>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lbLocationText" runat="server" Text='<%# Eval("Location") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>

            <HeaderStyle HorizontalAlign="Center" />
            <RowStyle HorizontalAlign="Center" />

        </asp:GridView>

        protected void tbFilterArticleName_TextChanged(object sender, EventArgs e)
        {
            var tb = (TextBox) sender as TextBox;

            GridView_Imported.DataSource = (Session["dataSource"] as DataTable).DefaultView.RowFilter = string.Format("Article-Name LIKE '%{0}%'", tb.Text.Trim());


            GridView_Imported.DataBind();
        }

What I'm missing?

Answer 1

There are two errors in your code.

First put brackets for column name Article-Name as [Article-Name].

Second the way you assigning datasource to gridview. See the correct way below.

        var dt = (Session["dataSource"] as DataTable);
        dt.DefaultView.RowFilter = string.Format("[Article-Name] LIKE '%{0}%'", tb.Text.Trim());
        GridView_Imported.DataSource = dt;
        GridView_Imported.DataBind();

Answer 2

Use http://www.datatables.net/

It provides data filtering, sorting, paging etc.

Just place a html table header above your gridview with some id

<HeaderTemplate>
  <table id="tblData" border="0" cellpadding="5" cellspacing="1" width="100%">
    <thead>
       <th align="center" width="3%">S.No.&nbsp;
       </th>
       <th align="center" width="10%">RFQ ID &nbsp;
       </th>
    </thead>
</HeaderTemplate>

Add add jquery script

$(document).ready(function () {
    $('#tblData').DataTable();
});

Answer 3

First, in RowDataBound event of your gridview(to find your textbox):

    System.Web.UI.WebControls.TextBox tbFilterArticle;
    protected void GridView_Imported_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (GridView_Imported.HeaderRow != null)
        {
            tbFilterArticle = (System.Web.UI.WebControls.TextBox)GridView_Imported.HeaderRow.FindControl("tbSearchUser");
        }
    }

After that, to use it's value(anywhere you want, i used it into a button click event):

string article = tbFilterArticle.Text;