none
Filtrar linhas de um gridView com jquery RRS feed

  • Pergunta

  • Pessoal, gostaria de saber se vocês poderiam me ajudar em uma duvida que eu estou tendo, a questão é a seguinte eu tenho em meu projeto uma tela onde exibe a lista de alunos que estão cadastrados no banco de dados, uma vez que a página é carregada o meu gridView e preenchido com a lista de todos os alunos, porém para ficar algo mais agradável para o usuário eu coloquei um PageSize, filtrando 10 registros apenas por páginas do meu gridView. Na minha página também possui um TextBox onde o usuário pode fazer ali uma busca em todos os registros do banco. Eu tenho como intenção que a cada letra que o usuário digite seja realizado um filtro no meu gridView listando os nomes que possui aqueles caracteres digitados pelo usuário, para não sobrecarregar o trafico de informações no meu banco de dados resolvi fazer esse filtro utilizando jquery, eu fiz um busca na internet e encontrei um exemplo feito pelo Macoratti (http://www.macoratti.net/11/08/jq_fgvfd.htm) eu fiz o teste em meu projeto e funcionou quase que "perfeito" pois o filtro é aplicado apenas na página que está ativa no momento e não em toda a minha gridView, alguém poderia me dar uma força, como faço para usar desse recurso em todo a minha gridView.

    Segue abaixo algumas imagens para ilustrar melhor o que eu estou querendo fazer.

    Fico no aguardo, se vocês poderem me ajudar eu agradeço muito.

    Atenciosamente

    Anderson Santos

     
    sábado, 14 de setembro de 2013 15:08

Respostas

  • Eu consegui fazer o foco no campo novamente dessa maneira.

        function setSelectionRange(input, selectionStart, selectionEnd) {
            if (input.setSelectionRange) {
                input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            }
            else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
        }
    
        function setCaretToPos(input, pos) {
            setSelectionRange(input, pos, pos);
        }

    e chamando no meu código dessa maneira

    setCaretToPos(document.getElementById("txtBuscaAlunos"), 50);

    E no caso a minha busca na base de dados estou fazendo através do meu evento TextChanged obrigado pela ajuda de todos que colaboraram comigo.

    Atenciosamente

    Anderson

    • Marcado como Resposta J.AndersonSantos quarta-feira, 25 de setembro de 2013 02:12
    quarta-feira, 25 de setembro de 2013 02:11

Todas as Respostas

  • Pessoal estou precisando muito filtrar os dados no meu gridView alguém poderia me ajudar???
    terça-feira, 17 de setembro de 2013 00:12
  • Ola J Anderson, utilizando JQUery você pode acessar seu metodo em C#, ou pode criar um web service, ai fica de sua escolha basta criar um método e acessá-lo ou acessar um web service com JQUery e coloque como parâmetro o texto digitado no textbox segue exemplo de como usar metodo C# com JQUery :

    //seu JQuery 
    <script type="text/javascript">
       $(document).ready(function() {
         $.ajax({
           type: "POST",
           url: "Default.aspx/MeuMetodo",
           data: "{}",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function(msg) {
           $("#resultado").text(msg.d);
           }
            });
          });
        });
    });
    </script>
    

    Segue link com um otimo exemplo e a fonte :

    http://matheuscalache.blogspot.com.br/2009/12/jquery-ajax-chamando-metodo-c-do-lado.html

    Se for util marque...

    • Sugerido como Resposta Giovani Cr sexta-feira, 20 de setembro de 2013 12:32
    • Marcado como Resposta Giovani Cr sexta-feira, 20 de setembro de 2013 20:44
    • Não Marcado como Resposta J.AndersonSantos domingo, 22 de setembro de 2013 15:26
    terça-feira, 17 de setembro de 2013 01:50
  • Então Daniel eu tentei de muitas formas utilizar a sua sugestão porém eu não consegui, caso você pudesse postar um exemplo para a minha situação eu ficaria muito grato.

    Segue abaixo novamente a minha duvida:

    Gostaria de realizar um filtro ou uma pesquisa no meu gridView toda a vez que o usuário digitasse uma letra no campo de pesquisa, fiz algumas busca na internet e encontrei alguns plugin em jquery ou javascript que os mesmo realizava apenas um filtro no meu gridView sem ter a necessidade de realizar uma busca na minha base de dados todas as vezes que o usuário digitasse um novo caracter, assim não sobrecarregando o trafego que informações no meu banco, porém todas essas soluções funcionam bem mais com um pequeno grande problema ele realiza esse filtro apenas na pagina que está aberta no meu gridView, ou seja quando eu uso paginação no meu gridView ele funciona apenas na primeira página e não nas demais. Como eu faria para essas funções realizar o filtro em todo o meu gridView? Essa seria a minha grande duvida.  

    domingo, 22 de setembro de 2013 14:01
  • Ola Anderdos, então você tem que acessar sua base para este filtro, por que como seu grid e por paginação irá acontecer isso mesmo que você disse. Sugiro usar este codigo que lhe passei, quando o usuario digitar você chama este seu metodo via JQuery, ou cria um WebService com parametro do que o usuario irá digitar.Sendo que assim seu grid será populado novamente com os dados vindos diretamente do BD e não de sua unica tela qualquer duvida avise mas tente assim que funciona.

    Se for util marque...

    domingo, 22 de setembro de 2013 22:20
  • Daniel eu resolvi fazer de uma maneira ao qual eu já tinha encontrado na internet, como você me sugeriu que eu teria que fazer um filtro direto na minha base de dados eu pensei que assim fosse melhor. No caso a minha busca no banco de dados e a atualização do meu gridView estou fazendo através do método TextChanged e esto usando também de uma função em jquey segue abaixo.

    $(document).ready(function () {
      $("#txtBuscaAlunos").keyup(function () {
          __doPostBack('Alunos', '');
      })
    });


    Porém estou com um grande problema ainda, pois eu preciso que após o PostBack realizado pela minha função jquey o meu cursos permaneça no campo de busca para que o usuário possa digitar a próxima letra. Na minha página eu tenho mais de um UpdatePanel e como essa minha gridView está dentro de uma aba e não posso permitir que o PostBack seja completo por isso que faço apenas no UpdatePanel Alunos, porém o foco não fica no campo de busca. Fiz outra busca na Internet e achei esse exemplo de como direcionar o focus para um elemento em especifico depois de um PostBack porém ele seleciona o texto que já foi digitado apagando quando se digita outra letra. Segue abaixo o exemplo encontrado.

    var ID;
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    $("#txtBuscaAlunos").live("focus", function () {
        ID = $(this).attr('id');
    });
    
    function EndRequestHandler(sender, args) {
        $('#' + ID).focus();
    }

    Gostaria de saber apenas como faço para manter o meu cursor possibilitando que o usuário continue digitando o valor ao qual deseja fazer a sua busca.

    Se você puder me ajudar agradeço muito.

     
    terça-feira, 24 de setembro de 2013 00:58
  • Veja um ex

    http://manish4dotnet.blogspot.com.br/2013/07/how-to-search-records-or-data-in.html


    Não esqueça de usar o componente </> na barra para posta seu código. Microsoft MCPD,MCTS,MCC

    terça-feira, 24 de setembro de 2013 14:17
    Moderador
  • Eu consegui fazer o foco no campo novamente dessa maneira.

        function setSelectionRange(input, selectionStart, selectionEnd) {
            if (input.setSelectionRange) {
                input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            }
            else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
        }
    
        function setCaretToPos(input, pos) {
            setSelectionRange(input, pos, pos);
        }

    e chamando no meu código dessa maneira

    setCaretToPos(document.getElementById("txtBuscaAlunos"), 50);

    E no caso a minha busca na base de dados estou fazendo através do meu evento TextChanged obrigado pela ajuda de todos que colaboraram comigo.

    Atenciosamente

    Anderson

    • Marcado como Resposta J.AndersonSantos quarta-feira, 25 de setembro de 2013 02:12
    quarta-feira, 25 de setembro de 2013 02:11