DataGridにメモ型のフィールドを表示するサンプル

 

図 DataGridにメモ型のフィールドを表示するサンプル

 

このサンプルは、DataGridに社員テーブルをバインドして表示しています。DataGridの上にレコードの編集ボタンと件数が表示されますが、このサンプルでは編集ボタンを使用不可にしています。DataGridには、社員テーブルの社員ID、氏名、支社、部署、出身地、入社日、誕生日、備考を表示しています。入社日と誕生日は、yy/mm/ddの形式で表示しています。備考には、データベースのメモ型のフィールドを表示していますので、上下のスクロールボタン▲、▼をクリックしてスクロールできるようにしています。

 

 

◆プログラムDataGridEmployee.aspxのポイント

 

¶ポイント１　DataGridにメモ型のフィールドを表示してスクロールさせるには

 

このサンプルでは、DataGridのTemplateColumnに社員テーブルの備考を表示しています。備考をスクロールさせるには、CSSのoverflowプロパティを使用します。overflowには、visible、scroll、hidden、autoなどを設定することができます。autoを設定すると、すべてのデータが表示できないとき自動的にスクロールバーが表示されます。visibleを設定したときは、すべてのデータが表示されます。overflowプロパティを使用するときは、CSSのheight、widthプロパティも同時に指定します。

 

<asp:TemplateColumn HeaderText="備考">

  <ItemTemplate>

    <div style="height:25; width:300; overflow:auto;">

      <%# Container.DataItem("Notes") %>

    </div>

  </ItemTemplate>

</asp:TemplateColumn>

 

 

overflow: auto

 

overflow: visible

 

overflow: hidden

 

overflow: scroll

図 上から順番にoverflowプロパティに auto, visible, hidden, scrollを設定して表示した例

 

 

¶ポイント２　ImageButtonを使用できないようにするには

 

このサンプルでは、ImageButtonで(iconUpdate.gif)のイメージを表示しています。このImageButtonのEnabledプロパティには、Falseを設定して使用不可にしています。EnabledにFalseを設定したときは、ImageButtonをクリックしてもOnCommandイベントが発生しません。ところが、ImageButtonにマウスを移動するとカーソルが「手」の形状に変化してボタンが有効になっているように錯覚します。この不都合を回避するには、CSSのcursorプロパティにhelpを設定してカーソルがヘルプ「？」に変化するようにします。このとき、ヘルプ情報としてImageButtonのTitleプロパティに設定した「Disabled!」が表示されます。さらに、CSSのfilterプロパティにalpha(opacity=20)を設定してイメージをディミング（薄くぼんやり見えるように）します。

 

.imageButtonOff {

cursor:help;

filter: alpha(opacity=20);

}

 

<asp:ImageButton id="ibtnUpdate" runat="server"

  CommandName="update"

  OnCommand="ibtnUpdate_Command"

  ImageUrl="../img/update.gif"

  Title="Disabled！"

  CssClass="imageButtonOff"

  Enabled="False" />

 

 

◆プログラムDataGridEmployee.aspの解説(HTML編)

 

DataGridEmployee.aspxのHTML編について解説します。行153-160のImageButtonでは、レコード編集ボタンを定義しています。ImageButtonを使用不可にするには、EnabledプロパティにFalseを設定します。CssClassプロパティには、以下のようなCSSを設定してカーソルの形状を変えて、イメージをディミイングしています。

 

.imageButtonOff {

cursor:help;

filter: alpha(opacity=20);

}

 

153: <asp:ImageButton id="ibtnUpdate" runat="server"
158:   CssClass="imageButtonOff"
160:   Enabled="False" />

 

行161-167では、LabelとTextBoxを使用してレコード件数を表示しています。TextBoxのReadOnlyプロパティには、Trueを設定して読み込み専用にしています。レコード件数は、ランタイム時に設定します。

 

行180-247では、DataGridを定義しています。このDataGridでは、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行194-246の<Columns>…</Columns>では、TemplateColumnとBoundColumnを定義しています。行195-205のTemplateColumnでは、ItemTemplateにLinkButtonを定義しています。このLinkButtonは、レコードセレクターとして使用します。

 

