DataGridのカラム/サイズをランタイム時に変更するには

 

●  DataGridに表示するImageのサイズをランタイム時に変更するサンプル

図 DataGridに表示するImageのサイズをランタイム時に変更するサンプル

 

このサンプルは、DataGridのイメージを拡大/縮小して表示することができます。デフォルトでは、100%（原寸大）で表示されますが、DropDownListからサイズを選択するとそのサイズで表示されます。

 

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

 

▲  DataGridにイメージ(Gif/Jpeg)を表示する方法

▲  イメージのサイズをランタイム時に変更する方法

▲  ImageクラスのFromFile()メソッドの使い方

▲  ImageクラスのGetThumbnailImage()メソッドの使い方

▲  ImageクラスのSave()メソッドの使い方

▲  イメージを直接ブラウザに送信する方法

▲  Response.ContentTypeの使い方

▲  Response.OutputStreamの使い方

 

サンプルの行31-43では、イメージサイズのDropDownListを定義しています。行32では、AutoPostBackプロパティにTrueを設定してアイテムを選択したときにページがポストバックされるようにしています。行33-42では、ListItemで拡大/縮小率を定義しています。行35では、ListItemのSelectedプロパティにTrueを設定してデフォルトで表示されるアイテムを選択しています。

 

31: <asp:DropDownList id="dropImageSize" runat="server"
 32:   AutoPostBack="True" >
 33:   <asp:ListItem Text="25%"  Value="25" />
 34:   <asp:ListItem Text="50%"  Value="50" />
 35:   <asp:ListItem Text="100%" Value="100" Selected="True" />

::::
 42:   <asp:ListItem Text="500%" Value="500" />
 43: </asp:DropDownList>

 

行45-70では、DataGridを定義しています。行54-69の<Columns>…</Columns>では、BoundColumn、TemplateColumnを使用して旅行アルバムテーブルを表示しています。行55-56のBoundColumnでは、旅行アルバムIDをバインドしています。57-58のBoundColumnでは、旅行アルバム名をバインドしています。行59-68のTemplateColumnでは、旅行アルバムテーブルに格納されているイメージのファイル名をもとに写真を表示します。行60-65のItemTemplateでは、Imageコントロールで写真をランタイム時に拡大/縮小して表示します。行62-64では、ImageUrlプロパティに.aspxファイル(DataGridResizeImageDraw.aspx)をバインドしています。.aspxファイルには、QueryStringとしてimg=とsize=の引数を渡しています。img=には、写真のファイル名を設定します。size=には、DropDownListから選択した拡大/縮小率(25,50,100,125,150,175,…500)を設定します。たとえば、アルバム１のImageUrlには、以下のような値が設定されます。

 

ImageUrl=”DataGridResizeImageDraw.aspx?img=trav01.gif&size=100”

 

HTMLの<img>タグに変換されたときは、フルパスに展開されてsrc=には、以下のようなパス名が設定されます。

 

<img src="/aspado/ch2/03/DataGridResizeImageDraw.aspx?img=trav01.gif&size=100" ::: />

 

DataGridResizeImageDraw.aspxは、QueryStringの値をもとにイメージをロードして指定したサイズに拡大/縮小してブラウザに送信します。ImageコントロールのImageUrlに.aspxファイルをバインドすることによりイメージをランタイム時にダイナミックに描写することができます。

 

45: <asp:DataGrid id="dgrdTravel" runat="server"
 46:   AutoGenerateColumns="False"
       :::: >
 54:   <Columns>
 55:     <asp:BoundColumn
 56:       DataField="ID" HeaderText="ID" />
 57:     <asp:BoundColumn
 58:       DataField="Travel" HeaderText="旅行アルバム" />
 59:     <asp:TemplateColumn HeaderText="写真">
 60:       <ItemTemplate>
 61:         <asp:Image runat="server"
 62:           ImageUrl='<%# String.Format("DataGridResizeImageDraw.aspx?img={0}&size={1}", _
 63:             Container.DataItem("Picture"), _
 64:             dropImageSize.SelectedItem.Value) %>' />
 65:       </ItemTemplate>
 66:       <ItemStyle HorizontalAlign="Center"
 67:         BackColor="White" />
 68:     </asp:TemplateColumn>
 69:   </Columns>
 70: </asp:DataGrid>

 

Page_Load()イベントでは、Sub BindDataGrid()を呼び出して旅行アルバムテーブルをバインドします。

 

  6: Sub Page_Load()
  7:   BindDataGrid()
  8: End Sub

 

