Skip to main content
2 de 5
gramatica

Filtrar automáticamente datos de un ListView con el plugin quicksearch después de usar un modalpopupextender

Estoy usando el plugin quicksearch para filtrar los datos de mi lista. Tengo un LinkButton para mostrar un popup y modificar la información. El filtro funciona siempre, el problema es cuando despliego el popup, el filtro se pierde y los datos de la lista vuelve a como estaba al inicio, como si no hubiera ingresado en la caja de texto el dato a filtrar y necesito que el quicksearch se ejecute nuevamente con el valor que se quedó ingresado después de cerrar el popup sin tener que volver a escribir sobre la caja de texto.

Busqué información al respecto, no sé hay algún conflicto debido al postback que se produce al desplegar el popup, no sé si también tiene algo que ver con el evento de la caja de texto ya que el plugin quicksearch filtra mientras se está escribiendo en la caja de texto. No entiendo mucho sobre esto. Si hay alguna forma de que cuando se cierre el popup, el filtro vuelva a ejecutarse automáticamente sin tener que volver a escribir sobre la caja de texto, si no con el valor que ya se ingresó anteriormente.

Este es el código de mi aspx:

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.quicksearch.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#"+"<%=filtro.ClientID%>").quicksearch("#datos tbody tr');
});
</script>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:TextBox runat="server" ID="filtro"></asp:TextBox>
    <br />
    <div>
        <table id="datos">
            <thead>
                <tr>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Direccion</th>
                    <th>Telefono</th>
                    <th>Email</th>
                    <th>Modificar</th>
                </tr>
            </thead>
            <tbody>
                <asp:ListView runat="server" ID="ListData">
                    <ItemTemplate>
                        <tr>
                            <td><%#Eval("Nombres") %></td>
                            <td><%#Eval("Apellidos") %></td>
                            <td><%#Eval("Direccion") %></td>
                            <td><%#Eval("Telefono") %></td>
                            <td><%#Eval("Email") %></td>
                            <td><asp:LinkButton ID="linkModificar" OnClick="linkModificar_Click" runat="server" CommandArgument='<%# Eval("Id")%>'></asp:LinkButton></td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </tbody>
        </table>
    </div>

    <asp:Label ID="lblHidden" runat="server"></asp:Label>
    <ajaxToolkit:ModalPopupExtender ID="mpePopUp" runat="server" TargetControlID="lblHidden" PopupControlID="divPopUp"></ajaxToolkit:ModalPopupExtender>

    <div id="divPopUp">
        <table>
            <caption>DETAIL</caption>
            <tr>
                <td><label>Nombres</label></td>
                <td><asp:TextBox ID="txtNombres" runat="server"></asp:TextBox></td>
            </tr>
             <tr>
                <td><label>Apellidos</label></td>
                <td><asp:TextBox ID="txtApellidos" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td><label>Dirección</label></td>
                <td><asp:TextBox ID="txtDireccion" runat="server"></asp:TextBox></td>
            </tr><tr>
                <td><label>Teléfono</label></td>
                <td><asp:TextBox ID="txtTelefono" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td><label>Email</label></td>
                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" />
                    <asp:Button ID="brnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </div>
</form>