Nos exemplos que utilizamos até o momento, definimos a propriedade DataSource de um controle DataGrid como sendo um objeto DataView e chamamos o método DataBind do DataGrid. Isso faz com que seja gerado um DataGrid com tantas colunas quantos forem os campos do objeto DataView, sendo que as colunas do DataGrid são geradas automaticamente.

Podemos ter controle sobre a maneira como as colunas de um DataGrid são geradas. Por exemplo, podemos definir diferentes aspectos visuais para cada coluna, diferentes tipos, etc. Cada coluna de um DataGrid é um controle de um dos seguintes tipos:

• BoundColumn
• ButtonColumn
• EditCommandColumn
• HyperLinkColumn
• TemplateColumn

Por padrão a propriedade AutoGenerateColumns é definida em True, o que faz com que as colunas do DataGrid sejam geradas, automaticamente, e sejam do tipo BoundColumn. Para cada campo da fonte de dados, quer seja um objeto DataView ou um objeto DataReader, será gerada uma coluna do tipo BoundColumn, na ordem em que os campos aparecem na fonte de dados.

Nota: A ordem em que os campos aparecem em uma fonte de dados, é definida pelo comando SQL. Considere o seguinte comando:

            Select NúmeroDoPedido,  CidadeDeDestino, PaísDeDestino From Pedidos.

A primeira coluna gerada exibirá os dados do campo NúmeroDoPedido, a segunda, exibirá os dados do campo CidadeDeDestino e assim por diante.

Para controlar, manualmente, quais colunas farão parte do DataGrid e qual o formato das colunas, devemos definir a propriedade AutoGenerateColumns=”False”. Uma vez definida esta propriedade como False, podemos adicionar as colunas desejadas. Para controlar a aparência de cada coluna, definimos uma série de propriedades para cada coluna.

Alem de definir cada coluna manualmente, também podemos definir as características da primeira linha do DataGrid, normalmente a linha de títulos; dos itens de cada linha; dos itens de cada linha quando em modo de edição e da última linha do DataGrid. Estes elementos são definidos dentro de uma coluna do tipo TemplateColumn.

A seguir temos a sintaxe completa para o controle DataGrid, quando definimos as colunas do mesmo manualmente:

<asp:DataGrid 

id="identificação_no_código" 

runat=server

            DataSource='<%#  Fonte de dados. %>'

            AutoGenerateColumns="False"

            (outras propriedades)

> 

            <AlternatingItemStyle  property="value"/>

            <EditItemStyle  property="value"/>

            <FooterStyle  property="value"/>

            <HeaderStyle  property="value"/>

            <ItemStyle  property="value"/>

            <PagerStyle  property="value"/>

            <SelectedItemStyle  property="value"/>

<Columns>

       <asp:BoundColumn

             DataField="DataSourceField"

             DataFormatString="FormatString"

             FooterText="FooterText"

             HeaderImageUrl="url"

             HeaderText="HeaderText"

            ReadOnly="True|False"

             SortField="DataSourceFieldToSortBy"

             Visible="True|False"

             FooterStyle-property="value"

             HeaderStyle-property="value"

             ItemStyle-property="value"/>

       <asp:ButtonColumn

            ButtonType="LinkButton|PushButton"

            Command="BubbleText"

            DataTextField="DataSourceField"

            DataTextFormatString="FormatString"

            FooterText="FooterText"

            HeaderImageUrl="url"

            HeaderText="HeaderText"

            ReadOnly="True|False"

            SortField="DataSourceFieldToSortBy"

            Text="ButtonCaption"

            Visible="True|False"/>

       <asp:EditCommandColumn

            ButtonType="LinkButton|PushButton"

            CancelText="CancelButtonCaption"

            EditText="EditButtonCaption"

            FooterText="FooterText"

            HeaderImageUrl="url"

            HeaderText="HeaderText"

            ReadOnly="True|False"

            SortField="DataSourceFieldToSortBy"

           UpdateText="UpdateButtonCaption"

            Visible="True|False"/>

       <asp:HyperLinkColumn

            DataNavigateUrlField="DataSourceField"

            DataNavigateUrlFormatString="FormatExpression"

            DataTextField="DataSourceField"

           DataTextFormatString="FormatExpression"

            FooterText="FooterText"

            HeaderImageUrl="url"

            HeaderText="HeaderText"

            NavigateUrl="url"

            ReadOnly="True|False"

            SortField="DataSourceFieldToSortBy"

            Target="window"

            Text="HyperLinkText"

            Visible="True|False"/>

       <asp:TemplateColumn

            FooterText="FooterText"

            HeaderImageUrl="url"

            HeaderText="HeaderText"

            ReadOnly="True|False"

            SortField="DataSourceFieldToSortBy"

            Visible="True|False">

          <HeaderTemplate>

             Header template HTML

          </HeaderTemplate >

          <ItemTemplate>

             ItemTemplate HTML

          </ItemTemplate>

          <EditItemTemplate>

             EditItem template HTML

          </EditItemTemplate>

          <FooterTemplate>

             Footer template HTML

          </FooterTemplate>

      </asp:TemplateColumn>

    </Columns>

