Exportar (0) Imprimir
Expandir todo

DataGrid (Control de servidor Web)

.NET Framework 1.1

El control DataGrid procesa una cuadrícula tabular enlazada a datos. Este control permite definir varios tipos de columna para controlar el diseño del contenido de las celdas de la cuadrícula (columnas enlazadas, columnas de plantilla) y agregar funciones específicas (como columnas de botones de edición, columnas de hipervínculos, etc.). El control también admite varias opciones de paginación de los datos.

<asp:DataGrid id="programmaticID"
     DataSource='<%# DataBindingExpression %>'
     AllowPaging="True|False"
     AllowSorting="True|False"
     AutoGenerateColumns="True|False"
     BackImageUrl="url"
     CellPadding="pixels"
     CellSpacing="pixels"
     DataKeyField="DataSourceKeyField"
     GridLines="None|Horizontal|Vertical|Both"
     HorizontalAlign="Center|Justify|Left|NotSet|Right"
     PagedDataSource
     PageSize="ItemCount"
     ShowFooter="True|False"
     ShowHeader="True|False"
     VirtualItemCount="ItemCount"
     OnCancelCommand="OnCancelCommandMethod"
     OnDeleteCommand="OnDeleteCommandMethod"
     OnEditCommand="OnEditCommandMethod"
     OnItemCommand="OnItemCommandMethod"
     OnItemCreated="OnItemCreatedMethod"
     OnPageIndexChanged="OnPageIndexChangedMethod"
     OnSortCommand="OnSortCommandMethod"
     OnUpdateCommand="OnUpdateCommandMethod"
     runat="server" >

   <AlternatingItemStyle ForeColor="Blue"/>
   <EditItemStyle BackColor="Yellow"/>
   <FooterStyle BorderColor="Gray"/>
   <HeaderStyle BorderColor="Gray"/>
   <ItemStyle Font-Bold="True"/>
   <PagerStyle Font-Name="Ariel"/>
   <SelectedItemStyle BackColor="Blue"/>

</asp:DataGrid>
or
<asp:DataGrid id="programmaticID"
     DataSource='<%# DataBindingExpression %>'
     AutoGenerateColumns="False"
     (other properties)
     runat="server" >

   <AlternatingItemStyle ForeColor="Blue"/>
   <EditItemStyle BackColor="Yellow"/>
   <FooterStyle BorderColor="Gray"/>
   <HeaderStyle BorderColor="Gray"/>
   <ItemStyle Font-Bold="True"/>
   <PagerStyle Font-Name="Ariel"/>
   <SelectedItemStyle BackColor="Blue"/>

   <Columns>
      <asp:BoundColumn
           DataField="DataSourceField"
           DataFormatString="FormatString"
           FooterText="FooterText"
           HeaderImageUrl="url"
           HeaderText="HeaderText"
           ReadOnly="True|False"
           SortExpression ="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"
           SortExpression="DataSourceFieldToSortBy"
           Text="ButtonCaption"
           Visible="True|False"/>

      <asp:EditCommandColumn
           ButtonType="LinkButton|PushButton"
           CancelText="CancelButtonCaption"
           EditText="EditButtonCaption"
           FooterText="FooterText"
           HeaderImageUrl="url"
           HeaderText="HeaderText"
           ReadOnly="True|False"
           SortExpression="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"
           SortExpression="DataSourceFieldToSortBy"
           Target="window"
           Text="HyperLinkText"
           Visible="True|False"/>

      <asp:TemplateColumn
           FooterText="FooterText"
           HeaderImageUrl="url"
           HeaderText="HeaderText"
           ReadOnly="True|False"
           SortExpression="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>

Comentarios

El control DataGrid muestra los campos de un origen de datos como columnas en una tabla. Cada fila del control DataGrid representa un registro del origen de datos. El control DataGrid admite las operaciones de seleccionar, editar, eliminar, paginar y ordenar.

De manera predeterminada, la propiedad AutoGenerateColumns está establecida en true, de modo que se crea un objeto BoundColumn para cada campo del origen de datos. A continuación, se procesa cada campo como una columna del control DataGrid en el orden de aparición de cada campo en el origen de datos.