Sub BindDataGrid()の行18では、OleDbDataAdapterのFill()メソッドで旅行アルバムテーブルをDataSetに格納しています。行19では、DataGridのDataSourceプロパティにDataSetを設定します。行20では、DataBind()メソッドで旅行アルバムテーブルをバインドしています。DataGridのDataBind()メソッドが実行されると、ImageコントロールのImageUrlプロパティにバインドされているDataGridResizeImageDraw.aspxファイルがロードされます。

 

10: Sub BindDataGrid()
 11:   Dim strSQL As String = "Select * From Travel " & _
 12:     "Order by ID"
 13:   Dim con As New OleDbConnection( _
 14:     ConfigurationSettings.AppSettings("conStringNw"))
 15:   Dim da As New OleDbDataAdapter(strSQL, con)
 16:   Dim ds As New DataSet()
 17:
 18:   da.Fill(ds,"Travel")
 19:   dgrdTravel.DataSource = ds
 20:   dgrdTravel.DataBind()
 21: End Sub

 

DataGridResizeImageDraw.aspxのPage_Load()イベントでは、QueryStringで指定されたイメージファイルを指定されたサイズに拡大/縮小してブラウザに送信します。行7では、QueryStringの引数img=の値を取得しています。行8では、QueryStringの引数size=の値を取得しています。QueryStringは、文字型で格納されていますのでConvertクラスのToInt32()メソッドで変換しています。行10では、MapPath()メソッドでイメージファイルのフルパスを取得しています。行11では、ImageクラスのFromFile()メソッドでイメージを生成します。FromFile()メッドの引数には、イメージファイルのフルパス名を指定します。行12-13では、イメージの幅と高さを指定されたサイズに調整しています。行14では、ImageクラスのGetThumbnailImage()メソッドでイメージをリサイズしています。行16-17では、リサイズしたイメージをResponse.OutputStreamでブラウザに直接送信しています。これでDataGridには、ランタイム時にダイナミックに描写された写真が表示されます。

 

  6: Sub Page_Load()  ‘ DataGridResizeImageDraw.aspxファイルのPage_Loadイベント
  7:   Dim strImage As String = Request.QueryString("Img")
  8:   Dim intSize As Integer = Convert.ToInt32( Request.QueryString("Size") )
  9:   Dim dblSize As Double = intSize / 100
 10:   Dim strFilePath As String = MapPath("images/" & strImage)
 11:   Dim img As System.Drawing.Image = System.Drawing.Image.FromFile(strFilePath)
 12:   Dim intWidth As Integer = Int(img.Width * dblSize)
 13:   Dim intHeight As Integer = Int(img.Height * dblSize)
 14:   Dim img2 As System.Drawing.Image = img.GetThumbnailImage(intWidth,intHeight,

Nothing,New System.IntPtr())
 15:
 16:   Response.ContentType = "image/gif"
 17:   img2.Save(Response.OutputStream, ImageFormat.GIF)
 18:   img.Dispose()
 19:   img2.Dispose()
 20: End Sub

 

 

●  DataGridに表示するカラムをランタイム時に選択するサンプル

図 DataGridに表示するカラムをランタイム時に選択するサンプル

 

このサンプルは、DataGridに表示するカラムをランタイム時に選択することができます。画面の左側に表示されているDataGridから、チェックボックスをクリックしてカラムを選択します。たとえば、表示カラムから商品ID、商品名、単位、単価をチェックしてShow DataGridボタンをクリックすると、右側にチェックしたカラムがDataGrid上に表示されます。

 

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

 

▲  DataGridにArrayListをバインドする方法

▲  DataGridにCheckBoxを表示する方法

▲  DataGridのアイテムを検索してCheckBoxがチェックされているか調べる方法

▲  DataGridのBoundColumnのVisibleプロパティを書き換える方法

▲  PanelのVisibleプロパティの使い方

▲  IDbConnection, IDbCommand, IDbDataReaderクラスの使い方

 

サンプルの行73-93では、商品テーブルのフィールド名を表示するDataGridを定義しています。行81-92の<Columns>…</Columns>では、TemplateColumnでCheckBoxと商品テーブルのフィールド名を表示しています。行82-86のTemplateColumnでは、CheckBoxを表示しています。このCheckBoxは、フィールド名を選択するときに使用します。行87-91のTemplateColumnでは、商品テーブルのフィールド名を表示しています。Container.DataItemでは、ArrayListに格納されているフィールド名をバインドしています。DataGridのDataSourceプロパティには、ランタイム時にArrayListを設定します。

 

