DataGridの列を指定する

 

DataGridDataSetをバインドするとき、表(テーブル)の列を指定して表示します。

 

DataGridの列を指定する (ch53DataGrid1.aspx)

 

DataGridには、列の自動生成機能がサポートされていますのでDataSetをバインドすると表(テーブル)すべての列(フィールド)が表示されます。この機能はデフォルトでTrueに設定されています。手動で列を追加するには、列の自動生成機能を抑止して連結列に使用します。

 

ここで作成するサンプルは、OracleデータベースのProducts表から行(レコード)を抽出して表示します。Products表から行を抽出するには、パッケージ(ProductPackage)に登録されているストアドプロシージャ(GetProductsTop10)を使用します。

 

iSQL*PlusまたはSQL*Plusを起動して、事前にパッケージ仕様部(C:\vbora\sql\ProductPackage.sql)とパッケージ本体部(C:\vbora\sql\ProductsPackageBody.sql)を作成してください。

 

パッケージ仕様部(ProductPackage.sql)

CREATE OR REPLACE PACKAGE ProductPackage AS

  TYPE rcurProducts IS REF CURSOR;

  PROCEDURE GetProductsTop10(

    orcurProducts OUT rcurProducts);

END ProductPackage;

 

 

パッケージ本体部(ProductPackageBody.sql)

CREATE OR REPLACE PACKAGE BODY ProductPackage AS

  PROCEDURE GetProductsTop10(

    orcurProducts OUT rcurProducts) IS

  BEGIN

    OPEN orcurProducts FOR

      SELECT *

      FROM Products

      WHERE ProductID < 11

      ORDER BY ProductID;

  END GetProductsTop10;

END ProductPackage;

 

このサンプルでは、以下のノウハウを習得することができます。

 

DataGridの列自動作成機能を無効にする方法

DataGridに連結列を作成する方法

DataGridのヘッダーをフォーマットする方法

DataGridの連結列をフォーマットする方法

▼連結列のHeaderTextDataFieldDataFormatStringプロパティの使い方

 

1. Webフォーム追加

 

ソリューションエクスプローラからフォルダ[ch5]を右クリックして、新規Webフォーム「ch53DataGrid1」を追加します。

 

2. DataGrid作成

 

ツールボックスの[Webフォーム]から、DataGridをドラッグ&ドロップします。デザイナにDataGrid1のオブジェクトが作成されます。

 

3. 自動フォーマット

 

DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル1]を選択して、[OK]をクリックします。

 

fig5-3-1

自動フォーマットから[プロフェッショナル1]を選択

 

4. プロパティビルダから連結列作成

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[]を選択します。[実行時に自動的に列を作成する]のチェックを外します。「使用可能な列」から[連結列]を選択してiconRightArrowをクリックします。「選択された列」に連結列が表示されたら、連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「ID」、「データフィールド」に「ProductID」を入力します。同様の手順で、商品と単価の連結列を作成します。単価の「データフォーマット式」には「{0:c0}」を入力します。

 

連結列(BoundColumn)プロパティ

ヘッダーテキスト

データフィールド

データフォーマット式

ID

ProductID

 

商品

ProductName

 

単価

UnitPrice

{0:c0}

 

fig5-3-2

DataGridの連結列(BoundColumn)作成

 

連結列を作成したら、画面左側から[書式]を選択します。画面中央の「オブジェクト」から[ヘッダー]を選択したら、「水平方向の配置」から[中央]を選択します。

 

fig5-3-3

書式からヘッダーの水平方向の配置を設定

 

「オブジェクト」から[]をクリックして展開します。[Columns[0] – ID]をクリックして展開したら、[項目]を選択します。「水平方向の配置」から[]を選択します。同様の手順で、[Columns[2] – 単価]をクリックして展開したら[項目]の「水平方向の配置」から[]を選択します。

 

fig5-3-4

列の項目を右揃えに設定

 

[OK]をクリックしてプロパティビルダのダイアログを閉じます。デザイナにID、商品、単価の連結列が表示されます。

 

 

fig5-3-5

DataGridに連結列作成

 

 

5. コードビューに切り替え

 

メニューバーから[表示][コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下のImportsステートメントを追加します。

 

Imports System.Data

Imports Oracle.DataAccess.Client

Imports Oracle.DataAccess.Types

 

Page_Loadイベントに、以下のコードを追加します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  DataGrid1.DataSource = CreateDataSet("ProductPackage.GetProductsTop10")

  DataGrid1.DataBind()

End Sub

 

クラスモジュールの最後に、Function CreateDataSetを追加します。

 

Private Function CreateDataSet(ByVal strPackage As String) As DataSet

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim ds As New DataSet

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(ds)

  Return ds

End Function

 

6. ブラウザに表示

 

ソリューションエクスプローラから[ch53DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridCustomers表の得意先ID、得意先、担当、電話の列がフォーマットされて表示されます。

 

fig5-3-6

DataGridProducts表のID、商品、単価の列を表示

 

■解説

 

DataGridDataSetをバインドしてProducts表をバインドすると、デフォルトでProducts表のすべての列が表示されます。列の自動生成機能を抑止するには、DataGridAutoGenerateColumnsプロパティにFalseを設定します。DataGridに列を追加するには、連結列(BoundColumn)を使用します。

 

DataGridに連結列を追加して、連結列のプロパティを設定するには、「プロパティビルダ」を表示して[]を選択します。連結列の「ヘッダーテキスト(HeaderText)」には、DataGridの列見出し、「データフィールド(DataField)」には表(テーブル)の列名(フィールド名)を設定します。また、金額などの連結列を追加するときは、「データフォーマット式(DataFormatString)」に書式を設定することができます。

 

「プロパティビルダ」から[OK]をクリックしてダイアログを閉じると、<Columns>...</Columns>タグの間に以下のような連結列が生成されます。

 

<asp:DataGrid id="DataGrid1" runat="server"

  AutoGenerateColumns="False" ・・・>

  <Columns>

    <asp:BoundColumn DataField="ProductID"

      HeaderText="ID">

    </asp:BoundColumn>

    <asp:BoundColumn DataField="ProductName"

      HeaderText="商品">

    </asp:BoundColumn>

    <asp:BoundColumn DataField="UnitPrice"

      HeaderText="単価" DataFormatString="{0:c0}">

    </asp:BoundColumn>

  </Columns>

</asp:DataGrid>

 

「プロパティビルダ」の[書式]から列の書式を設定するとItemStyleが生成されます。たとえば、単価列の[項目]を右揃えに設定したときは、以下のようなItemStyleが生成されます。

 

<asp:BoundColumn DataField="UnitPrice"

  HeaderText="単価"

  DataFormatString="{0:c0}">

  <ItemStyle HorizontalAlign="Right"></ItemStyle>

</asp:BoundColumn>

 

DataGridは、連結列の他にボタン列、ハイパーリンク列、テンプレート列などをサポートしています。ボタン列には、「選択」、「編集、更新、キャンセル」、「削除」の3種類のボタンを表示することができます。ハイパーリンク列は、他のページへリンクさせるときに使用します。テンプレート列は、DataGridDropDownListCheckBoxCalendarなどのWebコントロールを表示するときに使用します。なお、ボタン列、テンプレート列などの使い方については、後述する章節で詳しく解説します。