none
GridView com cabeçalho Fixo - JQuery+Chromatable RRS feed

  • Pergunta

  • Pessoal, estou utilizando JQ+Chromatable para deixar o cabeçalho do gridView fixo enquanto ocorre a rolagem dos dados da tabela(scroll) a priori funcionou, mas se eu pressiono o botão que exibe a gridview 2 vezes, na primeira monta quase q perfeito e na segunda não renderiza o cabeçalho fixo. O "quase que perfeito" quer dizer q o cabeçalho vai até em cima da barra de rolagem e fica desalinhado com as colunas da tabela. Adiciono o código do JQuery via ScriptManager.RegisterClientScriptBlock no evento onLoad do gridView e no evento onDataBound adiciono o AcessibleHeader e o TableRowSection.TableHeader.

    Alguém já obteve um resultado bom com esse método? Vou postar trechos do código para uma analise melhor. TKS!!!

     

    protected void gdvDividasTelesp_DataBound(object sender, EventArgs e)
      {
        // Adicionar o "thead" no gridView
        gdvDividasTelesp.UseAccessibleHeader = true;
        if (gdvDividasTelesp.HeaderRow != null)
        {
          gdvDividasTelesp.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
      }
    
    protected void gdvDividasTelesp_OnLoad(object sender, EventArgs e) 
      {
        // Carregar o javascript para header fixo do gridView
        if (gdvDividasTelesp.Rows.Count > 5)
    	  {
          //Adicionar JS após carregar o gridView
          ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "fixarHeaderGridViewTelesp", "$(document).ready(function(){$('#" + gdvDividasTelesp.ClientID + "').chromatable({width:'100%',height:'160px',scrolling:'yes'});});", true);
    	  } 
      }
    

    Beto Nogueira Analista de Sistemas
    segunda-feira, 6 de dezembro de 2010 18:17

Todas as Respostas

  • B,

        E se você colocar no seu header da página:

        <script>
            $(document).ready(function(){
                $("[id$='gdvDividasTelesp']").chromatable(
                     width: "100%",
                     height: "160px",
                     scrolling: "yes"
                );
            });
        </script>

         e retirar a linha:

               ScriptManager.RegisterClientScriptBlock(this .Page, this .GetType(), "fixarHeaderGridViewTelesp" , "$(document).ready(function(){$('#" + gdv ...

         O que acontece?

     

    Att,

    Ricardo

     

     

    terça-feira, 7 de dezembro de 2010 21:32
  • Ricardo,

    Muito obrigado pela única resposta hehe... vou fazer esse teste agora mesmo, já tentei deixar fixo no head do html e tb não deu resultado, a única diferença da sua proposta está na forma como obtenho o ID do gridview, vamos testar.

    Eu colocava o JS com o scriptmanager pq estava usando AJAX e o gridview ainda não existia no momento do (document).ready e após obtê-lo assincronamente não era executado o script se ficasse estático no head. Mas tive que fazer algumas mudanças, o servidor de aplicação não tem a atualização que instala o web.extensions então não suporta o ScriptManager.

    Em html simples eu consigo setar o Chromatable e fixar o header da tabela direitinho, vi que ele copia as larguras das colunas da tabela na cópia que ele cria do cabeçalho. E no asp.net ele não obtém essas larguras... por isso fica em cima da barra de rolagem ou as vezes fica apenas com tamanho diferente...

    Vou continuar os testes e posto os resultados.

    Obrigado!


    Beto Nogueira Analista de Sistemas
    sexta-feira, 10 de dezembro de 2010 16:32
  • B,

        Se der certo avisa NÓIS...

     

    Att,

    Ricardo

     

    sexta-feira, 10 de dezembro de 2010 20:05
  • Ricardo,

    Nada feito. O problema persiste, infelizmente seguirei com o projeto sem essa solução pois, preciso entregá-lo no prazo. Vou deixar essa thread aberta e continuarei pesquisando após a entrega, para futurar melhorias e posto aqui o resultado!

    Obrigado pela atenção!


    Beto Nogueira Analista de Sistemas
    quarta-feira, 15 de dezembro de 2010 12:07