行206-210のBoundColumnでは、社員テーブルの社員IDをバインドしています。後続するBoundColumnでは、氏名、支社、部署、出身地をバインドしています。行227-234のBoundColumnでは、入社日と誕生日をバインドしています。これらのBoundColumnには、DataFormatStringプロパティに{0:yy/MM/dd}を設定して日付を、yy/mm/ddの形式で表示しています。

 

行235-245のTemplateColumnでは、ItemTemplateに<div>…</div>タグを定義しています。<div>のstyle=には、CSSのoverflowプロパティにautoを設定しています。行239では、データ連結タグ<%#...%>で社員テーブルの備考をバインドしています。備考がCSSのheight:25、width:300で設定した領域に表示できないときは、自動的にスクロールバーが表示されます。行243のItemStyleでは、備考の背景色と前景色を設定しています。ItemStyeを使用すると、DataGridのカラム毎に背景色、前景色を設定することができます。

 

235:     <asp:TemplateColumn
236:       HeaderText="<div class='dgrdHeader'>備考</div>">
237:       <ItemTemplate>
238:         <div style="height:25; width:300; overflow:auto; font-size: 90%">
239:           <%# Container.DataItem("Notes") %>
240:         </div>
241:       </ItemTemplate>
243:       <ItemStyle BackColor="Lavender" ForeColor="Gray" />
245:     </asp:TemplateColumn>

 

備考の行数を調整するには、CSSのheightプロパティを書き換えます。たとえば、4行で表示するにはheight:50を設定します。この場合、備考が4行以内に収まるときは、スクロールバーが表示されません。

 

図 CSSのheightプロパティを調整して備考を4行で表示した例

 

リスト DataGridEmployee.aspxのソースコード(HTML編)

134: <html>
149: <form id="frmMain" runat="server">
153: <asp:ImageButton id="ibtnUpdate" runat="server"
154:   CommandName="update"
155:   OnCommand="ibtnUpdate_Command"
156:   ImageUrl="../img/update.gif"
157:   Title="Disabled！"
158:   CssClass="imageButtonOff"
160:   Enabled="False" />
161: <asp:Label id="lblRows" runat="server"
162:   Text="件数"
163:   />
164: <asp:TextBox id="txtRows" runat="server"
166:   Columns="3"
167:   ReadOnly="True" />
180: <asp:DataGrid id="dgrdEmployees" runat="server"
181:   AutoGenerateColumns="False"
182:   OnItemCommand="dgrdEmployees_ItemCommand"
183:   OnItemDataBound="dgrdEmployees_ItemDataBound"
189:   EnableViewState="True">
194:   <Columns>
195:     <asp:TemplateColumn
196:       HeaderText="<div class='dgrdHeaderBox'>1</div>">
197:       <ItemTemplate>
198:         <asp:LinkButton id="lbtnSelect" runat="server"
199:           CommandName="Select"
200:           Text="<div class='dgrdItemArrow'>4</div>"

201:           Visible="True" />
202:       </ItemTemplate>
205:     </asp:TemplateColumn>
206:     <asp:BoundColumn ItemStyle-Width="20"
207:       HeaderText="<div class='dgrdHeader'>ID</div>"
208:       DataField="EmployeeID">
210:     </asp:BoundColumn>
           ・・・
227:     <asp:BoundColumn
228:       HeaderText="<div class='dgrdHeader'>入社日</div>"
229:       DataField="HireDate" DataFormatString="{0:yy/MM/dd}">
230:     </asp:BoundColumn>
231:     <asp:BoundColumn
232:       HeaderText="<div class='dgrdHeader'>誕生日</div>"
233:       DataField="BirthDate" DataFormatString="{0:yy/MM/dd}">
234:     </asp:BoundColumn>
235:     <asp:TemplateColumn
236:       HeaderText="<div class='dgrdHeader'>備考</div>">
237:       <ItemTemplate>
238:         <div style="height:25; width:300; overflow:auto; font-size: 90%">
239:           <%# Container.DataItem("Notes") %>
240:         </div>
241:       </ItemTemplate>
243:       <ItemStyle BackColor="Lavender" ForeColor="Gray" />
245:     </asp:TemplateColumn>
246:   </Columns>
247: </asp:DataGrid>
269: </form>
270: </body>
270: </html>

 

 

◆プログラムDataGridEmployee.aspの解説(コード編)

 

DataGridEmployee.aspxは、DataGridに社員テーブルのメモ型のフィールドをスクロールバーつきで表示します。

 

Sub Page_Load()イベントの処理

 

このイベントは、DataGridEmployee.aspxがロードされたときに実行されます。このイベントでは、DataGridに社員テーブルをバインドして表示します。

 

行11-20のIf…Else…End Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、BindDataGrid()を呼び出して、DataGridに社員テーブルをバインドします。ページがポストバックされたときは、Session変数に保存されているDataTableを取得します。Session変数にDataTableが保存されていないときは、BindDataGrid()を呼びます。

 

 

  9: Sub Page_Load()
 11:   If Not IsPostBack Then
 13:     BindDataGrid()
 14:   Else
 16:     mdt = CType(Session("Employees"), DataTable)
 17:     If mdt Is Nothing Then
 18:       BindDataGrid()
 19:     End If
 20:   End If
 21: End Sub

 

 

Sub dgrdEmployees_ItemDataBound()イベントの処理

 

このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録します。これにより、DataGridの任意のセルをクリックして行を選択できるようになります

 

 

56: Sub dgrdEmployees_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 57:   Dim lit As ListItemType = e.Item.ItemType
 58:
 59:   If lit = ListItemType.Item OrElse _
 60:     lit = ListItemType.AlternatingItem OrElse _
 61:     lit = ListItemType.SelectedItem Then
 62:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
 63:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
 64:     e.Item.Style("cursor") = "hand"
 65:   End If
 66: End Sub

 

 

Sub BindDataGrid()の処理

 

このサブプロシージャでは、DataGridに社員テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます

 

行80では、社員テーブルからレコードを抽出するSQLを生成しています。SELECTステートメントには、Top 10のオプションを指定していますので、社員テーブルから10件のレコードが抽出されます。行81では、CreateDataSet()関数を呼び出して、社員テーブルのDataSetを作成しています。

 

行83では、DataSetのTablesコレクションから社員テーブルのDataTableを作成しています。行86-93のWith…End Withでは、DataSetにDataTableをバインドしています。行94では、DataTableのRowsコレクションのCountプロパティからレコード件数を取得してTextBoxに設定しています。行95では、Session変数にDataTableを保存しています。ここで保存したDataTableは、ポストバックされたときに使用します。

 

 

79: Sub BindDataGrid()
 80:   Dim strSQL As String = "Select top 10 * From Employees"
 81:   Dim ds AS DataSet = CreateDataSet(strSQL)
 82:
 83:   mdt = ds.Tables(0)
 85:
 86:   With dgrdEmployees
 87:     .DataSource = mdt
 88:     .DataKeyField = "EmployeeID"
 89:     .DataBind()
 90:     .SelectedIndex = 0
 91:     mintEmployeeID = .DataKeys(0)
 93:   End With
 94:   txtRows.Text = mdt.Rows.Count.ToString()
 95:   Session("Employees") = mdt
 96: End Sub

 

 

Function CreateDataSet()関数の処理

 

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

 

<add key="conStringAccNw"

  value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

 

 

121: Function CreateDataSet(strSQL As String, _
122:   Optional strConnectionString As String = "conStringAccNw") As DataSet
123:   Dim con As New OleDbConnection( _
124:     ConfigurationSettings.AppSettings(strConnectionString))
125:   Dim da As New OleDbDataAdapter(strSQL, con)
126:   Dim ds As New DataSet()
127:
128:   da.Fill(ds)
129:   Return ds
130: End Function

 

 

 

リスト  DataGridEmployee.aspxのソースコード(コード編)

  1: <%@ Page language="vb" SmartNavigation="false" %>
  2: <%@ Import Namespace="System.Data" %>
  3: <%@ Import Namespace="System.Data.OleDb" %>
  4:
  5: <script language="vb" runat="server">
  6: Private mdt As DataTable
  8:
  9: Sub Page_Load()
 21: End Sub
 22:
 56: Sub dgrdEmployees_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 66: End Sub
 67:
 68: Sub dgrdEmployees_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 73: End Sub
 78:
 79: Sub BindDataGrid()
 96: End Sub
 97:
121: Function CreateDataSet(strSQL As String, _
122:   Optional strConnectionString As String = "conStringAccNw") As DataSet
130: End Function
132: </script>

 

ASP.NET DataGrid3のホームへ戻る