GridView com cabeçalho Fixo - JQuery+Chromatable

Question

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

Answer 1

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

 

 

Answer 2

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

Answer 3

B,

    Se der certo avisa NÓIS...

 

Att,

Ricardo

 

Answer 4

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