DataGrid Web サーバー コントロール
DataGrid コントロールは、テーブル形式のデータ連結グリッドを表示します。このコントロールを使用して各種の列を定義して、グリッドのセルの内容のレイアウト (連結列、テンプレート列) を制御したり、特定の機能 (ボタン列、ハイパーリンク列などの編集) を追加したりできます。このコントロールは、データのページングについても各種のオプションをサポートしています。
<asp:DataGridid="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:DataGridid="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 DatahrefField="DataSourceField" DatahrefFormatString="FormatExpression" DataTextField="DataSourceField" DataTextFormatString="FormatExpression" FooterText="FooterText" HeaderImageUrl="url" HeaderText="HeaderText" href="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>
解説
DataGrid コントロールは、データ ソースのフィールドをテーブル内の列として表示します。DataGrid コントロールの各行は、データ ソース内のレコードを表します。DataGrid コントロールは、選択、編集、削除、ページング、および並べ替えをサポートしています。
既定では、AutoGenerateColumns プロパティは true に設定されていて、データ ソースのフィールドごとに BoundColumn オブジェクトが作成されます。次に、各フィールドが、データ ソース内で出現している順序で DataGrid コントロールの列として表示されます。
DataGrid コントロールに表示される列を手動で制御するには、AutoGenerateColumns プロパティを false に設定し、表示する列のリストを <Columns> の開始タグと終了タグの間に指定します。指定した列は、リストに記述された順序で Columns コレクションに追加されます。これによって、DataGrid コントロール内の列をプログラムによって制御できます。
メモ DataGrid コントロールに表示される列の順序は、Columns コレクションでのそれらの列の出現順序によって制御されます。列の順序は Columns コレクションを操作することによってプログラムによって変更できますが、表示する順序で列を指定しておいた方が簡単です。
メモ 明示的に宣言された列を、自動的に生成された列と組み合わせて使用できます。これらの両方の列を使用する場合は、明示的に宣言された列がまず表示され、次に自動的に生成された列が表示されます。自動的に生成された列は、Columns コレクションには追加されません。
さまざまな列の型に応じて、コントロールでの列の動作は異なります。DataGrid コントロールでは、次の型の列を使用できます。
| 列型 | 説明 |
|---|---|
| EditCommandColumn | 最も一般的な編集コマンド (Edit、Update、Cancel) を定義済みの列型にカプセル化します。 |
| HyperLinkColumn | データ フィールドの値に連結されたハイパーリンクのセットを含む列を作成します。たとえば、受注一覧を表示するグリッドに、受注の詳細を表示するページへのハイパーリンクとして OrderID フィールドが表示されるハイパーリンク列を含めることができます。 |
| BoundColumn | データ ソースのフィールドに連結された列を作成し、スタイルを適用してテーブルのセルに表示します。DataGrid コントロールの既定の列型です。 |
| ButtonColumn | 列の各項目に Add や Remove などのユーザー定義のコマンド ボタンが含まれている列を作成します。 |
| TemplateColumn | カスタムの HTML 要素およびコントロールのテンプレートを使用して、コントロールのレイアウトを定義できる列を作成します。 |
DataGrid コントロールに対して宣言できる列について次の表で説明します。
DataGridColumn の基本プロパティ
これらのプロパティは、すべての DataGrid 列型で使用できます。
| プロパティ | 説明 |
|---|---|
| FooterText | 列の下端に表示されるテキスト。 |
| HeaderImageUrl | 列ヘッダーに HeaderText テキストの代わりに表示するイメージの URL。 |
| HeaderText | 列の上端に表示されるテキスト。 |
| Owner | 連結列が属する DataGrid コントロールへの参照 (読み取り専用)。
このプロパティは、プログラミング時にだけ使用します。 |
| SortExpression | 該当する列の内容による並べ替えが指定されたときに、並べ替えに使用するデータ ソースのフィールド名。 |
| Visible | 列を表示する場合は true。それ以外の場合は false。 |
BoundColumn のプロパティ
| プロパティ | 説明 |
|---|---|
| DataField | 列のデータ ソースである DataSource 内のオブジェクトのフィールドまたはプロパティ。 |
| DataFormatString | セルでのフィールドの表示方法を指定する書式指定式文字列。この文字列は、String.Format メソッドで使用する書式指定式に似ています。 |
| ReadOnly | 行が編集モードになったときに列を編集できない場合は true。それ以外の場合は false。 |
ButtonColumn のプロパティ
| プロパティ | 説明 |
|---|---|
| ButtonType | 表示するボタンの種類。既定値は LinkButton です。
プログラミング時には、ButtonColumnType 列挙体を使用してこのプロパティを設定します。 |
| CommandName | 列のボタンがクリックされたときに送信されるコマンドを示す文字列。この文字列は、e イベント引数オブジェクトの CommandSource プロパティとして、イベント処理メソッドで使用できます。
DataGrid コントロールは、一部の標準コマンド名を認識します。認識されるコマンドには、Select、Sort、Update、Cancel、Edit、Delete、および Page があります。 |
| DataTextField | ButtonColumn のボタンの Text プロパティに連結された、DataSource のフィールド名。 |
| DataTextFormatString | セルでのフィールドの表示方法を指定する書式指定式文字列。 |
| Text | 列のボタンの表面に表示されるキャプション。DataTextField が設定されている場合、この値はオーバーライドされます。 |
TemplateColumn のプロパティ
| プロパティ | 説明 |
|---|---|
| EditItemTemplate | 編集モードになっている列を定義する HTML 要素およびコントロール。 |
| FooterTemplate | 列フッターを定義する HTML 要素およびコントロール。 |
| HeaderTemplate | 列ヘッダーを定義する HTML 要素およびコントロール。 |
| ItemTemplate | 表示されている列を定義する HTML 要素およびコントロール。 |
HyperLinkColumn のプロパティ
| プロパティ | 説明 |
|---|---|
| DatahrefField | リンク先ページの URL を提供する、DataSource 内のオブジェクトのフィールドまたはプロパティ。 |
| DatahrefFormatString | Text プロパティと共に使用される書式指定式。 |
| DataTextField | 列の Text プロパティのデータ ソースである、DataSource 内のオブジェクトのフィールドまたはプロパティ。 |
| DataTextFormatString | コントロールでの Text プロパティの表示方法を指定する書式指定式文字列。 |
| href | リンク先ページの URL。DatahrefField が設定されている場合、このプロパティはオーバーライドされます。 |
| Target | ページを表示するターゲット ウィンドウ。ウィンドウまたは _TOP などのフレーム参照の名前を指定できます。 |
| Text | ハイパーリンクのテキスト。 |
EditCommandColumn のプロパティ
| プロパティ | 説明 |
|---|---|
| ButtonType | 表示するボタンの種類。既定値は LinkButton です。
プログラミング時には、ButtonColumnType 列挙体を使用してこのプロパティを設定します。 |
| EditText | Edit ボタンの表面に表示される文字列。 |
| UpdateText | Update ボタンの表面に表示される文字列。 |
| CancelText | Cancel ボタンの表面に表示される文字列。 |
コントロールのさまざまな部分のスタイル プロパティを設定することによって、DataGrid コントロールの外観をカスタマイズできます。DataGrid コントロールのさまざまな部分に適用できるスタイル プロパティを次の表に一覧表示します。
スタイル プロパティ
| スタイル プロパティ | 説明 | スタイル クラス |
|---|---|---|
| AlternatingItemStyle | 1 つおきの項目 (交互の項目) のスタイル。 | TableItemStyle |
| EditItemStyle | 編集中の項目のスタイル。 | TableItemStyle |
| FooterStyle | リストの末尾のフッターのスタイル (フッターがある場合)。 | TableItemStyle |
| HeaderStyle | リストの先頭のヘッダーのスタイル (ヘッダーがある場合)。 | TableItemStyle |
| ItemStyle | 個別の項目のスタイル。 | Style |
| PagerStyle | ページ選択コントロールのスタイル。 | DataGridPagerStyle |
| SelectedItemStyle | 現在選択されている項目のスタイル。 | TableItemStyle |
各スタイル クラスでサポートされているプロパティについては、「スタイル プロパティ」を参照してください。
DataGrid コントロールには、その内容をページ セグメントに表示するための組み込み機能があります。ページ上の項目数は、PageSize プロパティによって決定されます。PageSize プロパティの値が指定されていない場合、DataGrid コントロールは一度に 10 個の項目をページに表示します。
既定では、このようなページングは無効です。ページングを有効にするには、AllowPaging プロパティを true に設定し、PageIndexChanged イベントを処理するコードを作成します。PageIndexChanged イベントの一般的なロジックでは、表示するページのインデックスを CurrentPageIndex プロパティに設定し、データ ソースをコントロールに再連結します。多くの場合、表示するページのインデックスには、イベント ハンドラに渡された DataGridPageChangedEventArgs オブジェクトの NewPageIndex プロパティを使用してアクセスします。
標準のページングでは、DataGrid コントロールは表示するすべての項目がデータ ソースに含まれていることを前提としています。DataGrid コントロールは、CurrentPageIndex プロパティで指定されているページ インデックスと、PageSize プロパティで指定されているページ上の項目数に基づいて、現在のページ上の項目のインデックスを計算します。
DataGrid コントロールで生成された <td> タグと <tr> タグにプログラムによって属性を追加すると、DataGrid コントロールの外観をより詳細にカスタマイズできます。タグに属性を挿入するには、ItemCreated イベントまたは ItemDataBound イベントのカスタム イベント ハンドラを作成します。通常、属性は ItemCreated イベントのイベント ハンドラで追加します。ただし、属性が実際のデータに依存する場合は、ItemDataBound イベントのハンドラで属性を追加します。
属性を <td> タグに追加するには、まず、属性の追加先の DataGrid コントロールのセルを表す TableCell オブジェクトを取得します。イベント ハンドラに渡された DataGridItemEventArgs の Item プロパティ (DataGridItemEventArgs インデクサ) の Control.Controls コレクションを使用して、目的の TableCell を取得できます。次に、その TableCell の Attributes コレクションの AttributeCollection.Add メソッドを使用して、属性を <td> タグに追加します。
属性を <tr> タグに追加するには、まず、属性を追加する DataGrid コントロールの行を表す DataGridItem を取得します。イベント ハンドラに渡された DataGridItemEventArgs の Item プロパティ (DataGridItemEventArgs インデクサ) を使用して、目的の DataGridItem を取得できます。次に、その DataGridItem の Attributes コレクションの AttributeCollection.Add メソッドを使用して、属性を <tr> タグに追加します。
注意 テキストは、DataGrid コントロールに表示される前に HTML エンコードされません。これにより、テキストの HTML タグ内にスクリプトを埋め込むことができるようになります。コントロールの値がユーザーによって入力された場合は、セキュリティの脆弱性への対策として、入力された値を必ず検証してください。
DataGrid Web サーバー コントロールのプロパティとイベントの詳細については、DataGrid クラスのドキュメントを参照してください。
例
DataGrid コントロールを使用して、データ ソースの項目を表示する方法を次の例に示します。
<%@ 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>
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>
通常は、DataGrid コントロールが情報ページを表示するたびに、リスト内のすべての項目を含むデータ ソースが読み込まれます。この方法だと、データ ソースが非常に大きい場合は、大量のリソースが消費される可能性があります。カスタム ページングを行うことによって、ページの表示に必要なデータ セグメントだけを読み込むようにすることが可能です。
カスタム ページングを有効にするには、AllowPaging プロパティと AllowCustomPaging プロパティを true に設定し、PageIndexChanged イベントを処理するコードを作成します。PageIndexChanged イベントの一般的なロジックでは、表示するページのインデックスを CurrentPageIndex プロパティに設定し、データ ソースをコントロールに再連結します。多くの場合、表示するページのインデックスには、イベント ハンドラに渡された DataGridPageChangedEventArgs オブジェクトの NewPageIndex プロパティを使用してアクセスします。次に、単一ページに表示するデータを含むデータ ソースを作成します。データ ソースの作成後、DataBind メソッドを使用して、そのデータ ソースを DataGrid コントロールに連結します。データのセグメントだけが読み込まれるため、VirtualItemCount プロパティに、この DataGrid コントロール内に表示される項目の合計数を設定します。これによって、ページングに必要なページの合計数が判断されます。
カスタム ページングを使用する場合、DataGrid コントロールは、現在のページに表示する項目だけがデータ ソースに含まれていることを前提にします。PageSize プロパティで指定した項目数を上限として、データ ソース内のすべての項目が表示されます。
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>
DataGrid コントロールには、組み込みの並べ替え機能もあります。並べ替えが有効な場合は、列のヘッダーに LinkButton コントロールが表示されます。このコントロールを使用して、選択されている列を基準として DataGrid を並べ替えることができます。LinkButton をクリックすると、SortCommand イベントが発生します。このイベント ハンドラのコードは用意されていないため、作成する必要があります。ハンドラの一般的なロジックでは、リストを並べ替え、データを DataGrid に再連結します。
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>