none
grid view - tamanho do cabeçalho fixo, aparecer cabaçalho quando não tem item e alterar a cor do cabeçalho RRS feed

  • Pergunta

  • Eu já pesquisei na internet e não achei a solução para esses três problemas, mas vamos lá para ver se alguem ajuda.

    1° como fazer com que o cabeçalho fique com a cor cinza (eu tenho já o código hexadecimal) e a letra fique branca (ou de qualquer outra cor que eu queira)

    2° como eu faço para que o cabeçalho apareça, mesmo sem os dados? Eu já vi soluções postados aqui, mas não funcionaram. 

    Por conta disso eu não consigo ver como está indo a grid, e isso acaba que causa o 3° problema.(bem eu acho que  causa, pois eu não consigo ver a grid vazia e ainda não tenho como colocar algum dado, se puderem me ajudar nessa, só para que eu veja o layout)

    3° Tenho uma grid com apenas duas colunas e que tem que ter em altura 400px

    Como eu faço para que as linhas e o cabeçalho fiquem com o mesmo tamanho de quando coloco inicialmente na tela isto é, em vez de esticar o espaçamento entre as linhas, criar mas linhas?

    Como eu não tenho dados ainda para ser exibido (e pode ocorrer dependendo do filtro aplicado de não ter dados a serem exibidos mesmo) a grid deve aparecer vazia, com as colunas dela, mas vazia mesmo. Eu lembro que a muito tempo eu fazia as colunas aparecerem, mas eu não lembro mas como. Sem truques de colocar html, o cliente não quer isso.


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    sexta-feira, 4 de maio de 2012 20:47

