Sintaxis declarativa del control de servidor Web DataGrid
Actualización: noviembre 2007
El control DataGrid representa 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
AccessKey="string"
AllowCustomPaging="True|False"
AllowPaging="True|False"
AllowSorting="True|False"
AutoGenerateColumns="True|False"
BackColor="color name|#dddddd"
BackImageUrl="uri"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
Caption="string"
CaptionAlign="NotSet|Top|Bottom|Left|Right"
CellPadding="integer"
CellSpacing="integer"
CssClass="string"
DataKeyField="string"
DataMember="string"
DataSource="string"
DataSourceID="string"
EditItemIndex="integer"
Enabled="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
GridLines="None|Horizontal|Vertical|Both"
Height="size"
HorizontalAlign="NotSet|Left|Center|Right|Justify"
ID="string"
OnCancelCommand="CancelCommand event handler"
OnDataBinding="DataBinding event handler"
OnDeleteCommand="DeleteCommand event handler"
OnDisposed="Disposed event handler"
OnEditCommand="EditCommand event handler"
OnInit="Init event handler"
OnItemCommand="ItemCommand event handler"
OnItemCreated="ItemCreated event handler"
OnItemDataBound="ItemDataBound event handler"
OnLoad="Load event handler"
OnPageIndexChanged="PageIndexChanged event handler"
OnPreRender="PreRender event handler"
OnSelectedIndexChanged="SelectedIndexChanged event handler"
OnSortCommand="SortCommand event handler"
OnUnload="Unload event handler"
OnUpdateCommand="UpdateCommand event handler"
PageSize="integer"
runat="server"
SelectedIndex="integer"
ShowFooter="True|False"
ShowHeader="True|False"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
UseAccessibleHeader="True|False"
Visible="True|False"
Width="size"
>
<AlternatingItemStyle />
<Columns>
<asp:BoundColumn
DataField="string"
DataFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
ReadOnly="True|False"
SortExpression="string"
Visible="True|False"
>
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:BoundColumn>
<asp:ButtonColumn
ButtonType="LinkButton|PushButton"
CausesValidation="True|False"
CommandName="string"
DataTextField="string"
DataTextFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
SortExpression="string"
Text="string"
ValidationGroup="string"
Visible="True|False"
>
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:ButtonColumn>
<asp:EditCommandColumn
ButtonType="LinkButton|PushButton"
CancelText="string"
CausesValidation="True|False"
EditText="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
SortExpression="string"
UpdateText="string"
ValidationGroup="string"
Visible="True|False"
>
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:EditCommandColumn>
<asp:HyperLinkColumn
DatahrefField="string"
DatahrefFormatString="string"
DataTextField="string"
DataTextFormatString="string"
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
href="uri"
SortExpression="string"
Target="string|_blank|_parent|_search|_self|_top"
Text="string"
Visible="True|False"
>
<FooterStyle />
<HeaderStyle />
<ItemStyle />
</asp:HyperLinkColumn>
<asp:TemplateColumn
FooterText="string"
HeaderImageUrl="uri"
HeaderText="string"
SortExpression="string"
Visible="True|False"
>
<FooterStyle />
<HeaderStyle />
<ItemStyle />
<EditItemTemplate>
<!-- child controls -->
</EditItemTemplate>
<FooterTemplate>
<!-- child controls -->
</FooterTemplate>
<HeaderTemplate>
<!-- child controls -->
</HeaderTemplate>
<ItemTemplate>
<!-- child controls -->
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<EditItemStyle />
<FooterStyle />
<HeaderStyle />
<ItemStyle />
<PagerStyle
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|
Groove|Ridge|Inset|Outset"
BorderWidth="size"
CssClass="string"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|
Medium|Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
Height="size"
HorizontalAlign="NotSet|Left|Center|Right|Justify"
Mode="NextPrev|NumericPages"
NextPageText="string"
OnDisposed="Disposed event handler"
PageButtonCount="integer"
Position="Bottom|Top|TopAndBottom"
PrevPageText="string"
VerticalAlign="NotSet|Top|Middle|Bottom"
Visible="True|False"
Width="size"
Wrap="True|False"
/>
<SelectedItemStyle />
</asp:DataGrid>
Comentarios
Antes de utilizar el control DataGrid, pruebe a utilizar el control GridView en su lugar. El control GridView es nuevo en la versión 2.0 de .NET Framework y es el sucesor del control DataGrid.
El control DataGrid muestra los campos de un origen de datos como columnas de una tabla. Cada fila del control DataGrid representa un registro del origen de datos. El control DataGrid admite operaciones de selección, edición, eliminación, paginación y ordenación.
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, cada campo se representa como una columna del control DataGrid en el orden de aparición de cada campo en el origen de datos.
También es posible controlar manualmente qué columnas aparecerán en el control DataGrid; para ello, se establece la propiedad AutoGenerateColumns en false y, después, se muestran en la lista las columnas que se desean incluir entre las etiquetas de apertura y cierre <Columns>. 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 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
Las columnas declaradas explícitamente pueden utilizarse junto con columnas generadas automáticamente. Cuando se utilizan ambos tipos de columna, se muestran 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 |
|---|---|
Encapsula los comandos de edición más comunes (Edit, Update, Cancel) en un tipo de columna predefinido. |
|
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 represente el campo OrderID como un hipervínculo a una página que muestra los detalles del pedido. |
|
Crea una columna enlazada a un campo del origen de datos y que se representa en una celda de tabla mediante estilos. Éste es el tipo de columna predeterminado para el control DataGrid. |
|
Crea una columna que contiene un botón de comando definido por el usuario, como Add o Remove, por cada elemento de la columna. |
|
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
Las propiedades siguientes están disponibles en todos los tipos de columna DataGrid.
Propiedad |
Descripción |
|---|---|
Texto que se va a mostrar en el borde inferior de la columna. |
|
Dirección URL de una imagen que se muestra en lugar del texto HeaderText en el encabezado de columna. |
|
Texto que se va a mostrar en el borde superior de la columna. |
|
Referencia al control DataGrid al que pertenece la columna enlazada (sólo lectura). Esta propiedad sólo se usa cuando se programa. |
|
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. |
|
Es true si se muestra la columna; en caso contrario, es false. |
Propiedades BoundColumn
Propiedad |
Descripción |
|---|---|
Campo o propiedad del objeto de DataSource que es el origen de los datos de la columna. |
|
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 Format. |
|
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 |
|---|---|
Tipo de botón que se va a mostrar. El valor predeterminado es LinkButton. Cuando se programa, esta propiedad se establece mediante ButtonColumnType. |
|
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 incluyen Select, Sort, Update, Cancel, Edit, Delete y Page. |
|
Nombre del campo de DataSource que se enlaza a la propiedad Text del botón de ButtonColumn. |
|
Cadena de expresión de formato que especifica cómo aparece el campo en la celda. |
|
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 |
|---|---|
Elementos HTML y controles que definen la columna cuando está en modo de edición. |
|
Elementos HTML y controles que definen el pie de columna. |
|
Elementos HTML y controles que definen el encabezado de columna. |
|
Elementos HTML y controles que definen la columna cuando ésta se muestra. |
Propiedades HyperLinkColumn
Propiedad |
Descripción |
|---|---|
DatahrefField |
Campo o propiedad del objeto de DataSource que proporciona la dirección URL de la página a la que moverse. |
DatahrefFormatString |
Expresión de formato que se utiliza con la propiedad Text. |
Campo o propiedad del objeto de DataSource que es el origen de los datos de la propiedad Text de las columnas. |
|
Cadena de formato que especifica cómo aparece la propiedad Text en el control. |
|
href |
Dirección URL de la página a la que moverse. Si está establecida la propiedad DatahrefField, reemplazará esta propiedad. |
Ventana de destino que muestra la página. Puede ser el nombre de una ventana o la referencia a un marco como _TOP. |
|
Texto del hipervínculo. |
Propiedades EditCommandColumn
Propiedad |
Descripción |
|---|---|
Tipo de botón que se va a mostrar. El valor predeterminado es LinkButton. Cuando se programa, esta propiedad se establece mediante ButtonColumnType. |
|
Cadena que se muestra en el botón Edit. |
|
Cadena que se muestra en el botón Update. |
|
Cadena que se muestra en el botón Cancel. |
Se puede personalizar la apariencia del control DataGridestableciendo 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 |
|---|---|---|
Estilo de cada dos elementos (elementos alternos). |
||
Estilo de la fila que se está editando. |
||
Estilo del pie de página al final de la lista (si existe). |
||
Estilo del encabezado al principio de la lista (si existe). |
||
Estilo de elementos individuales. |
||
Estilo de los controles de selección de página. |
||
Estilo del elemento actualmente seleccionado. |
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, volver a enlazar el origen de 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).
Para una mayor personalización de la apariencia del control DataGrid, se pueden agregar 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, los atributos se agregan 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. La colección Control.Controls de la propiedad Item (indizador DataGridItemEventArgs) del objeto DataGridItemEventArgs que se pasa en el controlador de eventos se puede utilizar para obtener la TableCell deseada. Después, se puede utilizar 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. La propiedad Item (indizador DataGridItemEventArgs) del objeto DataGridItemEventArgs que se pasa en el controlador de eventos se puede utilizar para obtener el objeto DataGridItem deseado. Después, se puede utilizar el método AttributeCollection.Add de la colección Attributes de DataGridItem para agregar atributos a la etiqueta <tr>.
.gif "Nota de precaución") 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 ayudar a evitar puntos vulnerables en la seguridad. |
Para obtener información detallada sobre los eventos y propiedades del control de servidor Web DataGrid, consulte la documentación referente a la clase DataGrid.
Ejemplo
En el siguiente ejemplo se indica cómo usar el control DataGrid para mostrar los elementos del origen de datos.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="VB" runat="server">
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 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
' Load this data only once.
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End If
End Sub 'Page_Load
</script>
<head runat="server">
<title>DataGrid Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="C#" 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)
{
// Load this data only once.
ItemsGrid.DataSource= CreateDataSource();
ItemsGrid.DataBind();
}
}
</script>
<head runat="server">
<title>DataGrid Example</title>
</head>
<body>
<form id="form1" 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>
En el siguiente ejemplo se muestra cómo utilizar la paginación en un control DataGrid.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="VB" 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>
<head runat="server">
<title>DataGrid Paging Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="C#" 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>
<head runat="server">
<title>DataGrid Paging Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="JScript" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="JScript" runat="server">
var Cart : DataTable;
var CartView : DataView;
function CreateDataSource () : ICollection
{
var dt : DataTable = new DataTable();
var dr : DataRow;
dt.Columns.Add(new DataColumn("IntegerValue", Int32));
dt.Columns.Add(new DataColumn("StringValue", System.String));
dt.Columns.Add(new DataColumn("CurrencyValue", double));
for (var i : int = 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);
}
var dv : DataView = new DataView(dt);
return dv;
}
function Page_Load(sender, e : EventArgs)
{
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;
}
function Grid_Change(sender, e : DataGridPageChangedEventArgs)
{
// Set CurrentPageIndex to the page the user clicked.
ItemsGrid.CurrentPageIndex = e.NewPageIndex;
// Rebind the data.
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
</script>
<head runat="server">
<title>DataGrid Paging Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Function CreateDataSource() As ICollection
' Create sample data for the DataGrid control.
Dim dt As DataTable = New DataTable()
Dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
' Populate the table with sample values.
Dim i As Integer
For i = 0 To 100
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 DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Load sample data only once, when the page is first loaded.
If Not IsPostBack Then
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End If
End Sub
Sub Check_Change(ByVal sender As Object, ByVal e As EventArgs)
' Allow or prevent paging depending on the user's selection.
ItemsGrid.AllowPaging = AllowPagingCheckBox.Checked()
' Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End Sub
Sub Grid_Change(ByVal sender As Object, ByVal e As DataGridPageChangedEventArgs)
' For the DataGrid control to navigate to the correct page when
' paging is allowed, the CurrentPageIndex property must be updated
' programmatically. This process is usually accomplished in the
' event-handling method for the PageIndexChanged event.
' Set CurrentPageIndex to the page the user clicked.
ItemsGrid.CurrentPageIndex = e.NewPageIndex
' Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head2" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>DataGrid AllowPaging Example</h3>
<p>Select whether to allow paging in the DataGrid control.<br />
<asp:CheckBox id="AllowPagingCheckBox"
Text="Allow paging"
AutoPostBack="True"
Checked="True"
OnCheckedChanged="Check_Change"
runat="server" />
</p>
<hr />
<asp:Label ID="Label1" runat="server"
AssociatedControlID="ItemsGrid"
Font-Bold="true">Product List</asp:Label>
<asp:DataGrid id="ItemsGrid" runat="server"
BorderColor="Gray"
BorderWidth="1"
CellPadding="3"
UseAccessibleHeader="true"
AutoGenerateColumns="False"
PageSize="10"
AllowPaging="True"
OnPageIndexChanged="Grid_Change">
<HeaderStyle BackColor="LightBlue" />
<Columns>
<asp:BoundColumn DataField="IntegerValue"
SortExpression="IntegerValue"
ItemStyle-HorizontalAlign="center"
HeaderText="Item" />
<asp:BoundColumn DataField="StringValue"
HeaderText="Description"
ItemStyle-HorizontalAlign="left"
SortExpression="StringValue" />
<asp:BoundColumn DataField="CurrencyValue"
HeaderText="Price"
SortExpression="CurrencyValue"
DataFormatString="{0:c}" />
</Columns>
<ItemStyle HorizontalAlign="Right" />
</asp:DataGrid>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
private ICollection CreateDataSource()
{
// Create sample data for the DataGrid control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(Double)));
// Populate the table with sample values.
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;
}
private void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once, when the page is first loaded.
if (!IsPostBack)
{
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
}
private void Check_Change(Object sender, EventArgs e)
{
// Allow or prevent paging depending
// on the user's selection.
ItemsGrid.AllowPaging = AllowPagingCheckBox.Checked;
// Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
private void Grid_Change(Object sender, DataGridPageChangedEventArgs e)
{
// For the DataGrid control to navigate to the correct page when
// paging is allowed, the CurrentPageIndex property must be updated
// programmatically. This process is usually accomplished in the
// event-handling method for the PageIndexChanged event.
// Set CurrentPageIndex to the page the user clicked.
ItemsGrid.CurrentPageIndex = e.NewPageIndex;
// Rebind the data to refresh the DataGrid control.
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>DataGrid AllowPaging Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>DataGrid AllowPaging Example</h3>
<p>Select whether to allow paging in the DataGrid control.<br />
<asp:CheckBox id="AllowPagingCheckBox"
Text="Allow paging"
AutoPostBack="True"
Checked="True"
OnCheckedChanged="Check_Change"
runat="server" />
</p>
<hr />
<asp:Label runat="server"
AssociatedControlID="ItemsGrid"
Font-Bold="true">Product List</asp:Label>
<asp:DataGrid id="ItemsGrid" runat="server"
BorderColor="Gray"
BorderWidth="1"
CellPadding="3"
AutoGenerateColumns="False"
UseAccessibleHeader="true"
PageSize="10"
AllowPaging="True"
OnPageIndexChanged="Grid_Change">
<HeaderStyle BackColor="LightBlue" />
<Columns>
<asp:BoundColumn DataField="IntegerValue"
SortExpression="IntegerValue"
ItemStyle-HorizontalAlign="center"
HeaderText="Item" />
<asp:BoundColumn DataField="StringValue"
HeaderText="Description"
ItemStyle-HorizontalAlign="left"
SortExpression="StringValue" />
<asp:BoundColumn DataField="CurrencyValue"
HeaderText="Price"
SortExpression="CurrencyValue"
DataFormatString="{0:c}" />
</Columns>
<ItemStyle HorizontalAlign="Right" />
</asp:DataGrid>
</div>
</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 las propiedades AllowPaging y 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, volver a enlazar el origen de 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 de código siguiente se muestra cómo utilizar la propiedad AllowCustomPaging para habilitar la paginación personalizada.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
' Normally, an entire data source is loaded in the DataGrid control,
' which can take up a lot of resources. This example uses custom
' paging, which loads only the segment of data needed to fill a
' single page. In order to query for the appropriate segment of
' data, the index of the first item displayed on a page must be
' tracked as the user navigates between pages.
Dim startIndex As Integer = 0
Function CreateDataSource() As ICollection
' Create sample data for the DataGrid control.
Dim dt As DataTable = New DataTable()
Dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("DateTimeValue", GetType(String)))
dt.Columns.Add(New DataColumn("BoolValue", GetType(Boolean)))
' Populate the table with sample values. When using custom paging,
' a query should only return enough data to fill a single page,
' beginning at the start index.
Dim i As Integer
For i = startIndex To ((startIndex + MyDataGrid.PageSize) - 1)
dr = dt.NewRow()
dr(0) = i
dr(1) = "Item " & i.ToString()
dr(2) = DateTime.Now.ToShortDateString()
If (i Mod 2 <> 0) Then
dr(3) = True
Else
dr(3) = False
End If
dt.Rows.Add(dr)
Next i
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(sender As Object, e As EventArgs)
' Load sample data only once, when the page is first loaded.
If Not IsPostBack Then
' Set the virtual item count, which specifies the total number
' items displayed in the DataGrid control when custom paging
' is used.
MyDataGrid.VirtualItemCount = 200
' Retrieve the segment of data to display on the page from the
' data source and bind it to the DataGrid control.
BindGrid()
End If
End Sub
Sub MyDataGrid_Page(sender as Object, e As DataGridPageChangedEventArgs)
' For the DataGrid control to navigate to the correct page when
' paging is allowed, the CurrentPageIndex property must be updated
' programmatically. This process is usually accomplished in the
' event-handling method for the PageIndexChanged event.
' Set CurrentPageIndex to the page the user clicked.
MyDataGrid.CurrentPageIndex = e.NewPageIndex
' Calculate the index of the first item to display on the page
' using the current page index and the page size.
startIndex = MyDataGrid.CurrentPageIndex * MyDataGrid.PageSize
' Retrieve the segment of data to display on the page from the
' data source and bind it to the DataGrid control.
BindGrid()
End Sub
Sub BindGrid()
MyDataGrid.DataSource = CreateDataSource()
MyDataGrid.DataBind()
End Sub
</script>
<head runat="server">
<title> DataGrid Custom Paging Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DataGrid Custom Paging Example </h3>
<asp:DataGrid id="MyDataGrid"
AllowCustomPaging="True"
AllowPaging="True"
PageSize="10"
OnPageIndexChanged="MyDataGrid_Page"
runat="server">
<HeaderStyle BackColor="Navy"
ForeColor="White"
Font-Bold="True" />
<PagerStyle Mode="NumericPages"
HorizontalAlign="Right" />
</asp:DataGrid>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
// Normally, an entire data source is loaded in the DataGrid control,
// which can take up a lot of resources. This example uses custom
// paging, which loads only the segment of data needed to fill a
// single page. In order to query for the appropriate segment of
// data, the index of the first item displayed on a page must be
// tracked as the user navigates between pages.
int startIndex = 0;
ICollection CreateDataSource()
{
// Create sample data for the DataGrid control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
dt.Columns.Add(new DataColumn("DateTimeValue", typeof(string)));
dt.Columns.Add(new DataColumn("BoolValue", typeof(bool)));
// Populate the table with sample values. When using custom paging,
// a query should only return enough data to fill a single page,
// beginning at the start index.
for (int i = startIndex; i < (startIndex + MyDataGrid.PageSize); i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Item " + i.ToString();
dr[2] = DateTime.Now.ToShortDateString();
dr[3] = (i % 2 != 0) ? true : false;
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once, when the page is first loaded.
if (!IsPostBack)
{
// Set the virtual item count, which specifies the total number
// items displayed in the DataGrid control when custom paging
// is used.
MyDataGrid.VirtualItemCount = 200;
// Retrieve the segment of data to display on the page from the
// data source and bind it to the DataGrid control.
BindGrid();
}
}
void MyDataGrid_Page(Object sender, DataGridPageChangedEventArgs e)
{
// For the DataGrid control to navigate to the correct page when
// paging is allowed, the CurrentPageIndex property must be updated
// programmatically. This process is usually accomplished in the
// event-handling method for the PageIndexChanged event.
// Set CurrentPageIndex to the page the user clicked.
MyDataGrid.CurrentPageIndex = e.NewPageIndex;
// Calculate the index of the first item to display on the page
// using the current page index and the page size.
startIndex = MyDataGrid.CurrentPageIndex * MyDataGrid.PageSize;
// Retrieve the segment of data to display on the page from the
// data source and bind it to the DataGrid control.
BindGrid();
}
void BindGrid()
{
MyDataGrid.DataSource = CreateDataSource();
MyDataGrid.DataBind();
}
</script>
<head runat="server">
<title> DataGrid Custom Paging Example </title>
</head>
<body>
<form id="form1" runat="server">
<h3> DataGrid Custom Paging Example </h3>
<asp:DataGrid id="MyDataGrid"
AllowCustomPaging="True"
AllowPaging="True"
PageSize="10"
OnPageIndexChanged="MyDataGrid_Page"
runat="server">
<HeaderStyle BackColor="Navy"
ForeColor="White"
Font-Bold="True" />
<PagerStyle Mode="NumericPages"
HorizontalAlign="Right" />
</asp:DataGrid>
</form>
</body>
</html>
El control DataGrid también proporciona funciones de ordenación integradas. Cuando está habilitada la ordenación, los controles LinkButton se representan en el encabezado de cada columna para permitir la ordenación de DataGrid por la columna seleccionada. Cuando se hace clic en LinkButton, se provoca el evento SortCommand. 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 siguiente ejemplo se muestra cómo utilizar la ordenación en un control DataGrid.
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="VB" 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>
<head runat="server">
<title>DataGrid Sorting Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="C#" 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>
<head runat="server">
<title>DataGrid Sorting Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="JScript" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script language="JScript" runat="server">
var SortExpression : String;
function CreateDataSource () : ICollection
{
var dt : DataTable = new DataTable();
var dr : DataRow;
var Rand_Num : Random = new Random();
dt.Columns.Add(new DataColumn("IntegerValue", Int32));
dt.Columns.Add(new DataColumn("StringValue", System.String));
dt.Columns.Add(new DataColumn("CurrencyValue", double));
for (var i : int = 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);
}
var dv : DataView = new DataView(dt);
dv.Sort=SortExpression;
return dv;
}
function Page_Load(sender, e : EventArgs)
{
if (!IsPostBack)
{
if (SortExpression == "")
SortExpression = "IntegerValue";
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
}
function Sort_Grid(sender, e : DataGridSortCommandEventArgs)
{
SortExpression = e.SortExpression.ToString();
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
</script>
<head runat="server">
<title>DataGrid Sorting Example</title>
</head>
<body>
<form id="form1" 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>
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Function CreateDataSource() As ICollection
' Create a Random object to mix up the order
' of items in the sample data.
Dim randNum As Random = New Random()
' Create sample data for the DataGrid control.
Dim dt As DataTable = New DataTable()
' Define the columns of the table.
dt.Columns.Add( _
New DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add( _
New DataColumn("StringValue", GetType(String)))
dt.Columns.Add( _
New DataColumn("CurrencyValue", GetType(Double)))
' Populate the table with sample values.
Dim i As Integer
For i = 0 To 8
Dim dr As DataRow = dt.NewRow()
dr(0) = i
dr(1) = "Item " & randNum.Next(1, 15).ToString()
dr(2) = 1.23 * randNum.Next(1, 15)
dt.Rows.Add(dr)
Next
' Persist the data source between posts to
' the server, in the session state.
Session("Source") = dt
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Load sample data when the page is first loaded.
If Not IsPostBack Then
ItemsGrid.DataSource = CreateDataSource()
ItemsGrid.DataBind()
End If
End Sub
Sub Sort_Grid(ByVal sender As Object, _
ByVal e As DataGridSortCommandEventArgs)
' Retrieve the data source from session state.
Dim dt As DataTable = _
CType(Session("Source"), DataTable)
' Create a DataView from the DataTable.
Dim dv As DataView = New DataView(dt)
' The DataView provides an easy way to
' sort. Simply set the Sort property with
' the name of the field to sort by.
dv.Sort = e.SortExpression
' Rebind the data source and specify that
' it should be sorted by the field specified
' in the SortExpression property.
ItemsGrid.DataSource = dv
ItemsGrid.DataBind()
End Sub
Sub Check_Change(ByVal sender As Object, _
ByVal e As EventArgs)
' Allow or prevent sorting depending
' on the user's selection.
ItemsGrid.AllowSorting = _
AllowSortingCheckBox.Checked
' After changing the property, rebind
' the data to refresh the DataGrid control.
' Retrieve data source from session state.
Dim dt As DataTable = _
CType(Session("Source"), DataTable)
' Create a DataView from the DataTable.
Dim dv As DataView = New DataView(dt)
' Rebind the data source.
ItemsGrid.DataSource = dv
ItemsGrid.DataBind()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>
ExtractTemplateRows Example
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>DataGrid AllowSorting Example</h3>
<p>Select whether to allow sorting in the DataGrid control.<br />
<asp:CheckBox id="AllowSortingCheckBox"
Text="Allow sorting"
AutoPostBack="True"
Checked="True"
OnCheckedChanged="Check_Change"
runat="server"/></p>
<hr />
<b>Product List</b>
<asp:DataGrid id="ItemsGrid"
BorderColor="black"
BorderWidth="1"
CellPadding="3"
OnSortCommand="Sort_Grid"
UseAccessibleHeader="true"
AutoGenerateColumns="False"
AllowSorting="True"
runat="server">
<HeaderStyle BackColor="#00aaaa" />
<Columns>
<asp:BoundColumn DataField="IntegerValue"
SortExpression="IntegerValue"
HeaderText="Item"/>
<asp:BoundColumn DataField="StringValue"
SortExpression="StringValue"
HeaderText="Description"/>
<asp:BoundColumn DataField="CurrencyValue"
HeaderText="Price"
SortExpression="CurrencyValue"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right">
</ItemStyle>
</asp:BoundColumn>
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
ICollection CreateDataSource()
{
// Create a Random object to mix up the
// order of items in the sample data.
Random randNum = new Random();
// Create sample data for the DataGrid control.
DataTable dt = new DataTable();
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(Double)));
// Populate the table with sample values.
for (int i = 0; i <= 8; i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = "Item " + randNum.Next(1, 15).ToString();
dr[2] = 1.23 * randNum.Next(1, 15);
dt.Rows.Add(dr);
}
// To persist the data source between posts to the server,
// store it in session state.
Session["Source"] = dt;
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once, when the page is first loaded.
if (!IsPostBack)
{
ItemsGrid.DataSource = CreateDataSource();
ItemsGrid.DataBind();
}
}
void Sort_Grid(Object sender, DataGridSortCommandEventArgs e)
{
// Retrieve the data source from session state.
DataTable dt = (DataTable)Session["Source"];
// Create a DataView from the DataTable.
DataView dv = new DataView(dt);
// The DataView provides an easy way to sort. Simply set the
// Sort property with the name of the field to sort by.
dv.Sort = e.SortExpression;
// Rebind the data source and specify that it should be sorted
// by the field specified in the SortExpression property.
ItemsGrid.DataSource = dv;
ItemsGrid.DataBind();
}
void Check_Change(Object sender, EventArgs e)
{
// Allow or prevent sorting depending on the user's selection.
ItemsGrid.AllowSorting = AllowSortingCheckBox.Checked;
// After changing the property, rebind the data to
// refresh the DataGrid control.
// Retrieve the data source from session state.
DataTable dt = (DataTable)Session["Source"];
// Create a DataView from the DataTable.
DataView dv = new DataView(dt);
// Rebind the data source.
ItemsGrid.DataSource = dv;
ItemsGrid.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>
ExtractTemplateRows Example
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>DataGrid AllowSorting Example</h3>
<p>Select whether to allow sorting in the DataGrid control.<br />
<asp:CheckBox id="AllowSortingCheckBox"
Text="Allow sorting"
AutoPostBack="True"
Checked="True"
OnCheckedChanged="Check_Change"
runat="server"/></p>
<hr />
<b>Product List</b>
<asp:DataGrid id="ItemsGrid"
BorderColor="black"
BorderWidth="1"
CellPadding="3"
OnSortCommand="Sort_Grid"
UseAccessibleHeader="true"
AutoGenerateColumns="False"
AllowSorting="True"
runat="server">
<HeaderStyle BackColor="#00aaaa" />
<Columns>
<asp:BoundColumn DataField="IntegerValue"
SortExpression="IntegerValue"
HeaderText="Item"/>
<asp:BoundColumn DataField="StringValue"
SortExpression="StringValue"
HeaderText="Description"/>
<asp:BoundColumn DataField="CurrencyValue"
HeaderText="Price"
SortExpression="CurrencyValue"
DataFormatString="{0:c}">
<ItemStyle HorizontalAlign="Right">
</ItemStyle>
</asp:BoundColumn>
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>