También se puede controlar manualmente qué columnas aparecen en el control DataGrid estableciendo la propiedad AutoGenerateColumns en false y elaborando después una lista de las columnas que se desea incluir entre las etiquetas <Columns> de apertura y de cierre. Las columnas especificadas se agregan a la colección Columns en el orden en que aparecen en la lista. Esto permite controlar mediante programación las columnas del control DataGrid.

Nota   El orden en que se muestran las columnas en el control DataGrid se rige por el orden en que aparecen las columnas en la colección Columns. Si bien se puede cambiar mediante programación el orden de las columnas manipulando la colección Columns, resulta más fácil mostrar las columnas en el orden de presentación deseado.
Nota   Se pueden utilizar columnas declaradas explícitamente junto con columnas generadas automáticamente. Cuando se utilizan ambos tipos de columna, se procesan primero las columnas declaradas explícitamente y, a continuación, las columnas generadas automáticamente. Las columnas generadas automáticamente no se agregan a la colección Columns.

Diferentes tipos de columna determinan el comportamiento de las columnas del control. El control DataGrid permite usar los siguientes tipos de columna:

Tipo de columna Descripción
EditCommandColumn Encapsula los comandos de edición más comunes (Edit, Update, Cancel) en un tipo de columna predefinido.
HyperLinkColumn Crea una columna con un conjunto de hipervínculos enlazados al valor de un campo de datos. Por ejemplo, una cuadrícula que muestra una lista de pedidos puede incluir una columna de hipervínculos donde se procesa el campo OrderID como un hipervínculo a una página que muestra los detalles del pedido.
BoundColumn Crea una columna enlazada a un campo del origen de datos y procesada en una celda de tabla mediante estilos. Éste es el tipo de columna predeterminado para el control DataGrid.
ButtonColumn Crea una columna que contiene un botón de comando definido por el usuario, como Add o Remove, por cada elemento de la columna.
TemplateColumn Crea una columna que permite definir el diseño de los controles mediante plantillas de elementos HTML y controles personalizados.

Las siguientes tablas incluyen información sobre las columnas que se pueden declarar para el control DataGrid.

Propiedades básicas DataGridColumn

Estas propiedades están disponibles en todos los tipos de columna DataGrid.

Propiedad Descripción
FooterText Texto que se va a mostrar en el borde inferior de la columna.
HeaderImageUrl Dirección URL de una imagen que se procesa en lugar del texto HeaderText en el encabezado de columna.
HeaderText Texto que se va a mostrar en el borde superior de la columna.
Owner Referencia al control DataGrid al que pertenece la columna enlazada (sólo lectura).

Esta propiedad sólo se usa cuando se programa.

SortExpression Nombre del campo por el que se va a ordenar el origen de datos cuando el usuario especifica la ordenación por el contenido de esta columna.
Visible Es true si se muestra la columna; en caso contrario, false.

Propiedades BoundColumn

Propiedad Descripción
DataField Campo o propiedad del objeto en DataSource que es el origen de datos de la columna.
DataFormatString Cadena de expresión de formato que especifica cómo aparece el campo en la celda. Es similar a las expresiones de formato utilizadas por el método String.Format.
ReadOnly Es true si no se puede editar la columna cuando la fila está en modo de edición; en caso contrario, es false.

Propiedades ButtonColumn

Propiedad Descripción
ButtonType Tipo de botón que se va a procesar. El valor predeterminado es LinkButton.

Cuando se programa, se establece esta propiedad mediante ButtonColumnType (Enumeración).

CommandName Cadena que indica el comando que se va a enviar cuando se hace clic en un botón de la columna. Esta cadena está disponible en el método de control de eventos mediante la propiedad CommandSource del objeto de argumento de evento e.

El control DataGrid reconoce determinados nombres de comando estándar. Estos nombres de comando son Select, Sort, Update, Cancel, Edit, Delete y Page.