Respostas

  • Bequi.

    1 - voce tem de criar um css para o grid todo, segue abaixo um exemplo css.

    2 - Pra fazer o grid aparecer vazio, eu utilizo o expediente de criar um registro vazio na tabela que popula o grid. segue abaixo um exemplo de grid e como preenche-lo.

      utilizo um dataset tipado com a tabela de nome IBETTABPRE,
      colunas NUMTABPE int, DESTABPRE varchar(40)

    protected void Page_Load(object sender, EventArgs e) { //...poderia ser no page-load se voce quiser... //... Datasetx.IBETTABPREDataTable dtTabPre = new Datasetx.IBETTABPREDataTable(); if (!dtTabPre.Columns.Contains("tipoGrid")) dtTabPre.Columns.Add("tipoGrid", typeof(String)); //Carrega DataTable vazio : 1 registro com tudo "em branco" CarregarGridVazio<Datasetx.IBETTABPREDataTable>(dtTabPre); } #region Carregar Grid Vazio private void CarregarGridVazio<T>(T dataTable) where T : DataTable { foreach (DataColumn c in dataTable.Columns) if (!c.AllowDBNull) c.AllowDBNull = true; dataTable.Rows.Add(dataTable.NewRow()); if (dataTable.Columns.Contains("tipoGrid")) dataTable.Rows[0]["tipoGrid"] = "0"; } #endregion Carregar Grid Vazio 

            protected Boolean RetornaVisivel(object tipoGrid)
            {
                if ((tipoGrid == DBNull.Value) || tipoGrid == null)
                    return true;
                else
                    return false;
            }
    A função do "retornavisivel()" é pra que voce informe ao grid se deve mostrar o dado, o checkbox por exemplo, porque numa linha em branco, não posso ter o checkbox visivel.

    Abaixo segue meu grid de exemplo: Obs:
    Não utilizo o gridview do asp.net, neste exemplo, e sim o componente "IdeaSparx.CoolControls.Web", porque ele já fixa o cabeçalho.
    se desejar utiliza-lo, pesquise e baixe. Mas voce pode continuar a usuar o gridview.

    <div class="formulario" style="border:none; padding-left:0px; width:640px"> <div> <IdeaSparx:CoolGridView ID="grvTabelaPreco" runat="server" GridLines="Vertical" AutoGenerateColumns="False" AllowSorting="true" ShowHeader="true" RowStyle-CssClass="linha1" AlternatingRowStyle-CssClass="linha2" Height="370px" Width="606px" CssClass="tabela_grid0" AllowPaging="False" ShowFooter="false" DataKeyNames="NUMTABPRE" TabIndex="5"> <HeaderStyle CssClass="header_grid" /> <Columns> <asp:TemplateField HeaderText="Tabela" SortExpression="NUMTABPE"> <ItemStyle Width="45px" HorizontalAlign="Center" /> <ItemTemplate> <asp:Label ID="lblDSC_NUMTABPRMPRE" CssClass="labelComun" Text="<%# Bind('NUMTABPRE') %>" runat="server" Visible='<%#RetornaVisivel(Eval("tipoGrid"))%>' /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="45px" /> </asp:TemplateField> <asp:TemplateField HeaderText="Descrição" SortExpression="DESTABPRMPRE"> <ItemStyle Width="411px" HorizontalAlign="Left" /> <ItemTemplate> <asp:Label ID="lblDESTABPRMPRE" CssClass="labelComun" Text="<%# Bind('DESTABPRE') %>" runat="server" /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="411px" /> </asp:TemplateField> <asp:TemplateField HeaderText="Selecionar"> <ItemStyle Width="65px" HorizontalAlign="Center" /> <ItemTemplate> <asp:CheckBox ID="chkItemTabelaPreco" runat="server" Visible='<%#RetornaVisivel(Eval("tipoGrid"))%>' /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="65px" /> </asp:TemplateField> </Columns> </IdeaSparx:CoolGridView> </div> </div>

    Segue abaixo alguns css de exemplo. Brinca ai com eles e ajusta como voce achar melhor.

    O que voce precisa saber é que o grid view gera tabela e que tabelas teem TD, no caso de cabeçalho, TH e etc. Pesquise e estude um pouco sobre isso. Uma opção muito boa tambem é voce usar a ferramenta de desenvolvedor, no browser apos abrir a pagina do seu site, presione F12. Voce consegue ver a extrutura gerada por completo (HTML) e etc.

    segue o css, mas isso ai voce deve ajustar.
    /*TABELAS*/
    .tabela_grid { border:1px solid #e1e1e1; border-left:0px; margin-top:10px; }
    .tabela_grid0 { border:1px solid #e1e1e1; border-left:0px; margin-top:0px; }
    .tabela_grid1 { width:99%; border-left:1px; }
    .tabela_grid th, .tabela_grid td { background: #ededed url(../images/bg_header_grid.gif) repeat-x; border-bottom:1px solid #e1e1e1; font-size:12px; }
    .header_grid, .header_grid th, .header_grid td { background: #ededed url(../images/bg_header_grid.gif) repeat-x; border-bottom:1px solid #e1e1e1; font-size:12px; }
    .header_grid th, .header_grid td, .linha1 td, .linha2 td, .GridSelectedRow td { padding:5px 10px; border-bottom:0px; border-top:0px;  border-left: 1px solid #e1e1e1; }
    .header_grid th { border-bottom:1px; border-top:1px;}
    .linha1, .linha1 td { background:#ffffff; }
    .linha2, .linha2 td { background: #F5F5F5; }
    .linha1 td img, .linha2 td img { margin-left:-10px; }
    table img { margin-top:2px;}
    .GridSelectedRow {border-left: 1px solid #c6c6c6; margin:0; padding-left:0px; color:Black; font-family:verdana; font-size:8pt; background-image:url(../images/laranja_03.gif); background-repeat:repeat; line-height:24px;}
    .GridSelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat; /*border-left: 1px solid #c6c6c6; margin:0; padding-left:0px; color:Black; font-family:verdana; font-size:8pt; line-height:24px;*/}
    .linha1_SelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat;}
    /*.linha1_SelectedRow td input { font-size:11px;}*/
    .linha1_reduzidoSelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat;}
    .linha1_reduzidoSelectedRow td input { font-size:11px;}
    .tabela_grid0_reduzido {font-family: Arial; font-size: 8pt;}
    .header_grid_reduzido { padding: 0px; margin:0px; font-size:9pt; font-family:Arial;}
    .header_grid_reduzido th {text-align: center; font-size: 10px}
    .header_grid_reduzido th, .linha1_reduzido td, .linha2_reduzido td, td.col_reduzido {padding: 0px 2px; font-size:11px;}
    .linha1_reduzido td input, .linha2_reduzido td input {padding: 0px;margin:0px;}
            
    .linha1_excluido td {padding: 0px 2px; font-size:11px; background-color:#F4C614;}

    3 - coloquei o grid do exemplo com tamanho (height:) 380px e vai dar barra de rolagem se tiver muitas linhas

    Espero ter ajudado. Marque como util se o for.


    • Editado Jose Geraldo sábado, 5 de maio de 2012 10:09 correção da resposta
    • Marcado como Resposta Harley Araujo terça-feira, 8 de maio de 2012 13:16
    • Não Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 14:25
    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    sábado, 5 de maio de 2012 10:04
  • 1- vc pode alterar direto no html

    2-vc pode setar na grid o EmptyDataText="no data", que ele vai aparecer o header.

    3-vc tb pode setar isso nas propriedades dos seus boundcollums


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

    1 - Alterar direto no html ok funcionou

    2 - setar "no data" não funcionou.

    A grid agora aparece a palavra no data no meio, mas o cabeçalho ainda não aparece.

    3 - o que é boundcollums ?


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    segunda-feira, 7 de maio de 2012 13:26
  • Eu já resolvi o 2° problema.

    Criei uma função que inclui na grid várias linhas vazias e com isso, ajustou  3° problema também.

    segue o código que eu criei

           //preenche o grid com nenhum dado
            public void preencheGridVazia(object bean, ref ArrayList gridvazio)
            {
                int i;
    
                for (i = 0; i <= 15; i++)
                {
                    gridvazio.Add(bean);
                }
                
            }

    Toda vez que o grid não tem nenhuma linha para ser preenchida, eu chamo essa função.

    No caso para explicar como funciona.

    object bean eu passo a classe que tem as variáveis que serão usadas na grid (get, set)

    e ai eu retorno um array list aonde eu adiciono essa classe, sem passar nenhum valor para as variáveis.

    Aonde na grid eu tenho campo que venha com algum valor default eu chamo alguma função que substitui esse valor por vazio.

    Mas tem que ter cuidado, para no caso desse valor default tiver que aparecer na tela em alguma ocasião. 

    Bem, no meu caso eu ainda não tive esse problema, então eu não sei como ajudar nisso aqui.

    Tks a todos


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    terça-feira, 8 de maio de 2012 20:54

Todas as Respostas

  • Bequi.

    1 - voce tem de criar um css para o grid todo, segue abaixo um exemplo css.

    2 - Pra fazer o grid aparecer vazio, eu utilizo o expediente de criar um registro vazio na tabela que popula o grid. segue abaixo um exemplo de grid e como preenche-lo.

      utilizo um dataset tipado com a tabela de nome IBETTABPRE,
      colunas NUMTABPE int, DESTABPRE varchar(40)

    protected void Page_Load(object sender, EventArgs e) { //...poderia ser no page-load se voce quiser... //... Datasetx.IBETTABPREDataTable dtTabPre = new Datasetx.IBETTABPREDataTable(); if (!dtTabPre.Columns.Contains("tipoGrid")) dtTabPre.Columns.Add("tipoGrid", typeof(String)); //Carrega DataTable vazio : 1 registro com tudo "em branco" CarregarGridVazio<Datasetx.IBETTABPREDataTable>(dtTabPre); } #region Carregar Grid Vazio private void CarregarGridVazio<T>(T dataTable) where T : DataTable { foreach (DataColumn c in dataTable.Columns) if (!c.AllowDBNull) c.AllowDBNull = true; dataTable.Rows.Add(dataTable.NewRow()); if (dataTable.Columns.Contains("tipoGrid")) dataTable.Rows[0]["tipoGrid"] = "0"; } #endregion Carregar Grid Vazio 

            protected Boolean RetornaVisivel(object tipoGrid)
            {
                if ((tipoGrid == DBNull.Value) || tipoGrid == null)
                    return true;
                else
                    return false;
            }
    A função do "retornavisivel()" é pra que voce informe ao grid se deve mostrar o dado, o checkbox por exemplo, porque numa linha em branco, não posso ter o checkbox visivel.

    Abaixo segue meu grid de exemplo: Obs:
    Não utilizo o gridview do asp.net, neste exemplo, e sim o componente "IdeaSparx.CoolControls.Web", porque ele já fixa o cabeçalho.
    se desejar utiliza-lo, pesquise e baixe. Mas voce pode continuar a usuar o gridview.

    <div class="formulario" style="border:none; padding-left:0px; width:640px"> <div> <IdeaSparx:CoolGridView ID="grvTabelaPreco" runat="server" GridLines="Vertical" AutoGenerateColumns="False" AllowSorting="true" ShowHeader="true" RowStyle-CssClass="linha1" AlternatingRowStyle-CssClass="linha2" Height="370px" Width="606px" CssClass="tabela_grid0" AllowPaging="False" ShowFooter="false" DataKeyNames="NUMTABPRE" TabIndex="5"> <HeaderStyle CssClass="header_grid" /> <Columns> <asp:TemplateField HeaderText="Tabela" SortExpression="NUMTABPE"> <ItemStyle Width="45px" HorizontalAlign="Center" /> <ItemTemplate> <asp:Label ID="lblDSC_NUMTABPRMPRE" CssClass="labelComun" Text="<%# Bind('NUMTABPRE') %>" runat="server" Visible='<%#RetornaVisivel(Eval("tipoGrid"))%>' /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="45px" /> </asp:TemplateField> <asp:TemplateField HeaderText="Descrição" SortExpression="DESTABPRMPRE"> <ItemStyle Width="411px" HorizontalAlign="Left" /> <ItemTemplate> <asp:Label ID="lblDESTABPRMPRE" CssClass="labelComun" Text="<%# Bind('DESTABPRE') %>" runat="server" /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="411px" /> </asp:TemplateField> <asp:TemplateField HeaderText="Selecionar"> <ItemStyle Width="65px" HorizontalAlign="Center" /> <ItemTemplate> <asp:CheckBox ID="chkItemTabelaPreco" runat="server" Visible='<%#RetornaVisivel(Eval("tipoGrid"))%>' /> </ItemTemplate> <HeaderStyle HorizontalAlign="Center" Width="65px" /> </asp:TemplateField> </Columns> </IdeaSparx:CoolGridView> </div> </div>

    Segue abaixo alguns css de exemplo. Brinca ai com eles e ajusta como voce achar melhor.

    O que voce precisa saber é que o grid view gera tabela e que tabelas teem TD, no caso de cabeçalho, TH e etc. Pesquise e estude um pouco sobre isso. Uma opção muito boa tambem é voce usar a ferramenta de desenvolvedor, no browser apos abrir a pagina do seu site, presione F12. Voce consegue ver a extrutura gerada por completo (HTML) e etc.

    segue o css, mas isso ai voce deve ajustar.
    /*TABELAS*/
    .tabela_grid { border:1px solid #e1e1e1; border-left:0px; margin-top:10px; }
    .tabela_grid0 { border:1px solid #e1e1e1; border-left:0px; margin-top:0px; }
    .tabela_grid1 { width:99%; border-left:1px; }
    .tabela_grid th, .tabela_grid td { background: #ededed url(../images/bg_header_grid.gif) repeat-x; border-bottom:1px solid #e1e1e1; font-size:12px; }
    .header_grid, .header_grid th, .header_grid td { background: #ededed url(../images/bg_header_grid.gif) repeat-x; border-bottom:1px solid #e1e1e1; font-size:12px; }
    .header_grid th, .header_grid td, .linha1 td, .linha2 td, .GridSelectedRow td { padding:5px 10px; border-bottom:0px; border-top:0px;  border-left: 1px solid #e1e1e1; }
    .header_grid th { border-bottom:1px; border-top:1px;}
    .linha1, .linha1 td { background:#ffffff; }
    .linha2, .linha2 td { background: #F5F5F5; }
    .linha1 td img, .linha2 td img { margin-left:-10px; }
    table img { margin-top:2px;}
    .GridSelectedRow {border-left: 1px solid #c6c6c6; margin:0; padding-left:0px; color:Black; font-family:verdana; font-size:8pt; background-image:url(../images/laranja_03.gif); background-repeat:repeat; line-height:24px;}
    .GridSelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat; /*border-left: 1px solid #c6c6c6; margin:0; padding-left:0px; color:Black; font-family:verdana; font-size:8pt; line-height:24px;*/}
    .linha1_SelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat;}
    /*.linha1_SelectedRow td input { font-size:11px;}*/
    .linha1_reduzidoSelectedRow td {background-image:url(../images/laranja_03.gif); background-repeat:repeat;}
    .linha1_reduzidoSelectedRow td input { font-size:11px;}
    .tabela_grid0_reduzido {font-family: Arial; font-size: 8pt;}
    .header_grid_reduzido { padding: 0px; margin:0px; font-size:9pt; font-family:Arial;}
    .header_grid_reduzido th {text-align: center; font-size: 10px}
    .header_grid_reduzido th, .linha1_reduzido td, .linha2_reduzido td, td.col_reduzido {padding: 0px 2px; font-size:11px;}
    .linha1_reduzido td input, .linha2_reduzido td input {padding: 0px;margin:0px;}
            
    .linha1_excluido td {padding: 0px 2px; font-size:11px; background-color:#F4C614;}

    3 - coloquei o grid do exemplo com tamanho (height:) 380px e vai dar barra de rolagem se tiver muitas linhas

    Espero ter ajudado. Marque como util se o for.


    • Editado Jose Geraldo sábado, 5 de maio de 2012 10:09 correção da resposta
    • Marcado como Resposta Harley Araujo terça-feira, 8 de maio de 2012 13:16
    • Não Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 14:25
    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    sábado, 5 de maio de 2012 10:04
  • 1- vc pode alterar direto no html

    2-vc pode setar na grid o EmptyDataText="no data", que ele vai aparecer o header.

    3-vc tb pode setar isso nas propriedades dos seus boundcollums


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

    segunda-feira, 7 de maio de 2012 12:24
    Moderador
  • 1- vc pode alterar direto no html

    2-vc pode setar na grid o EmptyDataText="no data", que ele vai aparecer o header.

    3-vc tb pode setar isso nas propriedades dos seus boundcollums


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

    1 - Alterar direto no html ok funcionou

    2 - setar "no data" não funcionou.

    A grid agora aparece a palavra no data no meio, mas o cabeçalho ainda não aparece.

    3 - o que é boundcollums ?


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    segunda-feira, 7 de maio de 2012 13:26
  • Jose Geraldo, gostei da sua explicação e estou usando para mudar as cores no meu grid view. Muito obrigada, mas eu ainda estou vendo como vou fazer para aparecer o cabeçalho, já que eu vou usar o componente grid view.

    assim que eu resolver tudo, eu posto aqui o que eu fiz.


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    segunda-feira, 7 de maio de 2012 13:31
  • Eu já resolvi o 2° problema.

    Criei uma função que inclui na grid várias linhas vazias e com isso, ajustou  3° problema também.

    segue o código que eu criei

           //preenche o grid com nenhum dado
            public void preencheGridVazia(object bean, ref ArrayList gridvazio)
            {
                int i;
    
                for (i = 0; i <= 15; i++)
                {
                    gridvazio.Add(bean);
                }
                
            }

    Toda vez que o grid não tem nenhuma linha para ser preenchida, eu chamo essa função.

    No caso para explicar como funciona.

    object bean eu passo a classe que tem as variáveis que serão usadas na grid (get, set)

    e ai eu retorno um array list aonde eu adiciono essa classe, sem passar nenhum valor para as variáveis.

    Aonde na grid eu tenho campo que venha com algum valor default eu chamo alguma função que substitui esse valor por vazio.

    Mas tem que ter cuidado, para no caso desse valor default tiver que aparecer na tela em alguma ocasião. 

    Bem, no meu caso eu ainda não tive esse problema, então eu não sei como ajudar nisso aqui.

    Tks a todos


    Visitem os meus blogs: http://planetabrasileiro.blogspot.com http://programacaoegames.blogspot.com Rebeca bjs

    • Marcado como Resposta Bequi terça-feira, 8 de maio de 2012 20:54
    terça-feira, 8 de maio de 2012 20:54