Filtering the grid view using text box on header row

Question

1.00/5 (1 vote)

See more:

Hi,

i have created code which it is filtering the grid view by using text box inside the grid view. its working if i put the text box out side the Grid view and it filtering all rows and columns inside the grid together.

However, i want to filter a specific column in the grid view by using text box places on header row, it not working!!

the code:

in the text box which it is inside the grid view , i have created onkeyup function as bellow:

ASP.NET

<asp:TextBox ID="TextBoxName" runat="server" CssClass="sNamet" onkeyup='searchTable()' AutoPostBack="True" OnTextChanged="TextBoxName_TextChanged" Width="100px" Height="10"></asp:TextBox></td>

then after the grid view i have created the script as bellow :

JavaScript

<script>
                function searchTable() {
                    var input, filter, found, table, tr, td, i, j;
                    input = document.getElementById("content_body_textsearch123");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("content_body_ClientGridView");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++)
                    {
                        td = tr[i].getElementsByTagName("td");
                        for (j = 0; j < td.length; j++) {
                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                found = true;
                            }
                        }
                        if (found) {
                            tr[i].style.display = "";
                            found = false;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
</script>

how i make filtering grid view's specific column using the text box placed inside the grid view ?

What I have tried:

JavaScript

<script>
                function searchTable() {
                    var input, filter, found, table, tr, td, i, j;
                    input = document.getElementById("content_body_textsearch123");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("content_body_ClientGridView");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++)
                    {
                        td = tr[i].getElementsByTagName("td");
                        for (j = 0; j < td.length; j++) {
                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                found = true;
                            }
                        }
                        if (found) {
                            tr[i].style.display = "";
                            found = false;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
</script>

Posted 23-Mar-17 3:08am

Member 13078688

Updated 23-Mar-17 4:45am

Bryian Tan

v4

Add a Solution

Comments

Karthik_Mahalingam 23-Mar-17 9:49am

post the gridview mark up code

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-03-23T03:53:00

check this
Search GridView records (data) on Column TextBox KeyPress using jQuery in ASP.Net[^]

or try this
ASPX/HTML

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column1
                        <br />
                        <input type="text" id="Column1" onkeyup="searchTable(this,0)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column1") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column2<br />
                        <input type="text" id="Column2" onkeyup="searchTable(this,1)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column2") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column3<br />
                        <input type="text" id="Column3" onkeyup="searchTable(this,2)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column3") %>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Javascript

function searchTable(obj, index) {

           var filter = obj.value.toUpperCase();
           var grid = document.getElementById('<%= gv.ClientID%>');
           for (var i = 1; i < grid.rows.length; i++)
               grid.rows[i].style.display = grid.rows[i].cells[index].innerText.toUpperCase().indexOf(filter) > -1 ? '' : 'none';

       }

Code Behind c#

protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("Column1");
               dt.Columns.Add("Column2");
               dt.Columns.Add("Column3");
               dt.Rows.Add("apple", "ant", "animal");
               dt.Rows.Add("bat", "ball", "bull");
               dt.Rows.Add("cat", "call", "con");
               dt.Rows.Add("dog", "doll", "dice");
               gv.DataSource = dt;
               gv.DataBind();
           }
       }

Filtering the grid view using text box on header row

1 solution

Solution 1

Add your solution here

Preview 0

Filtering the grid view using text box on header row

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us