DataGridにカラムを選択する機能を追加したサンプルこのサンプルは、DataGridに表示するカラムをランタイム時に選択することができます。カラム選択のボタンをクリックすると子ウィンドウが表示されます。子ウィンドウには、2個のListBoxが表示されます。左側のListBoxには、選択可能なカラムが表示されます。右側のListBoxには、選択されたカラムが表示されます。デフォルトの状態では、得意先名が選択された状態になっています。ボタンをクリックします。右側のListBoxに選択したカラムが移動します。ボタンをクリックすると、すべてのカラムが選択されます。ボタンをクリックします。ボタンをクリックします。最後に[適用]ボタンをクリックすると、親ウィンドウのDataGridに選択したカラムが表示されます。子ウィンドウから適用ボタンをクリックしても、子ウィンドウは開いた状態になっていますので、表示カラムを再選択して何回でも繰り返すことができます。子ウィンドウから、[閉じる]ボタンをクリックすると、子ウィンドウを閉じます。DataGridのカラムをランタイム時に追加するにはこのサンプルでは、Page_LoadイベントでDataGridのカラムをダイナミックに追加しています。BoundColumn()のようにインスタンスを生成して、HeaderText、DataFieldなどのプロパティを設定してからDataGridのColumnsコレクションのAdd()メソッドで追加します。DataGridには、BoundColumn、ButtonColumn、HyperLinkColumn、EditCommandColumnなどのカラムを追加することができます。TemplateColumnもダイナミックに追加することができますが、ItemTemplate専用のクラスを作成する必要があります。TemplateColumnを追加する方法については、後述するNoteを参照してください。複数のアイテムを選択するには子ウィンドウからカラムを選択するのに左右2個のListBoxを使用しています。複数のアイテムを選択するときは、ListBoxを2個作成してアイテムを移動させると使い勝手のよいユーザインタフェースになります。ListBox間でアイテムを移動するには、ListBoxのItemsコレクションのAdd()、RemoveAt()メソッドを使用します。...Nextループを使用してItemsコレクションからListItemを取得します。ListBoxのすべてのアイテムを削除するには、ItemsコレクションのClear()メソッドを使用します。1個のListBoxから複数のアイテムを選択することもできますが、このサンプルのように複数のカラムを選択するときは、カラムの順番を変更できないのであまり使い勝手がよくありません。子ウィンドウから親ウィンドウにデータを渡すにはこのサンプルでは、子ウィンドウから選択したカラムを親ウィンドウに渡すのにSession変数を使用しています。子ウィンドウから親ウィンドウをポストバックさせるために、親ウィンドウのTextBoxに、選択したカラムを設定して書き換えています。TextBoxが書き換えられたときに親ウィンドウをポストバックさせるには、TextBoxにクライアント側で動作するonPropertyChangeイベントを登録します。このイベントでは、Page.GetPostBackEventReference()メソッドが生成したJavaScriptを実行させてWebページをポストバックします。TextBoxを経由して親ウィンドウに情報を渡すこともできますが、Session変数を使用したときは、テキストデータの他にDataSet、DataTableなどのオブジェクトも渡すことができます。Session変数を使用すると複数の情報を渡すことができます。◆メインプログラムDataGridSelectingColumns.aspxの解説(HTML編)DataGridSelectingColumns.aspxのプレゼンテーションコンテンツの部分について解説します。行155-161のImageButtonでは、カラム選択ボタンを定義しています。このImageButtonには、OnCommandイベントが登録されています。OnCommandイベントでは、子ウィンドウを開きます。行162-168のLabelとTextBoxでは、件数を表示しています。行181-208では、DataGridを定義しています。このDataGridには、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。このサンプルでは、ランタイム時にDataGridのカラムを生成しますので、EnableViewStateプロパティにFalseを設定してDataGridをViewStateに保存しないようにしています。EnableViewStateプロパティにFalseを設定すると、Webページロード時のオーバヘッドを軽減することができます。行195-207の<Columns>...</Columns>では、TemplateColumnを定義しています。行196-206のTemplateColumnのItemTemplateでは、LinkButtonを定義しています。このLinkButtonは、レコードセレクターとして使用します。行217-222では、メッセージを表示するTextBoxを定義しています。このTextBoxのReadOnlyプロパティには、Trueを設定して読み込み専用にしています。行227-230では、Buttonを定義しています。このButtonのVisibleプロパティには、Falseを設定して非可視状態にしています。このButtonには、OnClickイベントが登録されています。OnClickイベントは、子ウィンドウから親ウィンドウをポストバックさせたときに実行されます。</html>◆メインプログラムDataGridSelectingColumns.aspxの解説(コード編)DataGridSelectingColumns.aspxは、子ウィンドウから選択したDataGridのカラムを取得してランタイム時にダイナミックに追加します。子ウィンドウから選択したカラムは、Session変数に保存して親ウィンドウに渡します。Page_Load()イベントの処理このイベントは、DataGridSelectingColumns.aspxがロードされたときに実行されます。このイベントでは、クライアント側で動作するイベントの登録と、DataGridのカラムをダイナミックに追加して表示します。行10では、メッセージを表示するTextBoxにクライアント側で動作する、onPropertyChangeイベントを登録しています。onPropertyChangeイベントでは、Webページをポストバックします。GetPostBackEventReferenece()メソッドは、WebページをポストバックするJavaScriptを生成します。Webページがポストバックされると、btnRefreshイベントが実行されます。Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、Session変数にデフォルトのカラムとして得意先名(CompanyName)を保存します。ページがポストバックされたときは、Session変数に格納されているカラム情報を取得します。行17では、AddColumns()を呼び出してDataGridにダイナミックにカラムを追加します。AddColumns()の引数には、DataGridに追加するカラムを指定します。行18では、BindDataGrid()を呼び出してDataGridに得意先テーブルをバインドして表示します。dgrdCustomers_ItemDataBound()イベントの処理このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録します。ibtnColumns_Command()イベントの処理このイベントは、Webページからカラムの追加ボタンをクリックしたときに発生します。このイベントでは、InsertScriptBlock()を呼び出して、子ウィンドウを開きます。AddColumns()の処理このサブプロシージャでは、DataGridにカラムを追加します。AddColumnsは、Page_Loadイベントから呼ばれます。行50では、引数に指定されたカラムを分割して配列変数に格納します。引数には、カラムがコンマ区切りで指定されています。ContactName"行53-67のFor...Nextでは、配列変数からカラムを取り出してAddCustomerID()/AddColumn()を呼び出しています。AddCustomerID()は、DataGridに得意先IDのカラムを追加します。AddColumn()は、DataGridにその他のカラムを追加します。AddCustomerID()/AddColumn()には、引数としてBoundColumnのHeaderTextとDataFieldプロパティに設定する値を指定します。AddColumn()の処理このサブプロシージャでは、DataGridにカラムを追加します。AddColumnは、AddColumns()から呼ばれます。行71では、BoundColumnのインスタンスを生成しています。Withでは、BoundColumnのHeaderText、DataFieldプロパティに値を設定しています。行76では、DataGridのColumnsコレクションのAdd()メソッドでBoundColumnを追加しています。AddCustomerID()の処理このサブプロシージャでは、DataGridに得意先IDのカラムを追加します。AddCustomeIDは、AddColumns()から呼ばれます。行80では、BoundColumnのインスタンスを生成しています。Withでは、BoundColumnのHeaderText、DataField、ItemStyleプロパティに値を設定しています。行86では、DataGridのColumnsコレクションのAdd()メソッドでBoundColumnを追加しています。BindDataGrid()の処理このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます。InsertScriptBlock()の処理このサブプロシージャでは、子ウィンドウを開くJavaScriptを生成して登録します。InsertScriptBlockは、カラムの選択ボタンをクリックしたときに、ボタンのOnCommandイベントから呼ばれます。行102-104では、JavaScriptのwindow.open()メソッドの引数に指定するオプションを生成しています。Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。language='javascript'>window.open('PopupColumns.aspx','_blank','features');</script>JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルPopupColumns.aspxを指定します。行111では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録します。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。CreateDataSet()関数の処理この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetのの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。</script>◆サブプログラムPopupColumns.aspxの解説(HTML編)子ウィンドウのWebフォームには、2個のListBoxとカラムを移動する4個のボタンを作成しています。左側のListBoxには、選択可能なカラムを表示します。右側のListBoxには、選択済みのカラムを表示します。ListBox間でカラムを移動するには、4種類のボタンを使用します。行145-150では、選択可能なカラム(候補カラム)を表示するListBoxを定義しています。このListBoxには、SelectionModeプロパティにSingleを設定していますので、複数のアイテムを選択することができません。行180-185では、選択済みのカラム(表示カラム)を表示するListBoxを定義しています。このListBoxにも、SelectionModeプロパティにSingleを設定していますので、複数のアイテムを選択することができません。行155-173では、4種類のButtonを定義しています。右矢印のボタンは、左側のListBoxからアイテムを選択するときに使用します。左矢印のボタンは、右側のListBoxからアイテムを戻すときに使用します。矢印が2個表示されているボタンは、ListBoxのすべてのアイテムを移動します。これらのButtonには、OnClickイベントを登録しています。OnClickイベントでは、ListBox間でアイテムを移動します。ボタンの矢印は、Webdingsフォントを使用して表示しています。