ASP.NET DataGridのホームへ戻る

DataGridButtonColumnの使い方

 

  DataGridButtonColumnを使用したサンプル

 

DataGridButtonColumnを使用したサンプル

 

このサンプルは、ButtonColumnを使用してDataGridの行を選択しています。選択ボタンをクリックすると、その行が黄色の背景色で表示されます。さらに、DataGridの下に選択した行の得意先名とインデックス番号が表示されます。

 

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

 

  DataGridButtonColumnの使い方

  DataGridOnSelectedIndexChangedイベントの使い方

  DataGridSelectedItem/SelectedIndexプロパティの使い方

 

DataGridButtonColumnを表示するには、<Columns>…</Columns>タグ内に記述します。行53-57では、選択ボタンのButtonColumnを定義しています。行54では、HeaderTextプロパティに「選択」を設定してカラムヘッダに表示します。行55では、ButtonTypeプロパティにPushButtonを設定してブッシュ型のボタンを表示します。LinkButtonを設定するとリンク型のボタンが表示されます。

 

56では、CommandNameプロパティにSelectを設定してボタンをクリックしたときに行が選択されるようにしています。CommandNameSelectを設定した場合、ボタンをクリックするとOnSelectedIndexChangedイベントが発生します。OnSelectedIndexChangedイベントでは、DataGridSelectedItemプロパティを参照して選択した行のアイテムを参照することができます。また、SelectedIndexプロパティには、選択された行のインデックス番号が格納されています。DataGridの行を手動で選択するには、DataGridSelectedIndexプロパティにインデックス番号を設定します。SelectedIndex-1を設定すると選択した状態が解除されます。DataGridの行が選択された状態のときは、SelectedItemStyleで設定したスタイルが適用されます。行48では、BackColorプロパティにYellowを設定していますので選択した行が黄色の背景色で表示されます。

 

57では、Textプロパティに「選択」を設定してボタンに表示させています。

 

38: <asp:DataGrid id="dgrdCustomers" runat="server"
 39:   AutoGenerateColumns="False"
 40:   OnSelectedIndexChanged="dgrdCustomers_SelectedIndexChanged"
       :::: >
 48:   <SelectedItemStyle CssClass=”dgrdSelectedItemStyle”  />
 49:   <Columns>

::::
 53:     <asp:ButtonColumn
 54:       HeaderText="
選択"
 55:       ButtonType="PushButton"
 56:       CommandName="select"
 57:       Text="
選択" />
 58:   </Columns> 
 59: </asp:DataGrid>

 

27-30OnSelectedIndexChangedイベントでは、LabelTextプロパティに選択した行の得意先名とインデックス番号を設定して表示しています。

 

27: Sub dgrdCustomers_SelectedIndexChanged(s As Object, e As EventArgs)
 28:   lblMessage.Text = String.Format("<b>{0}</b>
を選択しました.<br>このアイテムの

インデックス番号は <b>{1} </b>です.", _
 29:     dgrdCustomers.SelectedItem.Cells(0).Text, dgrdCustomers.SelectedIndex.ToString)
 30: End Sub

 

Tip

ButtonColumnCommandNameプロパティにSelect以外を設定するには

 

CommandNameプロパティにselect以外の値を設定したときは、DataGridOnItemCommandイベントに制御が渡ります。

 

 

27: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
 28:   Response.Write("<br>ItemCommand:")
 29:   Response.Write("<br>CommandName:" & e.CommandName)
 30: End Sub

 

38: <asp:DataGrid id="dgrdCustomers" runat="server"
 39:   AutoGenerateColumns="False"
 40:   OnItemCommand="dgrdCustomers_ItemCommand"
       :::: >
 49:   <Columns>
 53:     <asp:ButtonColumn
 54:       ButtonType="PushButton"
 55:       CommandName="top"
 56:       Text="Top" />
 57:     <asp:ButtonColumn
 58:       ButtonType="PushButton"
 59:       CommandName="Bottom"
 60:       Text="Bottom" />
 61:   </Columns>
 62: </asp:DataGrid>

 

 

ASP.NET DataGridのホームへ戻る