.NET

23 nov, 2011

Trabalhando com GridView e BoundField escondido

Publicidade

Hoje vou mostrar como trabalhar com GridView e BoundField escondido. Analisando fóruns, dúvidas e blogs na internet, percebi que muitos precisam de ajuda com o componente. Nesse sentido, resolvi escrever o artigo explicando passo a passo a melhor maneira (sem gato) para trabalhar com BoudField escondido.

Problema

O problema principal é: criar um GridView que tenha todos os campos do banco de dados, porém alguns não precisam ser mostrados ao usuário final. Esses campos que não precisam ser mostrados são necessários para controle interno ou seleção interna.

Para ser mais específico, existem dois grids na tela e, ao selecionar uma das linhas, o sistema mostra automaticamente o outro grid, de acordo com o que foi selecionado.

Os dados passados de um grid para o outro não precisam estar à amostra para o usuário, ou seja, podem ficar escondidos dentro do grid e disponíveis para usuário pegar valores.

Passando do pressuposto de que você já fez a sua página, o primeiro passo é colocar todos os campos que deseja no GridView.

 <asp:GridView ID="grdDocumento" runat="server" Width="940px" PageSize="3" BackColor="White"
BorderColor="#EEEEEE" BorderStyle="Solid" BorderWidth="2px" CellPadding="3"
CellSpacing="1" GridLines="Horizontal" AllowPaging="True"
AutoGenerateColumns="False"
onpageindexchanging="grdDocumento_PageIndexChanging"
onselectedindexchanged="grdDocumento_SelectedIndexChanged"
onrowcreated="grdDocumento_RowCreated">
<PagerSettings Mode="NumericFirstLast" FirstPageText="Primeira" LastPageText="Última" PageButtonCount="5" />

<FooterStyle BackColor="White" ForeColor="#000066" BorderStyle="Solid" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" BorderStyle="Solid" />
<SelectedRowStyle BackColor="#A0A4AC" Font-Bold="True" ForeColor="White" BorderStyle="Solid" />
<HeaderStyle BackColor="#D84040" Font-Bold="True" ForeColor="White" BorderStyle="Solid" />
<AlternatingRowStyle BackColor="#EEEEEE" BorderStyle="Solid" />
<Columns>
<asp:CommandField SelectText="»»" ShowCancelButton="False" ShowSelectButton="True">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:CommandField>
<asp:BoundField DataField="Campo1" HeaderText="Campo1" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo2" HeaderText="Campo2" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo3" HeaderText="Campo3" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo4" HeaderText="Campo4" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Campo5" HeaderText="Campo5" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo6" HeaderText="Campo6" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo7" HeaderText="Campo7" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo8" HeaderText="Campo8" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo9" HeaderText="Campo9" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo10" HeaderText="Campo10" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
<asp:BoundField DataField="Campo11" HeaderText="Campo11" HtmlEncode="False" FooterText="">
<ItemStyle BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" />
</asp:BoundField>
</Columns>

</asp:GridView>

Note que coloquei alguns estilos como tamanho, borda, alinhamento horizontal e vertical. Você pode escolher colocar a seu gosto, o importante é colocar todos os campos em seu GridView.

Existem três métodos específicos que precisam ser criados para o perfeito funcionamento:

onpageindexchanging="grdDocumento_PageIndexChanging"
onselectedindexchanged="grdDocumento_SelectedIndexChanged"
onrowcreated="grdDocumento_RowCreated"

O primeiro método serve para usar paginação. Talvez você já saiba disso e nem é o nosso foco mostrar isso neste momento. O segundo método serve para o cliente selecionar uma linha do grid que busca automaticamente os valores escondidos. O terceiro método serve para esconder os campos que não precisam ser mostrados para o usuário.

Aí está o segredo. Lembrando que os valores escondidos não aparecem no HTML, isto é, se for mostrado o código-fonte da página.

Após preencher os dados usando o DataSource e DataBind, o grid passa pelo OnRowCreated que esconde os campos em tempo de execução. Isso faz com que os dados continuem escondidos lá e possam ser pegos em outro momento como no SelectedIndexChanged.

OnRowCreated

Para criar o método OnRowCreated, basta selecionar o GridView, clicar em propriedades, mais especificamente em Events, escolher o RowCreated clicando duas vezes em cima, como visto na figura abaixo.

Depois basta verificar a quantidade de colunas existentes no GridView e então esconder as colunas que o usuário não precisa ver.

protected void grdDocumento_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.Cells.Count == 12)
{
e.Row.Cells[6].Visible = false;
e.Row.Cells[7].Visible = false;
e.Row.Cells[8].Visible = false;
e.Row.Cells[9].Visible = false;
e.Row.Cells[10].Visible = false;
e.Row.Cells[11].Visible = false;
}
}

Note que foi verificada a quantidade de colunas na célula antes de retirá-las. Retirei seis colunas que não são necessárias ao usuário, mas preciso delas para controle interno da aplicação.

SelectedIndexChanged

Com a tela preenchida, o usuário pode clicar e selecionar uma linha específica. Todos os valores pegos podem preencher outros campos, inclusive os escondidos para o usuário.

Neste método, além de ter que criar no gridview clicando duas vezes em Events, vou mostrar como pegar os dados escondidos.

A figura logo acima mostra que o “SelectedIndexChanged” foi criado clicando duas vezes.

protected void grdDocumento_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow _linha = grdDocumento.SelectedRow;
String _caminho = _linha.Cells[8].Text + @"\" + _linha.Cells[9].Text;
_caminho = _caminho.Replace(@"\", "|");
ChamaMeuMetodo(_caminho);
}

Note que os dados podem ser pegos normalmente usando o comando SelectedRow atribuído para a variável chamada “_linha”. Com a variável, posso pegar a célula selecionada colocando o número ou o “índex” indicado pelo framework.

Depois de pegar os valores, posso chamar um método passando o valor. O valor que peguei foi um dos escondidos.

Bom, fico por aqui e qualquer dúvida pode entrar em contato pelo site.

Espero que tenha gostado e até o próximo!