FAQ - Data Presentation Controls.

Question

Olá a todos.

Aqui, você pode encontrar um resumo das perguntas frequentes do forum de ASP.NET. Nós consolidamos estas questões e colocamos à sua disposição. Se você tiver qualquer dúvida, por favor inicie um novo tópico a fim de manter a organização do fórum e melhorar a comunicação com os membros da comunidade. Obrigado por sua cooperação.

1. GridiView

      1.1 - Ordenando e paginando o controle gridview quando não estiver usando DataSource.
      1.2 - Como exibir um controle GridView vazio.
      1.3 - Transbordo do tamanho do GridView.
      1.4 – Usando controles CheckBox no GridView.
      1.5 – Construindo um Page template personalizado.
      1.6 - Como acessar os botões de número de página e mudar seus estilos.
      1.7 - Como exportar um GridView para um arquivo Excel.
      1.8 - Como enviar dados do GridView por e-mail.

2. DataList Control

      2.1 - Mostrando dados horizontalmente.
      2.2 - Paginação no controle DataList.

3 Problemas Comuns

      3.1 - Como criar colunas dinamicamente em um controle de exibição de dados.
      3.2 - Como exibir colunas nos controles GridView ou DataGrid usando uma largura fixa.
      3.3 - Como obter dados fora de Data Controls.

Answer 1

1-1 Ordenando e paginando o controle gridview quando não estiver usando DataSource.

As vezes você deseja vincular o controle GridView sem usar um controle DataSource como o SqlDataSource ou ObjectDataSource. Isso significa que a ordenação e paginação não serão feitos automaticamente pelo controle DataSource. Afim de implementar a ordenação e paginação, você precisa manipular os eventos PageIndexChanging e Sorting do GridView como mostra o exemplo abaixo:

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.DataSource = SortDataTable(GetYourDataSource(), true);
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataBind();
}
   
private string GridViewSortDirection
{
    get { return ViewState["SortDirection"] as string ?? "ASC"; }
    set { ViewState["SortDirection"] = value; }
}

private string GridViewSortExpression
{
    get { return ViewState["SortExpression"] as string ?? string.Empty; }
    set { ViewState["SortExpression"] = value; }
}

private string ToggleSortDirection()
{
    switch (GridViewSortDirection)
    {
        case "ASC":
            GridViewSortDirection = "DESC";
            break;
        case "DESC":
            GridViewSortDirection = "ASC";
            break;
    }
    return GridViewSortDirection;
}

protected DataView SortDataTable(DataTable dataTable, bool isPageIndexChanging)
{
    if (dataTable != null)
    {
        DataView dataView = new DataView(dataTable);
        if (GridViewSortExpression != string.Empty)
        {
            if (isPageIndexChanging)
            {
                dataView.Sort = string.Format("{0} {1}", 
                              GridViewSortExpression,GridViewSortDirection);
            }
            else
            {
                dataView.Sort = string.Format("{0} {1}",
                              GridViewSortExpression,ToggleSortDirection());
            }
        }
    return dataView;
    }
    else
    {
        return new DataView();
    }
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    GridViewSortExpression = e.SortExpression;
    int pageIndex = GridView1.PageIndex;
    GridView1.DataSource = SortDataTable(GetYourDataSource(), false);
    GridView1.DataBind();
    GridView1.PageIndex = pageIndex;
}

Voltar ao índice.

Answer 2

1.2 - Como exibir um controle GridView vazio.

Quando não existe dados para o controle GridView exibir, por padrão o controle não é renderizado. Se você quer mostrar os cabeçalhos mesmo se não houver dados, você pode criar um objeto DataTable teporário contendo um registro vazio e em seguida vincula controle GridView ao DataTable no evento page Init. O exemplo a seguir mostra como fazer isto:

protected void GridView1_Init(Object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Column1");
    dt.Columns.Add("Column2");
    DataRow dr = dt.NewRow();
    dr["Column1"] = "";
    dr["Column2"] = "";
    dt.Rows.Add(dr);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

Outra solução é herdar GridView e sobrescrever o método CreateChildControls. Nesta abordagem pode-se usar automaticamente o layout de colunas existentes, eliminando a necessidade de usar um objeto DataTable. O seguinte exemplo mostra como fazer isso.

public class EmptyGridView : GridView
{
    #region Properties
    /// <summary>
    /// Enable or Disable generating an empty table if no data rows in source
    /// </summary>
    [
    Description("Enable or disable generating an empty table with headers 
         when no data rows are available in the data source."),
    Category("Misc"),
    DefaultValue("true"),
    ]
    public bool ShowEmptyTable
    {
        get
        {
            object o = ViewState["ShowEmptyTable"];
            return (o != null ? (bool)o : true);
        }
        set
        {
            ViewState["ShowEmptyTable"] = value;
        }
    }
    /// <summary>
    /// Get or Set Text to display in empty data row
    /// </summary>
    [
    Description("Text to display in the empty data row."),
    Category("Misc"),
    DefaultValue(""),
    ]
    public string EmptyTableRowText
    {
        get
        {
            object o = ViewState["EmptyTableRowText"];
            return (o != null ? o.ToString() : "");
        }
        set
        {
            ViewState["EmptyTableRowText"] = value;
        }
    }
    #endregion
    protected override int CreateChildControls(System.Collections.IEnumerable 
            dataSource, bool dataBinding)
    {
        int numRows = base.CreateChildControls(dataSource, dataBinding);
        // No data rows created, so create an empty table if enabled.
        if (numRows == 0 && ShowEmptyTable)
        {
            //create table
            Table table = new Table();
            table.ID = this.ID;
            //create a new header row
            GridViewRow row = base.CreateRow(-1, -1, DataControlRowType.Header, 
                DataControlRowState.Normal);
            //convert the exisiting columns into an array and initialize
            DataControlField[] fields = new 
                DataControlField[this.Columns.Count];
            this.Columns.CopyTo(fields, 0);
            this.InitializeRow(row, fields);
            table.Rows.Add(row);
            //create the empty row
            row = new GridViewRow(-1, -1, DataControlRowType.DataRow,
               DataControlRowState.Normal);
            TableCell cell = new TableCell();
            cell.ColumnSpan = this.Columns.Count;
            cell.Width = Unit.Percentage(100);
            cell.Controls.Add(new LiteralControl(EmptyTableRowText));
            row.Cells.Add(cell);
            table.Rows.Add(row);
            this.Controls.Add(table);
        }
        return numRows;
    }
}

Voltar ao índice.

Answer 3

1.3 - Transbordo do tamanho do GridView

Se o controle GridView tenta exibir mais colunas ou linhas do que o espaço disponível na página, isto pode causar o transbordo do controle e alterar a aparência de toda a página. Você pode resolver isso adicionando uma barra de rolagem vertical ou horizontal ao GridView, como mosta o seguinte exemplo:

<div style="vertical-align:top; height:200px; width:100%; overflow:auto;">

Voltar ao índice.

Answer 4

1.4 – Usando controles CheckBox no GridView

Nos clientes de e-mail “Web-Based” como Hotmail e Yahoo uma coluna contém checkboxes que podem ser usados para selecionar individualmente as mensagens. Atualmente o controle Gridview não possui suporte embutido para isto, mas podemos implementar. Um exemplo de como extender o controle GridView para implementar CheckBoxes pode ser encontrado neste post (em inglês).

http://msdn.microsoft.com/en-us/magazine/cc163612.aspx.

Voltar ao índice.

Answer 5

1.5 – Construindo um Page template personalizado

Para mostrar informação, tais como uma contagem total de páginas, podemos usar o elemento , como mostra o exemplo abaixo:

        <asp:GridView ID="GridView1" runat="server" 
    DataSourceID="SqlDataSource1" 
    DataKeyNames="ID" 
    AllowPaging="true" 
    PageSize="10" 
    AutoGenerateColumns="true">
  <PagerTemplate>
    <asp:Label ID="LabelCurrentPage" runat="server" 
        Text="<%# ((GridView)Container.NamingContainer).PageIndex + 1 %>">
    </asp:Label>
    <asp:Label ID="LabelPageCount" runat="server" 
       Text="<%# ((GridView)Container.NamingContainer).PageCount %>">
    </asp:Label>  
    <asp:LinkButton ID="LinkButtonFirstPage" runat="server" 
        CommandArgument="First" 
        CommandName="Page" 
        enabled="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>">
     </asp:LinkButton>   
     <asp:LinkButton ID="LinkButtonPreviousPage" runat="server" 
        CommandArgument="Prev" CommandName="Page" 
        enabled="<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>">
    </asp:LinkButton>
    <asp:LinkButton ID="LinkButtonNextPage" runat="server" 
        CommandArgument="Next" 
        CommandName="Page" 
        enabled="<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>">
    </asp:LinkButton>
    <asp:LinkButton ID="LinkButtonLastPage" runat="server" 
        CommandArgument="Last" 
        CommandName="Page" 
        enabled="<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>">
    </asp:LinkButton> 
  </PagerTemplate>
</asp:GridView>

Voltar ao índice.

Answer 6

1.6 - Como acessar os botões de número de página e mudar seus estilos

Para personalizar o número da página selecionada para ter uma fonte maior e uma cor diferente, manipulamos o evento RowDataBound do controle GridView e aplicamos a formatação programaticamente. O Seguinte exemplo mostra como fazer isso.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)   
{   
    if (e.Row.RowType == DataControlRowType.Pager)   
    {   
        TableRow row = e.Row.Controls[0].Controls[0].Controls[0] as TableRow;
        foreach (TableCell cell in row.Cells)   
        {   
            Control lb = cell.Controls[0] ;   
            if (lb is Label)   
            {                               
                ((Label)lb).ForeColor = System.Drawing.Color.Red;   
                ((Label)lb).Font.Size = new FontUnit("40px"); 
            }   
            else if (lb is LinkButton)   
            {                        
                 //Here is for changing the rest LinkButton page number.
            }   
        }
    }   
}

Voltar ao índice.

Answer 7

1.7 - Como exportar um GridView para um arquivo Excel

Para exportar dados do GridView para um arquivo Excel, siga os passos: 

               1.Na página que contem o controle GridView, sobrescreva o método VerifyRenderingInServerForm. Isto permite você renderizar o controle GridView sem que a página esteja completa. A implementação padrão dete método impede a renderização do controle separadamente.
               2. Tenha certeza que o controle GridView está em um elemento Form que contenha o atributo runat=”server”.

O exemplo a seguir mostra o código necessário para tornar o GridView em uma planilha de Excel.

protected void Button1_Click(object sender, System.EventArgs e) 
{ 
    // Clear the response. 
    Response.Clear(); 
    // Set the type and file.name. 
    Response.AddHeader("content-disposition", 
        "attachment;filename=FileName.xls"); 
    Response.Charset = ""; 
    Response.ContentType = "application/vnd.xls"; 
    // Add the HTML from the GridView control to a StringWriter instance so you 
    //   can write it out later.
    System.IO.StringWriter sw = new System.IO.StringWriter(); 
    System.Web.UI.HtmlTextWriter hw = new HtmlTextWriter(sw); 
    GridView1.RenderControl(hw); 
    // Write the data. 
    Response.Write(sw.ToString); 
    Response.End(); 
} 
public override void VerifyRenderingInServerForm(Control control) 
{ 
}

Voltar ao índice.

Answer 8

2.1 Mostrando dados horizontalmente

O controle GridView exibe os dados linha a linha, o que siguinifica que o layout é vertical. Para processar os dados de uma outra forma, o controle DataList é uma boa escolha. Por exemplo, mostrar dados horizontalmente configurando o RepeatDirection=”Horizontal”. Você pode também usar a propriedade RepeatColumns para controlar quantas colunas serão exibidas em cada linha.

Voltar ao índice.

Answer 9

2.2 Paginação no controle DataList

Diferente do controle GridView, o controle DataList não tem suporte a paginação automatica. Para suportar a paginação, temos que adicionar código, como mostrado no seguinte exemplo:

int PageSize, RecordCount, PageCount, CurrentPage;
SqlConnection MyConn;
public int IndexOfPage
{
    get { return (int)ViewState["_IndexOfPage"]; }
    set { ViewState["_IndexOfPage "] = value; }
}
public int CountOfPage
{
    get { return (int)ViewState["_CountOfPage"]; }
    set { ViewState["_CountOfPage"] = value; }
}
public void Page_Load(Object src, EventArgs e)
{
    PageSize = 3;
    string MyConnString = 
     @"Server=(local)\SQLEXPRESS;Integrated Security=SSPI;Database=test;Persist Security Info=True";
    MyConn = new SqlConnection(MyConnString);
    MyConn.Open();
    if (!Page.IsPostBack)
    {
        ListBind();
        CurrentPage = 0;
        IndexOfPage = 0;
        RecordCount = CalculateRecord();
        lblRecordCount.Text = RecordCount.ToString();
        PageCount = RecordCount / PageSize;
        lblPageCount.Text = PageCount.ToString();
        CountOfPage = PageCount;
    }
}  
public int CalculateRecord()
{
    int intCount;
    string strCount = "select count(*) as co from student";
    SqlCommand MyComm = new SqlCommand(strCount, MyConn);
    SqlDataReader dr = MyComm.ExecuteReader();
    if (dr.Read())
    {
        intCount = Int32.Parse(dr["co"].ToString());
    }
    else
    {
        intCount = 0;
    }
    dr.Close();
    return intCount;
}
ICollection CreateSource()
{
    int StartIndex;
    StartIndex = CurrentPage * PageSize;
    string strSel = "select * from student";
    DataSet ds = new DataSet();
    SqlDataAdapter MyAdapter = new SqlDataAdapter(strSel, MyConn);
    MyAdapter.Fill(ds, StartIndex, PageSize, "Score");
    return ds.Tables["Score"].DefaultView;
}
public void ListBind()
{
    DataList1.DataSource = CreateSource();
    DataList1.DataBind();
    lbnNextPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    if (CurrentPage == (PageCount - 1)) lbnNextPage.Enabled = false;
    if (CurrentPage == 0) lbnPrevPage.Enabled = false;
    lblCurrentPage.Text = (CurrentPage + 1).ToString();
}
public void Page_OnClick(Object sender, CommandEventArgs e)
{
    CurrentPage = (int)IndexOfPage;
    PageCount = (int)CountOfPage;
    string cmd = e.CommandName;
    switch (cmd)
    {
        case "next":
            if (CurrentPage < (PageCount - 1)) CurrentPage++;
            break;
        case "prev":
            if (CurrentPage > 0) CurrentPage--;
            break;
    }
    IndexPage = CurrentPage;
    ListBind();
}

Voltar ao índice.

Answer 10

3.1 Como criar colunas dinamicamente em um controle de exibição de dados

Quando nao sabemos quantas colunas gostaríamos de adicionar à um controle GridView, podemos criar as colunas dinamicamente usando um controle Custom Template, como mostra o exemplo a seguir:

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            TemplateField customField1 = new TemplateField();
            customField1.ShowHeader = true;
            customField1.HeaderTemplate = 
                new GridViewTemplate(DataControlRowType.Header, "ID", "");
            customField1.ItemTemplate = 
                new GridViewTemplate(DataControlRowType.DataRow, "", "Contract");
            GridView1.Columns.Add(customField1); 
            GridView1.DataSource = GetDataSource();
            GridView1.DataBind();
        }
}
public class GridViewTemplate : ITemplate
{
    private DataControlRowType templateType;
    private string columnName;
    private string columnNameBinding;
    public GridViewTemplate(DataControlRowType type, string colname, 
        string colNameBinding)
    {
        templateType = type;
        columnName = colname;
        columnNameBinding = colNameBinding;
    }
    public void InstantiateIn( System.Web.UI.Control container )
    {
        switch (templateType)
        {
            case DataControlRowType.Header:
                Literal lc = new Literal();
                lc.Text = columnName;          
                container.Controls.Add(lc);          
                break;
            case DataControlRowType.DataRow:
                CheckBox cb = new CheckBox();
                cb.ID = "cb1";
                cb.DataBinding += new EventHandler(this.cb_OnDataBinding);  
                container.Controls.Add(cb);
                break;
            default:
                break;
        }
    }
    public void cb_OnDataBinding(object sender, EventArgs e)
   {
        CheckBox cb = (CheckBox)sender;
        GridViewRow container = (GridViewRow)cb.NamingContainer;
        cb.Checked = Convert.ToBoolean(
            ((DataRowView)container.DataItem)[columnNameBinding].ToString());
    }}

Voltar ao índice.

Answer 11

3.2 Como exibir colunas nos controles GridView ou DataGrid usando uma largura fixa

Por padrão, colunas nos controles GridView e DataGrid são automaticamente dimensionados de acordo com seu conteúdo. Para especificar uma largura fixa para as colunas, configure a propriedade Width para cada objeto TableCell e configure a propriedade Wrap para false. O Seguinte exemplo mostra como fazer isto usando um controle DataGrid.

protected void DataGrid1_ItemCreated(object sender, DataGridItemEventArgs e)
{
    ListItemType lit = e.Item.ItemType;
    if (lit == ListItemType.Header)
    {
        for (int i = 0; i < e.Item.Cells.Count; i++)
        {
            e.Item.Cells[i].Width = Unit.Pixel(50);
            e.Item.Cells[i].Wrap = false;
        }
    }
}

Voltar ao índice.

Answer 12

3.3 Como obter dados fora de Data Controls

Existem varias maneiras de obter dados fora dos Data Controls como o uso do metodo Control.FindControl(). Consulte o seguinte link (em Inglês) para mais detalhes.

http://weblogs.asp.net/davidfowler/archive/2008/12/12/getting-your-data-out-of-the-data-controls.aspx.

Voltar ao índice.