73:     <asp:DataGrid id="dgrdFields" runat="server"
           :::: >
 81:       <Columns>
 82:         <asp:TemplateColumn>
 83:           <ItemTemplate>
 84:             <asp:CheckBox id="chkSelect" runat="server" />
 85:           </ItemTemplate>
 86:         </asp:TemplateColumn>
 87:         <asp:TemplateColumn HeaderText="表示カラム">
 88:           <ItemTemplate>
 89:             <%# Container.DataItem %>
 90:           </ItemTemplate>
 91:         </asp:TemplateColumn>
 92:       </Columns>
 93:     </asp:DataGrid>

 

行99-128では、Panelコントロールを定義しています。PanelのVisibleプロパティには、Falseを設定して非表示にしています。行101-127では、Panel内に商品テーブルを表示するDataGridを定義しています。PanelのVisibleプロパティがFalseのときは、DataGridは表示されません。行109-126の<Columns>…</Columns>では、BoundColumnで商品テーブルの商品ID、商品名カナ、商品名、仕入先ID、商品区分ID、単位、単価、在庫数、受注数、発注点をバインドしています。BoundColumnのVisibleプロパティは、ランタイム時にTrue/Falseに書き換えます。

 

99:     <asp:Panel id="panProduct" runat="server" visible="False">
101:       <asp:DataGrid id="dgrdProducts" runat="server"
             :::: >

109:         <Columns>
110:           <asp:BoundColumn DataField="ProductID" HeaderText="ID" />
111:           <asp:BoundColumn DataField="ProductKana" HeaderText="カナ" />
112:           <asp:BoundColumn DataField="ProductName" HeaderText="商品名" />

::::
126:         </Columns>
127:       </asp:DataGrid>
128:     </asp:Panel>

 

Page_Load()イベントでは、ArrayListに商品テーブルのフィールド名を格納してDataGridにバインドします。行10-24は、ページが最初にロードされたときに実行されます。行11-22のWith…End Withでは、ArrayListのAdd()メソッドで商品テーブルのフィールド名を追加しています。行23-24では、DataGridのDataSourceプロパティにArrayListを設定してDataBind()メソッドでバインドしています。ここでバインドしたDataGridには、商品テーブルのフィールド名が表示されます。行26では、Sub BindDataGrid()を呼び出してDataGridに商品テーブルをバインドします。

 

  7: Sub Page_Load()
  8:   Dim colFields As ArrayList
  9:   If Not IsPostBack Then
 10:     colFields = New ArrayList()
 11:     With colFields
 12:       .Add("ID")
 13:       .Add("カナ")
 14:       .Add("商品名")             

:::
 22:     End With
 23:     dgrdFields.DataSource = colFields
 24:     dgrdFields.DataBind()
 25:   End If
 26:   BindDataGrid()
 27: End Sub

 

Sub BindDataGrid()では、商品テーブルからレコードを抽出してDataGridにバインドしています。行30では、商品テーブルからレコードを抽出するSQLを生成しています。行31では、Web.configに登録されているデータベースの接続情報を取得しています。行34-38のIf…Else…End Ifでは、データベース接続情報を調べてOleDbConnectio/SqlConnectionのインスタンスを生成しています。IDbConnectionには、OleDbConnection/SqlConnection双方のインスタンスを格納できます。行39では、IDbConnectionのCreateCommand()メソッドでOleDbCommand/SqlCommandのインスタンスを生成しています。IDbCommandには、OleDbCommand/SqlCommand双方のインスタンスを格納できます。行40では、IDbCommandのCommandTextプロパティにSQLのSelectステートメントを設定しています。行41では、IDbConnectionのOpen()メソッドでデータベースを開いています。行42では、IDbCommandのExecuteReader()メソッドでSQLのSelectステートメントを実行してIDbDataReaderを生成して、DataGridのDataSourceプロパティに設定しています。ExecuteReader()メソッドの引数にCommandBehavior.CloseConnectionを指定していますので、IDbDataReaderが解放されるとIDbConnectionのClose()メソッドが実行されてデータベースが閉じられます。行43では、DataGridのDataBind()メソッドでIDbDataReaderをバインドしています。IDbConnection, IDbCommand, IDbDataReaderクラスを使用すると、ランタイム時にOleDbとSqlClientのどちらのクラスを使用するか決めることができます。

 