</asp:DataGrid>

Uma vez definida a propriedade AutoGenerateColumns para False, podemos definir manualmente as colunas. Isto é feito entre as tags <Columns> </Columns>. Conforme citado anteriormente, temos diferentes tipos de colunas, tipos estes que estão descritos na Tabela 11.3.

Tabela 11.3 Tipos de colunas para o controle DataGrid.

As colunas de um DataGrid, adicionadas manualmente, fazem parte da coleção Columns. A ordem em que as colunas são exibidas no DataGrid, da esquerda para a direita, é definida pela ordem em que as colunas estão definidas na coleção Columns. Podemos alterar esta ordem, utilizando programação.

Nota: É possível utilizar uma mescla entre colunas geradas automaticamente e colunas definidas manualmente. Quando isto acontece as colunas criadas manualmente são processadas em primeiro lugar. As colunas geradas automaticamente não farão parte da coleção Columns.

Um exemplo de criação manual de colunas – BoundColumn.

Cada tipo de coluna tem uma série de propriedades que podemos utilizar para controlar os aspectos visuais, funcionais e de formatação da coluna. Vamos apresentar um exemplo,onde criamos manualmente as colunas de um DataGrid, utilizando colunas do tipo BoundColumn. Utilizaremos algumas propriedades para definir as características de cada coluna, depois estudaremos mais detalhes sobre as propriedades disponíveis.

Na Listagem 11.9 temos o código para o exemplo proposto.

Listagem 11.9 – Criando colunas manualmente em um DataGrid.

<%@ Import Namespace="System.Data"  %>

<%@ Import  Namespace="System.Data.SqlClient" %>

<html>

<script language="C#"  runat="server">

 void BuscaDados() 

   {

            //  Crio uma conexão com o banco de dados pubs localizado no servidor local.

            // Vamos acessar a instância  SERVIDOR\NETSDK.

              SqlConnection  myConnection = new SqlConnection("server=SERVIDOR\\NETSDK;" 

               +" uid=sa;pwd=;database=pubs");

             // Conectamos com o banco de dados utilizando  um comando SQL,

             // o qual retorna todos os dados da tabela  "Authors", do banco de 

             // dados pubs, do SQL Server 2000 –  SERVIDOR\NETSDK.           

              SqlDataAdapter myCommand = new SqlDataAdapter("SELECT " +

             " au_id,au_fname,phone FROM Authors Order  By au_fname", myConnection);

            // Criamos e preenchemos um  objeto DataSet.

              DataSet ds = new DataSet();

            myCommand.Fill(ds);

            // Conectamos um controle  DataGrid com o DataSet criado anteriormente. 

            // MinhaGrade é o id (nome) de um  controle do tipo

            // DataGrid que está na seção de apresentação  da página.

            DataView source = new  DataView(ds.Tables[0]);

            MinhaGrade.DataSource  = source ;

            MinhaGrade.DataBind();

   }

      void Page_Load(Object sender, EventArgs  e) 

      {

         BuscaDados();

      }

</script>

<body>

<form runat=server>

      <h3><font  face="Verdana">Criando colunas  manualmente.</font></h3>

      <HR>

      <H4>Observe que temos diferentes  formatações para cada coluna>/H4>

      <b>Product  List</b>

      <asp:DataGrid 

                        id="MinhaGrade"

                        BorderColor="black"

                         BorderWidth="1"

                         CellPadding="3"

                         AutoGenerateColumns="false"

                         runat="server">

          <HeaderStyle

                        BackColor="#00aaaa"

Font-Bold="True"

                                    Font-Name="Courier  New"

                         ForeColor="White"

         >

       </HeaderStyle>

    <Columns>

             <asp:BoundColumn

                         HeaderText="Código" 

                         DataField="au_id"

                         ItemStyle-BackColor="#c0c0c0"

            >

             </asp:BoundColumn>

             <asp:BoundColumn

                         HeaderText="Nome" 

                         DataField="au_fname"

                         ItemStyle-Font-Italic="True"

                         ItemStyle-Font-Name="Courier  New"

             >

             </asp:BoundColumn>

                        <asp:BoundColumn

                         HeaderText="Telefone" 

                         DataField="phone"

                         ItemStyle-BackColor="#c0ffff"

                         ItemStyle-Font-Bold="True"

             >

             </asp:BoundColumn>

    </Columns>

    </asp:DataGrid>

</form>

</body>

</html>

Digite o código da Listagem 11.9 e salve o mesmo em um arquivo chamado chap11ex9aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex9aspx

Será exibida uma listagem com o código, nome e telefone dos autores, da tabela authors, do banco de dados pubs, conforme indicado na Figura 11.11.

Figura 11.11 Colunas com diferentes formatações.

Observe que as colunas apresentam diferentes formatações.

Comentários sobre o código do exemplo Chap11ex8.aspx:

• Em primeiro lugar observe que aplicamos diversas formatações diferentes, as diversas partes do controle DataGrid.

1.         Para a primeira linha dos títulos das colunas, aplicamos as seguintes formatações: Negrido, fonte Courier New e cor Branca.

2.         Para a primeira coluna aplicamos cor cinza para o segundo plano.

3.         Para a segunda coluna aplicamos uma fonte Courier New e Itálico.

4.         Para a terceira coluna aplicamos negrito e uma tonalidade de verde para a cor de segundo plano.

• Para criar as colunas manualmente, em primeiro lugar definimos a propriedade AutoGenerateColumns do DataGrid como False:

AutoGenerateColumns="False"

A definição das colunas é feita dentro das tags <Columns> </Columns>. Neste exemplo utilizamos apenas colunas do tipo BoundColumn.

1.         A primeira coluna exibe dados do campo au_id:

<asp:BoundColumn

                  HeaderText="Código" 

                  DataField="au_id"

                  ItemStyle-BackColor="#c0c0c0"

>            

</asp:BoundColumn>

A propriedade HeaderText define o título da coluna.

A propriedade DataField define com qual campo do objeto DataView, a coluna é ligada. Como definimos esta propriedade com au_id, esta coluna ira exibir o código do autor. Esta propriedade é que faz a ligação da coluna com um campo da fonte de dados.

A propriedade ItemStyle-BackColor define a cor de segundo plano.

2.         A segunda coluna exibe dados do campo au_fname:

<asp:BoundColumn

                  HeaderText="Nome" 

                  DataField="au_fname"

                  ItemStyle-Font-Italic="True"

                  ItemStyle-Font-Name="Courier New"

            >

            </asp:BoundColumn>

A propriedade HeaderText define o título da coluna.

A propriedade DataField liga a coluna com o campo au_fname da fonte de dados. Esta coluna exibe o primeiro nome do autor.

A propriedade ItemStyle-Font-Italic define Itálico para a fonte.

A propriedade ItemStyle-Font-Name define o tipo de fonte a ser utilizado. Poderíamos ter utilizado Arial, Times New Roman, etc.

3.         A terceira coluna exibe dados do campo phone:

<asp:BoundColumn

                  HeaderText="Telefone" 

                  DataField="phone"

                  ItemStyle-BackColor="#c0ffff"

                  ItemStyle-Font-Bold="True"

             >

</asp:BoundColumn>

A propriedade HeaderText define o título da coluna.

A propriedade DataField liga a coluna com o campo phone da fonte de dados.

A propriedade ItemStyle-Font-Bold define Negrito para a fonte.

• Também incluímos um elemento HeaderStyle. Este elemento define a formatação para a linha de títulos das colunas. Definimos negrito (Font-Bold=”True”), fonte CourierNew (Font-Name=”Courier New”) e cor de fonte branca (ForeColor=”White”).

Observe que as formatações para o elemento HeaderStyle são diferentes das formatações para o elemento BoundColumn. Por exemplo, no elemento BoundColumn, utilizamos ItemStyle-Font-PropriedadeDaFonte, para definir uma característica da fonte. Por exemplo,utilizamos ItemStyle-Font-Bold=”True”, para definir Negrito. Já no elemento HeaderStyle utilizamos apenas Font-PropriedadeDaFonte. Por exemplo, utilizamos Font-Bold=”True”, para definir Negrito.

<HeaderStyle

            BackColor="#00aaaa"

            Font-Bold="True"

              Font-Name="Courier New"

              ForeColor="White"

          >

          </HeaderStyle>

• Na seção de código da página, simplesmente estabelecemos uma conexão com o servidor SQL Server e utilizamos um objeto Data Repeater para executar um comando SQL que preenche um objeto DataSet. A partir do objeto DataSet criamos um objeto DataView, objeto este que é associado com o DataGrid. Criamos um procedimento BuscaDados(), o qual é chamado toda vez que a página é carregada – Page_Load.

Nota: Ainda não estudamos todos os detalhes do controle DataGrid. No próximo tópico, veremos como implementar a paginação, utilizando um controle DataGrid. No Capítulo 12 aprenderemos a utilizar o controle DataGrid para Editar, Alterar e Excluir dados.