none
Filtrar datos de un webgrid a medida que se va ingresando texto RRS feed

  • Pregunta

  • Hola, ¿cómo están? Quisiera saber si es posible vincular una caja de texto con un webgrid, de forma que a medida que el usuario ingrese texto, el webgrid vaya filtrando sus elementos, mostrando sólo los que coinciden con la cadena. Si es posible realizarlo, ¿serían tan amables de orientarne en el cómo, o de referirme a alguna documentación/ejemplo?

    Gracias, saludos!

    Laura.-

     

    martes, 12 de abril de 2011 23:18

Respuestas

Todas las respuestas

  • Si es posible, en el caso de web para dar la sensación de que mientas se escribe vaya refrescando el contenido deberías usar Ajax (o sea no hacer postback) con cada click se lanza la consulta que actualiza el resultado y recarga la grilla, hacerlo en webform es medio complicado, si te parece chino toodo lo que dije te va a costar sino puedo ir orientándote, hay posibilidad de usar MVC?
    martes, 31 de mayo de 2011 13:59
  • Dale un vistazo al AutoComplete de Jquery:http://docs.jquery.com/Plugins/autocomplete

     


    Javier Torrecilla
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi Blog: Jtorrecilla
    Enlace a Faq de Winforms en Ingles Muy bueno
    TabControl con Mejoras
    martes, 31 de mayo de 2011 14:15
  • Hola, antes que nada gracias por sus respuestas. Respondiendo a la pregunta de Leonardo efectivamente estoy trabajando con MVC (v3 y con razor). Por lo que estuve investigando llegué a la conclusión de que debía emplear ajax, y más específicamente pensé en la librería que sugiere jtorrecilla, el auto-complete  de jquery. 

    Pero como soy newbie (MUY newbie) en todo el mundo de ajax la verdad que no termino de entender como combinar eso con, por ejemplo, un webgrid o un table (y ni hablar de cuestiones como cómo elegir sobre que columna aplicar el autocompletar :S)

    Es por eso que les consultaba por si alguno conoce algún ejemplo, algún post o algún otro tipo de referencia donde se muestre o se explique cómo combinar este tipo de tecnologías (algo así cómo: qué debería hacer el método que va en el controller, como debería ser la llamada asincrónica, que tipo de controles podrían soportar este comportamiento... y demás cuestiones de ese estilo que seguramente se me están escapando)

    Saludos.

    Laura.-

    martes, 31 de mayo de 2011 19:48
  • En principio te recomiendo jquery para todo lo relacionado con Ajax, pero si lo que necesitás es que la grilla muestre los resultados mientras escribís autocomplete no te va a ser úlil porque el principio el msmo es en un textbox ir mostrando resultados como el autocomplete de yahoo por ejemplo, si con eso te alcanza es lo mejor, si necesitás una grilla completa los vas a tener que resolver haciendo una acción de un controlador que reciba el texto que se escribe y retorne el html de la grilla completo (hay otras opciones pero como primera aproximación está bien) y con jquery lo insertás dentro de un div, te hago un mini-ejemplo

    la vista home/index

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Index</title>
    <script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    //al iniciar se asocia cada click del textbox con un evento ajax
    $("#cajaTexto").keyup(actualizarGrilla);
    });

    function actualizarGrilla() {
    valorTexto = "data=" + $("#cajaTexto").val();
    $("#contenido").load("Home/Query", valorTexto);
    }

    </script>
    </head>
    <body>
    <div>
    <input type="text" id="cajaTexto" name="cajaTexto" />
    </div>
    <div id="contenido">
    </body>
    </html>

     

    el controller home

    public class HomeController : Controller
    {
    List<RenglonGrilla> _listadoHarcodeado = new List<RenglonGrilla>();

    public HomeController()
    {
    _listadoHarcodeado.Add(new RenglonGrilla() { Id = 1, Propiedad1 = "valor1", Propiedad2 = "a" });
    _listadoHarcodeado.Add(new RenglonGrilla() { Id = 1, Propiedad1 = "valor2", Propiedad2 = "ab" });
    _listadoHarcodeado.Add(new RenglonGrilla() { Id = 1, Propiedad1 = "valor3", Propiedad2 = "bb" });
    _listadoHarcodeado.Add(new RenglonGrilla() { Id = 1, Propiedad1 = "valor4", Propiedad2 = "bc" });
    _listadoHarcodeado.Add(new RenglonGrilla() { Id = 1, Propiedad1 = "valor5", Propiedad2 = "cc" });
    }

    public ActionResult Index()
    {
    return View();
    }


    public ActionResult Query(string data)
    {
    var resultadoConsulta = _listadoHarcodeado.Where(item => item.Propiedad2.Contains(data));
    return PartialView("grilla", resultadoConsulta);
    }

    }

     

    crea el tipo renglongrilla

    public class RenglonGrilla
    {
    public int Id { get; set; }
    public string Propiedad1 { get; set; }
    public string Propiedad2 { get; set; }
    }

    y la partial para el contenido de la grilla

     

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.Collections.Generic.IEnumerable<ejemploGrillaAutocomplete.Models.RenglonGrilla>>" %>
    <table border="1">
    <% foreach (var renglon in Model)
    {%>
    <tr>
    <td><%=renglon.Id%> </td>
    <td><%=renglon.Propiedad1%> </td>
    <td><%=renglon.Propiedad2%> </td>
    </tr>
    <%} %>
    </table>

     

    lo acabo de probar y funciona, es un acercamiento tiene mucho para mejorar (la vista no es razor) cualquier duda no temas en preguntar.

     

    saludos, Leonardo.

    martes, 31 de mayo de 2011 20:37
  • He encontrado un ejemplo que creo que te servirá: http://prokofyev.blogspot.com/2011/02/adding-row-filter-to.html
    Javier Torrecilla
    Para el correcto funcionamiento, y que otros usuarios se puedan beneficiar de la solucion de esta pregunta por favor marca las respuestas que te hayan ayudado como "Respuesta".
    Si la respuesta te ha sido util Votala.
    Mi Blog: Jtorrecilla
    Enlace a Faq de Winforms en Ingles Muy bueno
    TabControl con Mejoras
    miércoles, 1 de junio de 2011 6:40
  • Hola, de nuevo gracias a los dos por su interés. 

    Leonardo, agradezco el ejemplo y voy a probar. jtorrecilla, eso es justo lo que estaba buscando :D (y no tenía idea de que se podía hacer sin llamadas asincrónicas explícitas)

    Saludos!

    Laura

    miércoles, 1 de junio de 2011 13:42