ここでバインドしたDataGridは、Panelコントロール内に定義されていますので、PanelのVisibleプロパティをTrueに書き換えないと表示されません。PanelのVisibleプロパティは、Show DataGridボタンのOnClickイベントで書き換えます。

 

29: Sub BindDataGrid()
 30:   Dim strSQL as String = "Select Top 10 * From Products"
 31:   Dim strCon as String = ConfigurationSettings.AppSettings("conStringNw")
 32:   Dim con As IDbConnection
 33:
 34:   If strCon.IndexOf("Microsoft.Jet.OLEDB") > 0 Then
 35:     con = New OleDbConnection(strCon)
 36:   Else
 37:     con = New SqlConnection(strCon)             
 38:   End If
 39:   Dim cmd As IDbCommand = con.CreateCommand()
 40:   cmd.CommandText = strSQL
 41:   con.Open()
 42:   dgrdProducts.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
 43:   dgrdProducts.DataBind()
 44: End Sub

 

Show DataGridボタンをクリックすると、Page_Load()イベント、OnClickイベントの順に制御が渡ります。ButtonのOnClickイベントでは、商品テーブルのフィールド名が表示されているDataGridのCheckBoxを調べて、商品テーブルを表示するDataGridのBoundColumnのVisibleプロパティをTrue/Falseに書き換えます。行50-58のFor…Nextでは、DataGridからDataGridItemを取り出してCheckBoxがチェックされているか調べます。チェックされているときは、商品テーブルのDataGridのColumns(i).VisibleプロパティにTrueを設定してBoundColumnを表示します。チェックされていないときは、Columns(i).VisibleプロパティにFalseを設定してBoundColumnを非表示にします。これで商品テーブルのDataGridには、CheckBoxでチェックしたフィールドのみ表示されます。For…NextですべてDataGridItemを処理したら、PanelのVisibleプロパティにTrueを設定して商品テーブルのDataGridを表示します。

 

46: Sub btnShow_Click(s As Object, e As EventArgs)
 47:   Dim i As Integer = 0
 48:   Dim cb As CheckBox
 49:   Dim dgi As DataGridItem
 50:   For Each dgi In dgrdFields.Items
 51:     cb = CType(dgi.Cells(0).Controls(1), CheckBox)
 52:     If cb.Checked Then
 53:       dgrdProducts.Columns(i).Visible = True
 54:     Else
 55:       dgrdProducts.Columns(i).Visible = False
 56:     End If
 57:     i += 1
 58:   Next
 59:   panProduct.Visible = True
 60: End Sub

 

 

●  DataGridのカラム数をランタイム時に増減させるサンプル

図 DataGridのカラム数をランタイム時に増減させるサンプル

 

このサンプルは、DataGridに表示するカラム数を増減させることができます。DataGridのヘッダに表示されてい矢印(⇔)のボタンをクリックすると、担当者名、役職、電話番号のカラムが追加されます。追加されたカラムが表示されている状態で、⇔のボタンをクリックするとこれらのカラムが消えて得意先IDと得意先名のカラムが表示されます。

 

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

 

▲  DataGridのヘッダに矢印(⇔)のボタンを表示する方法

▲  DataGridのOnItemCommandイベントの使い方

▲  DataGridのカラムを表示/非表示に切り替える方法

▲  ButtonコントロールのToolTipプロパティの使い方

 

サンプルの行52-84では、DataGridを定義しています。行58では、DataGridにOnItemCommandイベントを登録しています。このイベントは、DataGridのヘッダに表示されている⇔ボタンをクリックしたときに発生します。このイベントでは、DataGridのBoundColumnのVisibleプロパティをTrue/Falseに書き換えでカラムを表示/非表示に切り替えます。行62-83の<Columns>…</Columns>では、BoundColumn、TemplateColumnで得意先テーブルとボタンを表示しています。

 

52: <asp:DataGrid id="dgrdCustomers" runat="server"

::::
 58:   OnItemCommand="dgrdCustomers_ItemCommand">

62:   <Columns>

::::
 83:   </Columns>
 84: </asp:DataGrid>

 

行63-72では、BoundColumnで得意先テーブルの得意先ID、得意先名、担当者名、役職、電話番号をバインドしています。担当者名、役職、電話番号のVisibleプロパティには、Falseが設定されていますので表示されません。これらのBoundColumnのVisibleプロパティは、ランタイム時に書き換えます。

 

63:     <asp:BoundColumn runat="server"
 64:       DataField="CustomerID" HeaderText="ID" />
 65:     <asp:BoundColumn runat="server"
 66:       DataField="CompanyName" HeaderText="得意先名" />
 67:     <asp:BoundColumn runat="server" Visible="False"
 68:       DataField="ContactName" HeaderText="担当者名" />
 69:     <asp:BoundColumn runat="server" Visible="False"
 70:       DataField="ContactTitle" HeaderText="役職" />
 71:     <asp:BoundColumn runat="server" Visible="False"
 72:       DataField="Phone" HeaderText="電話番号" />

行73-82のTemplateColumnでは、⇔のボタンを表示しています。行74-79のHeaderTemplateでは、Buttonコントロールを定義しています。行76では、CommandNameプロパティにExpandCollapseを設定しています。CommandNameは、DataGridのOnItemCommandイベントでコマンドを識別するときに参照します。行77では、ToolTipプロパティにコマンドのヘルプ情報を設定しています。ヘルプ情報（ツールチップ）は、マウスをコマンド上に移動したときに表示されます。行80のHeaderStyleでは、ボタンの背景色を黄色に設定しています。また、ボタンのテキスト(⇔)を太字で表示しています。行81では、ItemStypeでアイテムの背景色を黒色に設定しています。

 

 

73:     <asp:TemplateColumn>
 74:       <HeaderTemplate>
 75:         <asp:Button id="btnExpandCollapse" runat="server"
 76:           CommandName="ExpandCollapse"
 77:           ToolTip="Expand and Collapse DataGrid Columns"
 78:           Text="⇔" />
 79:       </HeaderTemplate>
 80:       <HeaderStyle BackColor="yellow" Font-Bold="True" />
 81:       <Itemstyle  BackColor="black" />
 82:     </asp:TemplateColumn>

Page_Load()イベントでは、ページが最初にロードされたときにSub BindData()を呼び出して、DataGridに得意先テーブルをバインドしています。

 

6: Sub Page_Load()
  7:   If Not IsPostBack Then
  8:     BindData()
  9:   End If
 10: End Sub

 

Sub BindData()では、得意先テーブルをDataSetに格納してDataGridにバインドしています。行19では、OleDbDataAdapterのFill()メソッドでSQLのSelectステートメントを実行して、得意先テーブルをDataSetに格納しています。行20では、DataSetのTablesコレクションから得意先テーブルのDataViewを生成して、DataGridのDataSourceプロパティに設定しています。行21では、DataGridのDataBind()メソッドで得意先テーブルをバインドしています。これでDataGridには、得意先IDと得意先名が表示されます。担当者名、役職、電話番号は、表示されません。

 

12: Sub BindData()

::::
 19:   da.Fill(ds, "Customers")
 20:   dgrdCustomers.DataSource = ds.Tables("Customers").DefaultView
 21:   dgrdCustomers.DataBind()
 22: End Sub

 

DataGridのヘッダに表示されている⇔ボタンをクリックすると、OnItemCommandイベントが発生します。このイベントでは、CommandNameプロパティを参照してコマンドを識別します。CommandNameがExpandCollapseのときは、Sub ExpandCollapseColumns()を呼びます。

 

24: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 25:   If e.CommandName = "ExpandCollapse" Then
 26:     ExpandCollapseColumns()
 27:   End If
 28: End Sub
 

Sub ExpandCollapseColumns()では、担当者名、役職、電話番号のVisibleプロパティをTrue/Falseに書き換えて表示/非表示に切り替えます。行32-34のFor…Nextでは、DataGridの担当者名、役職、電話番号のカラムを処理しています。行33では、ColumnsコレクションのVisibleプロパティをTrue/Falseに切り替えています。Not dgrdCustomers.Columns(i).Visibleは、VisibleプロパティがTrueならFalse、FalseならTrueになります。行35では、Sub BindData()を呼び出してDataGridを再表示します。これで、DataGridのカラムが増減するようになります。

 30: Sub ExpandCollapseColumns()
 32:   For i=2 to dgrdCustomers.Columns.Count - 2
 33:     dgrdCustomers.Columns(i).Visible = Not dgrdCustomers.Columns(i).Visible
 34:   Next
 35:   BindData()
 36: End Sub