locked
FAQ - Data Presentation Controls.

Todas as Respostas

  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:25
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:26
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:26
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:27
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:28
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:28
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:28
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:29
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:29
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:30
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:30
  • 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.
    quinta-feira, 4 de fevereiro de 2010 15:30