How to filter any item from gridview using javascript

Question

I want to filter data from the below gridview. There is a textbox. I want to filter the Product code field by the value from the Textbox without post-back. Can anyone tell me what will be the java-script function will be?

<td>


    <asp:TextBox ID="TextBox1" runat="server" Width="362px"></asp:TextBox>


</td>

<td align="left" width="100%">
    <asp:datagrid id="Datagrid1" runat="server" Height="128px" Width="946px"
        CellPadding="0" AutoGenerateColumns="False" BackColor="Transparent" BorderWidth="1px" 
        BorderColor="#E0E0E0" OnItemDataBound = " grdItemList_ItemDataBound">
        <AlternatingItemStyle CssClass="GridAlternateRowStyle"></AlternatingItemStyle>
        <ItemStyle CssClass="GridRowStyle"></ItemStyle>
        <HeaderStyle Font-Bold="True" CssClass="GridColumnHeaderStyle"></HeaderStyle>
        <FooterStyle HorizontalAlign="Right" VerticalAlign="Middle"></FooterStyle>
        <Columns>
            <asp:TemplateColumn>
                <HeaderStyle Width="25px"></HeaderStyle>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckAll" language="javascript" onclick="return CheckAll_onclick(this.checked)"
                        Runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="DeleteThis" language="javascript" onclick="return DeleteThis_onclick(this.checked)"
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:TemplateColumn>
                <HeaderStyle Width="100px"></HeaderStyle>
                <HeaderTemplate>
                    Product Code
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="Code" Text='<%# DataBinder.Eval (Container.DataItem, "PRODUCTCODE") %>' runat="server" OnClick = "EditItem"/>
                </ItemTemplate>
            </asp:TemplateColumn>
            <asp:BoundColumn HeaderText="Product ID" DataField="PRODUCTID" Visible = 'False'></asp:BoundColumn>
            <asp:BoundColumn HeaderText="Product Name" DataField="PRODUCTNAME"></asp:BoundColumn>
            <asp:BoundColumn HeaderText="Price" DataField="PRICE"></asp:BoundColumn>
            <asp:BoundColumn HeaderText="Date" DataField="PURDATE"></asp:BoundColumn>
        </Columns>
        <PagerStyle NextPageText="" PrevPageText="" Mode="NumericPages"></PagerStyle>
    </asp:datagrid>
</td>

You need to implement Ajax, since you are using dot net you can put ajax update panel, and cut and then paste the text box and grid view inside it, then use a button inside the panel or the text boxe's text change event to filter the grid programatically. — Usman Waheed
– Usman Waheed, Commented Jan 8, 2014 at 4:21
Consider using knockout.js as well, which has nice ways of implementing this kind of client-side filtering. — sh1rts
– sh1rts, Commented Jan 8, 2014 at 5:04
i have a no idea about ajax. Does ajax Browser independent? if i want to implement ajax then what will be the prerequisites? @Usman Waheed — rafat
– rafat, Commented Jan 8, 2014 at 5:33

rafat · Accepted Answer · 2014-01-08 06:30:08Z

i have added this javascript function and that works properly.

<script type="text/javascript" charset="utf-8">

        function filter(term, _id, cellNr) {
            var suche = term.value.toLowerCase();
            var table = document.getElementById(_id);
            var ele;
            for (var r = 1; r < table.rows.length; r++) {
                ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g, "");
                if (ele.toLowerCase().indexOf(suche) >= 0)
                    table.rows[r].style.display = '';
                else table.rows[r].style.display = 'none';
            }
        }
</script>


    Filter:<input type="text" id="FilterTextBox" name="FilterTextBox" onkeyup="filter(this, 'Datagrid1', 0)"/>

then the gridview was edited like---

<td align="left" width="100%">
            <asp:datagrid id="Datagrid1" runat="server" Height="128px" Width="946px"
               CellPadding="0" AutoGenerateColumns="False" BackColor="Transparent" BorderWidth="1px" 
              BorderColor="#E0E0E0" OnItemDataBound = " grdItemList_ItemDataBound" AllowSorting="true">

Collectives™ on Stack Overflow

How to filter any item from gridview using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related