DataTextField Nombre de campo de DataSource que está enlazado a la propiedad Text del botón en ButtonColumn.
DataTextFormatString Cadena de expresión de formato que especifica cómo aparece el campo en la celda.
Text Título que se va a mostrar en la cara del botón de esta columna. Si está establecida la propiedad DataTextField, reemplazará este valor.

Propiedades TemplateColumn

Propiedad Descripción
EditItemTemplate Elementos HTML y controles que definen la columna cuando está en modo de edición.
FooterTemplate Elementos HTML y controles que definen el pie de columna.
HeaderTemplate Elementos HTML y controles que definen el encabezado de columna.
ItemTemplate Elementos HTML y controles que definen la columna cuando ésta se muestra.

Propiedades HyperLinkColumn

Propiedad Descripción
DataNavigateUrlField Campo o propiedad del objeto en DataSource que proporciona la dirección URL de la página a la que moverse.
DataNavigateUrlFormatString Expresión de formato que se utiliza con la propiedad Text.
DataTextField Campo o propiedad del objeto en DataSource que es el origen de datos de la propiedad Text de las columnas.
DataTextFormatString Cadena de formato que especifica cómo aparece la propiedad Text en el control.
NavigateUrl Dirección URL de la página a la que moverse. Si está establecida la propiedad DataNavigateUrlField, reemplazará esta propiedad.
Target Ventana de destino que muestra la página. Puede ser el nombre de una ventana o la referencia a un marco como _TOP.
Text Texto del hipervínculo.

Propiedades EditCommandColumn

Propiedad Descripción
ButtonType Tipo de botón que se va a procesar. El valor predeterminado es LinkButton.

Cuando se programa, se establece esta propiedad mediante ButtonColumnType (Enumeración).

EditText Cadena que se va a mostrar en la cara del botón Edit.
UpdateText Cadena que se va a mostrar en la cara del botón Update.
CancelText Cadena que se va a mostrar en la cara del botón Cancel.

Se puede personalizar la apariencia del control DataGrid estableciendo las propiedades de estilo de las diferentes partes del control. En la siguiente tabla se recogen las propiedades de estilo de las distintas partes del control DataGrid.

Propiedades de estilo

Propiedad de estilo Descripción Clase de estilo
AlternatingItemStyle Estilo de cada dos elementos (elementos alternos). TableItemStyle
EditItemStyle Estilo de la fila que se está editando. TableItemStyle
FooterStyle Estilo del pie de página al final de la lista (si existe). TableItemStyle
HeaderStyle Estilo del encabezado al principio de la lista (si existe). TableItemStyle
ItemStyle Estilo de elementos individuales. Style
PagerStyle Estilo de los controles de selección de página. DataGridPagerStyle
SelectedItemStyle Estilo del elemento actualmente seleccionado. TableItemStyle

Para obtener información sobre las propiedades que admite cada clase de estilo, vea Propiedades de los objetos de estilo.

El control DataGrid contiene funciones integradas para mostrar su contenido en segmentos de página. El número de elementos de la página viene determinado por la propiedad PageSize. Si no se ha especificado ningún valor para la propiedad PageSize, el control DataGrid mostrará diez elementos a la vez en la página.

La paginación está deshabilitada de manera predeterminada. Para habilitar la paginación, establezca la propiedad AllowPaging en true y proporcione código para controlar el evento PageIndexChanged. La lógica normal del evento PageIndexChanged consiste en establecer la propiedad CurrentPageIndex en el índice de la página que se desea mostrar y, a continuación, enlazar los datos al control. Al índice de la página que se va a mostrar se suele obtener acceso mediante la propiedad NewPageIndex del objeto DataGridPageChangedEventArgs que se pasa al controlador de eventos.

En la paginación estándar, el control DataGrid supone que el origen de datos contiene todos los elementos que se van a mostrar. El control DataGrid calcula los índices de los elementos de la página actual tomando como base el índice de página (especificado por la propiedad CurrentPageIndex) y el número de elementos de la página (especificado por la propiedad PageSize).

Se puede personalizar aún más la apariencia del control DataGrid agregando mediante programación atributos a las etiquetas <td> y <tr> generadas por el control DataGrid. Los atributos se pueden insertar en las etiquetas proporcionando un controlador de eventos personalizado para el evento ItemCreated o ItemDataBound. En general, se agregan los atributos en el controlador del evento ItemCreated. Sin embargo, si los atributos dependen de datos reales, agregue los atributos en el controlador del evento ItemDataBound.

Para agregar un atributo a la etiqueta <td>, obtenga primero el objeto TableCell que representa la celda del control DataGrid a la que desea agregar el atributo. Se puede usar la colección Control.Controls de la propiedad Item (indizador DataGridItemEventArgs) de DataGridItemEventArgs que se pasa al controlador de eventos para obtener el objeto TableCell deseado. A continuación, se puede usar el método AttributeCollection.Add de la colección Attributes de TableCell para agregar atributos a la etiqueta <td>.

Para agregar un atributo a la etiqueta <tr>, obtenga primero el objeto DataGridItem que representa la fila del control DataGrid a la que desea agregar el atributo. Se puede usar la propiedad Item (indizador DataGridItemEventArgs) de DataGridItemEventArgs que se pasa al controlador de eventos para obtener el objeto DataGridItem deseado. A continuación, se puede usar el método AttributeCollection.Add de la colección Attributes de DataGridItem para agregar atributos a la etiqueta <tr>.

PRECAUCIÓN   El texto no se codifica en HTML antes de mostrarse en el control DataGrid. Esto permite incrustar una secuencia de comandos en las etiquetas HTML del texto. Si los valores del control provienen de la entrada del usuario, asegúrese de validar los valores para evitar puntos vulnerables en la seguridad.

Para obtener más información sobre los eventos y propiedades del control de servidor Web DataGrid, vea la documentación referente a DataGrid (Clase).

Ejemplo

En el siguiente ejemplo se muestra cómo usar el control DataGrid para mostrar los elementos del origen de datos.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>
   <script runat="server">

      Function CreateDataSource() As ICollection

         Dim dt As New DataTable()
         Dim dr As DataRow
         Dim i As Integer
        
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
        
         For i = 0 To 8
            dr = dt.NewRow()
            
            dr(0) = i
            dr(1) = "Item " + i.ToString()
            dr(2) = 1.23 *(i + 1)
            
            dt.Rows.Add(dr)
         Next i
        
         Dim dv As New DataView(dt)
         Return dv

      End Function 'CreateDataSource

      Sub Page_Load(sender As Object, e As EventArgs)
        
         If Not IsPostBack Then
            ' Need to load this data only once.
            ItemsGrid.DataSource = CreateDataSource()
            ItemsGrid.DataBind()
         End If

      End Sub 'Page_Load
 
   </script>
 
<body>
 
   <form runat="server">
 
      <h3>DataGrid Example</h3>
 
      <b>Product List</b>
 
      <asp:DataGrid id="ItemsGrid"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AutoGenerateColumns="true"
           runat="server">

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle> 
 
      </asp:DataGrid>
 
   </form>
 
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>

<html>
<script runat="server">

   ICollection CreateDataSource() 
   {
      DataTable dt = new DataTable();
      DataRow dr;

      dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
      dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
      dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));

      for (int i = 0; i < 9; i++) 
      {
         dr = dt.NewRow();

         dr[0] = i;
         dr[1] = "Item " + i.ToString();
         dr[2] = 1.23 * (i + 1);

         dt.Rows.Add(dr);
      }

      DataView dv = new DataView(dt);
      return dv;
   }

   void Page_Load(Object sender, EventArgs e) 
   {

      if (!IsPostBack) 
      {
         // Need to load this data only once.
         ItemsGrid.DataSource= CreateDataSource();
         ItemsGrid.DataBind();
      }
   }

</script>

<body>

   <form runat="server">

      <h3>DataGrid Example</h3>

      <b>Product List</b>

      <asp:DataGrid id="ItemsGrid"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           HeaderStyle-BackColor="#00aaaa"
           AutoGenerateColumns="true"
           runat="server">

      </asp:DataGrid>

   </form>

</body>
</html>

En el ejemplo siguiente se muestra cómo utilizar la paginación en un control DataGrid.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>

   <script runat="server">
 
      Dim Cart As DataTable
      Dim CartView As DAtaView

      Function CreateDataSource() As ICollection

         Dim dt As New DataTable()
         Dim dr As DataRow
            
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
            
         Dim i As Integer
         For i = 0 To 99
            dr = dt.NewRow()
                
            dr(0) = i
            dr(1) = "Item " + i.ToString()
            dr(2) = 1.23 *(i + 1)
            dt.Rows.Add(dr)
         Next i
            
         Dim dv As New DataView(dt)
         Return dv

      End Function 'CreateDataSource

      Sub Page_Load(sender As Object, e As EventArgs)
            
         If Not IsPostBack Then
            ' Need to load this data only once.
            ItemsGrid.DataSource = CreateDataSource()
            ItemsGrid.DataBind()
         End If
            
         If CheckBox1.Checked Then
            ItemsGrid.PagerStyle.Mode = PagerMode.NumericPages
         Else
            ItemsGrid.PagerStyle.Mode = PagerMode.NextPrev
         End If 

      End Sub 'Page_Load

      Sub Grid_Change(sender As Object, e As DataGridPageChangedEventArgs)
            
         ' Set CurrentPageIndex to the page the user clicked.
         ItemsGrid.CurrentPageIndex = e.NewPageIndex
            
         ' Rebind the data. 
         ItemsGrid.DataSource = CreateDataSource()
         ItemsGrid.DataBind()

      End Sub 'Grid_Change  

</script>
 
<body>
 
   <form runat="server">

      <h3>DataGrid Paging Example</h3>
 
      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowPaging="true"
           AutoGenerateColumns="false"        
           OnPageIndexChanged="Grid_Change">
 
         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>
  
         <PagerStyle Mode="NextPrev">
         </PagerStyle> 

         <Columns>

            <asp:BoundColumn 
                 HeaderText="Number" 
                 DataField="IntegerValue"/>
 
            <asp:BoundColumn 
                 HeaderText="Item" 
                 DataField="StringValue"/>

            <asp:BoundColumn 
                 HeaderText="Price" 
                 DataField="CurrencyValue" 
                 DataFormatString="{0:c}">
 
               <ItemStyle HorizontalAlign="right">
               </ItemStyle>
     
            </asp:BoundColumn>

         </Columns>

      </asp:DataGrid>

      <br>

      <asp:CheckBox id="CheckBox1" 
                    Text="Show page navigation"
                    AutoPostBack="true"
                    runat="server"/>
 
   </form>
 
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>

   <script runat="server">
 
      DataTable Cart;
      DataView CartView;
 
      ICollection CreateDataSource() 
      {
         DataTable dt = new DataTable();
         DataRow dr;
 
         dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
 
         for (int i = 0; i < 100; i++) 
         {
            dr = dt.NewRow();
 
            dr[0] = i;
            dr[1] = "Item " + i.ToString();
            dr[2] = 1.23 * (i+1); 
            dt.Rows.Add(dr);
         }
 
         DataView dv = new DataView(dt);
         return dv;
      }
 
      void Page_Load(Object sender, EventArgs e) 
      { 
 
         if (!IsPostBack) 
         {
            // Need to load this data only once.
            ItemsGrid.DataSource = CreateDataSource();
            ItemsGrid.DataBind();
         }
 
         if (CheckBox1.Checked)
            ItemsGrid.PagerStyle.Mode = PagerMode.NumericPages;
         else
            ItemsGrid.PagerStyle.Mode = PagerMode.NextPrev;

      }
 
      void Grid_Change(Object sender, DataGridPageChangedEventArgs e) 
      {
 
         // Set CurrentPageIndex to the page the user clicked.
         ItemsGrid.CurrentPageIndex = e.NewPageIndex;

         // Rebind the data. 
         ItemsGrid.DataSource = CreateDataSource();
         ItemsGrid.DataBind();
      
      }
 
   </script>
 
<body>
 
   <form runat="server">

      <h3>DataGrid Paging Example</h3>
 
      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowPaging="true"
           AutoGenerateColumns="false"        
           OnPageIndexChanged="Grid_Change">
 
         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>
 
         <PagerStyle Mode="NextPrev">
         </PagerStyle> 

         <Columns>

            <asp:BoundColumn 
                 HeaderText="Number" 
                 DataField="IntegerValue"/>
   
            <asp:BoundColumn 
                 HeaderText="Item" 
                 DataField="StringValue"/>

            <asp:BoundColumn 
                 HeaderText="Price" 
                 DataField="CurrencyValue" 
                 DataFormatString="{0:c}">
 
               <ItemStyle HorizontalAlign="right">
               </ItemStyle>
     
            </asp:BoundColumn>

         </Columns>

      </asp:DataGrid>

      <br>

      <asp:CheckBox id="CheckBox1" 
                    Text="Show page navigation"
                    AutoPostBack="true"
                    runat="server"/>
 
   </form>
 
</body>
</html>

Normalmente, se carga un origen de datos que contiene todos los elementos de la lista cada vez que el control DataGrid muestra una página de información. Esto puede suponer el consumo de muchos recursos cuando el origen de datos es muy grande. La paginación personalizada permite cargar sólo el segmento de datos necesario para mostrar la página.

Para habilitar la paginación personalizada, establezca la propiedad AllowPaging y las propiedades AllowCustomPaging en true y proporcione código para controlar el evento PageIndexChanged. La lógica normal del evento PageIndexChanged consiste en establecer la propiedad CurrentPageIndex en el índice de la página que se desea mostrar y, a continuación, enlazar los datos al control. Al índice de la página que se va a mostrar se suele obtener acceso mediante la propiedad NewPageIndex del objeto DataGridPageChangedEventArgs que se pasa al controlador de eventos. A continuación, cree un origen de datos que contenga los datos que se van a mostrar en una sola página. Tras crear el origen de datos, utilice el método DataBind para enlazar el origen de datos al control DataGrid. Como se carga sólo un segmento de los datos, establezca la propiedad VirtualItemCount en el número total de elementos que desee mostrar en el control DataGrid. De este modo, el control puede determinar el número total de páginas necesario para los controles de paginación.

En la paginación personalizada, el control DataGrid supone que el origen de datos contiene sólo los elementos que se van a mostrar en la página actual. Se muestran todos los elementos del origen de datos hasta alcanzar el número de elementos especificado por la propiedad PageSize.

En el ejemplo siguiente se muestra cómo utilizar la paginación personalizada en un control DataGrid.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>

<html>
   <script runat="server">

      Dim start_index As Integer

      Function CreateDataSource() As ICollection
            
         Dim dt As New DataTable()
         Dim dr As DataRow
            
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
            
         Dim i As Integer
         For i = start_index To (start_index + ItemsGrid.PageSize) - 1
            dr = dt.NewRow()
                
            dr(0) = i
            dr(1) = "Item " + i.ToString()
            dr(2) = 1.23 *(i + 1)
                
            dt.Rows.Add(dr)
         Next i
           
         Dim dv As New DataView(dt)
         Return dv

      End Function 'CreateDataSource
        
      Sub Page_Load(sender As Object, e As EventArgs)
            
         If CheckBox1.Checked Then
            ItemsGrid.PagerStyle.Mode = PagerMode.NumericPages
         Else
            ItemsGrid.PagerStyle.Mode = PagerMode.NextPrev
         End If 

         If Not IsPostBack Then
            start_index = 0
            ItemsGrid.VirtualItemCount = 100
         End If
            
         BindGrid()

      End Sub 'Page_Load

      Sub Grid_Change(sender As Object, e As DataGridPageChangedEventArgs)
            
          ItemsGrid.CurrentPageIndex = e.NewPageIndex
          start_index = ItemsGrid.CurrentPageIndex * ItemsGrid.PageSize
          BindGrid()
 
      End Sub 'Grid_Change

      Sub BindGrid()
            
         ItemsGrid.DataSource = CreateDataSource()
         ItemsGrid.DataBind()

      End Sub 'BindGrid 

   </script>

<body>

   <form runat="server">

      <h3>DataGrid Custom Paging Example</h3>

      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowPaging="true"
           AllowCustomPaging="true"
           AutoGenerateColumns="false"
           OnPageIndexChanged="Grid_Change">

         <PagerStyle NextPageText="Forward"
                     PrevPageText="Back"
                     Position="Bottom"
                     PageButtonCount="5"
                     BackColor="#00aaaa">
         </PagerStyle>

         <AlternatingItemStyle BackColor="yellow">
         </AlternatingItemStyle>

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>

         <Columns>
      
            <asp:BoundColumn HeaderText="Number" 
                 DataField="IntegerValue"/>

            <asp:BoundColumn
                 HeaderText="Item" 
                 DataField="StringValue"/>

            <asp:BoundColumn 
                 HeaderText="Price" 
                 DataField="CurrencyValue" 
                 DataFormatString="{0:c}">

               <ItemStyle HorizontalAlign="right">
               </ItemStyle>
   
            </asp:BoundColumn>

         </Columns>
      
      </asp:DataGrid>

      <br>

      <asp:CheckBox id="CheckBox1" 
           Text = "Show page navigation"
           AutoPostBack="true"
           runat="server"/>

   </form>

</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>

<html>
   <script runat="server">

      int start_index;

      ICollection CreateDataSource() 
      {

         DataTable dt = new DataTable();
         DataRow dr;

         dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
 
         for (int i = start_index; i < start_index + ItemsGrid.PageSize; i++) 
         {
            dr = dt.NewRow();

            dr[0] = i;
            dr[1] = "Item " + i.ToString();
            dr[2] = 1.23 * (i+1);

            dt.Rows.Add(dr);
         }

         DataView dv = new DataView(dt);
         return dv;
      }

      void Page_Load(Object sender, EventArgs e) 
      {

         if (CheckBox1.Checked)
            ItemsGrid.PagerStyle.Mode=PagerMode.NumericPages;
         else
            ItemsGrid.PagerStyle.Mode=PagerMode.NextPrev;

         if (!IsPostBack)
         {
            start_index = 0; 
            ItemsGrid.VirtualItemCount=100; 
         }

         BindGrid();
      
      }

      void Grid_Change(Object sender, DataGridPageChangedEventArgs e) 
      {
       
         ItemsGrid.CurrentPageIndex = e.NewPageIndex;
         start_index = ItemsGrid.CurrentPageIndex * ItemsGrid.PageSize;
         BindGrid();
     
      }

      void BindGrid() 
      {

         ItemsGrid.DataSource=CreateDataSource();
         ItemsGrid.DataBind();
     
      }

   </script>

<body>

   <form runat="server">

      <h3>DataGrid Custom Paging Example</h3>

      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowPaging="true"
           AllowCustomPaging="true"
           AutoGenerateColumns="false"
           OnPageIndexChanged="Grid_Change">

         <PagerStyle NextPageText="Forward"
                     PrevPageText="Back"
                     Position="Bottom"
                     PageButtonCount="5"
                     BackColor="#00aaaa">
         </PagerStyle>

         <AlternatingItemStyle BackColor="yellow">
         </AlternatingItemStyle>

         <HeaderStyle BackColor="#00aaaa">
         </HeaderStyle>

         <Columns>
      
            <asp:BoundColumn HeaderText="Number" 
                 DataField="IntegerValue"/>

            <asp:BoundColumn
                 HeaderText="Item" 
                 DataField="StringValue"/>

            <asp:BoundColumn 
                 HeaderText="Price" 
                 DataField="CurrencyValue" 
                 DataFormatString="{0:c}">

               <ItemStyle HorizontalAlign="right">
               </ItemStyle>
   
            </asp:BoundColumn>

         </Columns>
      
      </asp:DataGrid>

      <br>

      <asp:CheckBox id="CheckBox1" 
           Text = "Show page navigation"
           AutoPostBack="true"
           runat="server"/>

   </form>

</body>
</html>

El control DataGrid también proporciona funciones de ordenación integradas. Cuando está habilitada la ordenación, se procesan controles LinkButton en el encabezado de cada columna para permitir la ordenación de DataGrid por la columna seleccionada. Se provoca el evento SortCommand cuando se hace clic en un control LinkButton. El usuario deberá proporcionar código para el controlador de eventos. La lógica normal del controlador consiste en ordenar la lista y, a continuación, volver a enlazar los datos al control DataGrid.

En el ejemplo siguiente se muestra cómo utilizar la ordenación en un control DataGrid.

<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>
   <script runat="server">
    
      Dim SortExpression As String
 
      Function CreateDataSource() As ICollection

         Dim dt As New DataTable()
         Dim dr As DataRow
         Dim Rand_Num As New Random()
        
         dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
         dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
        
         Dim i As Integer
         For i = 0 To 14
            dr = dt.NewRow()
            
            dr(0) = i
            dr(1) = "Item " & i.ToString()
            dr(2) = 1.23 * Rand_Num.Next(1, 15)
            
            dt.Rows.Add(dr)
         Next i
        
         Dim dv As New DataView(dt)
         dv.Sort = SortExpression
         Return dv

      End Function 'CreateDataSource

      Sub Page_Load(sender As Object, e As EventArgs)
        
         If Not IsPostBack Then
            
            If SortExpression = "" Then
               SortExpression = "IntegerValue"
            End If

            ItemsGrid.DataSource = CreateDataSource()
            ItemsGrid.DataBind()

         End If

      End Sub 'Page_Load

      Sub Sort_Grid(sender As Object, e As DataGridSortCommandEventArgs)
    
         SortExpression = e.SortExpression.ToString()
         ItemsGrid.DataSource = CreateDataSource()
         ItemsGrid.DataBind()

      End Sub 'Sort_Grid
 
   </script>
 
<body>
 
   <form runat="server">
 
      <h3>DataGrid Sorting Example</h3>
 
      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowSorting="true"
           OnSortCommand="Sort_Grid"
           HeaderStyle-BackColor="#00aaaa"
           AutoGenerateColumns="true"/>
 
   </form>
 
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
 
<html>

   <script runat="server">
    
      string SortExpression;
 
      ICollection CreateDataSource() 
      {
         DataTable dt = new DataTable();
         DataRow dr;
         Random Rand_Num = new Random();
 
         dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
 
         for (int i = 0; i < 15; i++) 
         {
            dr = dt.NewRow();
   
            dr[0] = i;
            dr[1] = "Item " + i.ToString();
            dr[2] = 1.23 * Rand_Num.Next(1, 15);
 
            dt.Rows.Add(dr);
         }
 
         DataView dv = new DataView(dt);
         dv.Sort=SortExpression;
         return dv;
      }
 
      void Page_Load(Object sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
 
            if (SortExpression == "")
               SortExpression = "IntegerValue";      
            ItemsGrid.DataSource = CreateDataSource();
            ItemsGrid.DataBind();
         }
      }
 
      void Sort_Grid(Object sender, DataGridSortCommandEventArgs e) 
      {
         SortExpression = e.SortExpression.ToString();
         ItemsGrid.DataSource = CreateDataSource();
         ItemsGrid.DataBind();
      }
 
   </script>
 
<body>
 
   <form runat="server">
 
      <h3>DataGrid Sorting Example</h3>
 
      <asp:DataGrid id="ItemsGrid" runat="server"
           BorderColor="black"
           BorderWidth="1"
           CellPadding="3"
           AllowSorting="true"
           OnSortCommand="Sort_Grid"
           HeaderStyle-BackColor="#00aaaa"
           AutoGenerateColumns="true"/>
 
   </form>
 
</body>
</html>

Vea también

Controles de servidor Web | DataGrid (Clase)

Mostrar:
© 2015 Microsoft