Live Traffic Feed

Thursday, November 13, 2014

Searching multiple column value in repeater control using javascript without postback

Leave a Comment


Your ASPX page like below:
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="rpt" runat="server">
            <HeaderTemplate>
                <table>
                    <tr>
                        <th>
                            Name:
                        </th>
                        <th>
                            Mobileno
                        </th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("name") %>
                    </td>
                    <td>
                        <%#Eval("mobileno") %>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                <td>
                    <asp:TextBox runat="server" ID="txt" onkeyup="doSearch(this);"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox runat="server" ID="txta" onkeyup="doSearch(this);"></asp:TextBox>
                </td>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>



Java Script For Searching Repeater Control...
  //get  the index of specific column from grid
        function getColumnIndex(row, col) {
            var totalTds = row.getElementsByTagName("td").length;
            var index = "";
            for (i = 0; i < totalTds; i++) {
                if (col.parentNode.getElementsByTagName("td")[i].innerHTML == col.innerHTML) {
                    index = i; break;
                }
            }
            return index;
        }

        //To Search in repeater.. search textbox must be in footer in repeater.
        function doSearch(obj) {
            var col = obj.parentNode;
            var row = col.parentNode;
            var grd = col.parentNode.parentNode;
            if (obj.value != "") {
                var index = getColumnIndex(row, col);
                for (i = 1; i < grd.rows.length - 1; i++) {
                    if (grd.rows[i].cells[index].innerText.toLowerCase().indexOf(obj.value.toLowerCase()) >= 0)
                        grd.rows[i].style.display = "block";
                    else
                        grd.rows[i].style.display = "none";
                }
            }
            else {
                for (i = 1; i < grd.rows.length - 1; i++) {
                    grd.rows[i].style.display = "block";
                }
            }
        }


If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment