Criando uma Barra Horizontal dentro do GridView

A idéia ao escrever este artigo é mostrar, de uma forma simples, como criar (em tempo de execução) um gráfico de barra horizontal dentro de uma célula do GridView para uma aplicação ASP.NET.

por José Reche

A idéia ao escrever este artigo é mostrar, de uma forma simples, como criar (em tempo de execução) um gráfico de barra horizontal dentro de uma célula do GridView para uma aplicação ASP.NET.

Figura 1

Vamos criar um WebSite padrão, chamaremos de GridViewBarGraph (figura 2)

Figura 2

Após criado o WebSite, vamos na pasta App_Data e vamos adicionar um arquivo XML que servirá como nossa fonte de dados principal. Poderia ser uma tabela de um banco de dados qualquer, mas para simplificar o exemplo, utilizaremos um arquivo XML ( figura 3 ).

Figura 3

Vamos editar o arquivo XMLFile1 e acrecentarmos as tags abaixo (figura 4):

Figura 4

Dentro da página default.aspx coloquemos um controle GridView (chamado GridView1) e um controle XmlDataSource (chamado XmlDataSource1).

Figura 5

No controle XMLDataSource1 vamos configurar o Data Source ao documento XMLFile1.xml ( figura 6 )

Figura 6 Vamos agora no GridView1 e ligarmos o controle XMLDataSource1 (figura 7). O resultado será apresentado como mostra a figura 8.

Figura 7

Figura 8

No GridView1 adicionamos uma coluna TemplateField que servirá como container para o Gráfico Horizontal ( figura 9 ).

Figura 9 No GridView1 novamente, escolha "Edit Templates" e arraste um componente Image da Toobox de controles para dentro da área de "Item Template" do GridView1 conforme figura 10.

Figura 10

Vamos definir alguns valores "Padrões" nas propriedades do controle image recém adicionado ( figura 11 ).

Figura 11
Após aplicados os valores, finalize o modo de edição do template em "End Template Editing" (Figura 12 )

Figura 12

Vamos agora criar uma pasta para colocarmos três arquivos no formato .gif que servirão como base para largura dinâmina das barras horizontais ( figura 13 ).

Figura 13

Os três arquivos .Gifs devem seguir as seguintes recomendações:

Largura: 1 pixel, Altura : 18 pixel
Nomes: BarraHorizGreen.gif, BarraHorizRed.gif e BarraHorizYellow.gif

Sintem-se livres para utilização de outros tipos de imagem ( bmp, jpg, etc ) , mas para efeito deste artigo, adotaremos o recomendado devido a codificação exigir no próximo passo abaixo.

Dica: Para criação de imagens básicas, utilizem o velho e eficiente Paint do seu Windows!

Precisamos calcular agora a largura das imagens (na coluna TemplateField) aos valores da coluna "price" do controle GridView1.

Esta transformação ocorrerá em tempo de execução da página no método "RowDataBound" do controle GridView1. (listagem 1)

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As 
System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        Try
            Select Case e.Row.RowType
                Case DataControlRowType.DataRow

                    Dim img As Image = e.Row.FindControl("Image1")
                    Dim Percent_ As Single = CInt(e.Row.Cells(2).Text)

                    Dim x As Single = Percent_
                    img.Width = Unit.Percentage(x)
                    img.ToolTip = Unit.Percentage(x).ToString
                    img.Height = 18

                    Select Case Percent_
                        Case Is  40
                            img.ImageUrl = "~/App_Images/BarraHorizRed.gif"
                        Case Else
                            img.ImageUrl = "~/App_Images/BarraHorizYellow.gif"

                    End Select

            End Select

        Catch ex As Exception

        End Try
    End Sub
End Class
Listagem 1

É isso aí. Executem a aplicação e espero que aproveitem em seus futuros projetos.

José Reche