バージョン

WebDataGrid のエディター プロバイダーとして WebDropDown を使用

始める前に

WebDropDown™ は、すべての他の WebDropDown 機能と共にセル値の項目のドロップダウン リストを表示するために WebDataGrid™ 用のエディター プロバイダーとして使用できます。

達成すること

WebDataGrid で DropDownProvider として WebDropDown を使用する方法を学びます。

次の手順を実行します

  1. Visual Studio™ ツールボックスから、ScriptManager コンポーネント、SqlDataSource コンポーネントおよび WebDataGrid コントロールをフォームにドラッグ アンド ドロップします。

  2. SqlDataSource1 を使用して Northwind データベースの Products テーブルの ProductID、ProductName、SupplierID、CategoryID および QuantityPerUnit に WebDataGrid を バインドします。実行についての詳細は、 「WebDataGrid を SQL データ ソースにバインド」を参照してください。

  3. Visual Studio プロパティ ウィンドウで、 EditorProviders プロパティを指定して、省略記号 (…​) ボタンをクリックし、[グリッド エディター プロバイダー デザイナーの編集] を起動します。

  4. + ボタンをクリックし、使用できるエディター プロバイダーのドロップダウン リストから DropDownProvider を選択します。

  5. DropDownProvider1 としてエディターの ID をそのままにしておきます。この ID は列のエディターを設定するときに後で必要になります。

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 01.png
  1. EditorControl プロパティを展開して、以下のプロパティを設定します。

プロパティ 値

DataSourceID

SqlDataSource1

DropDownOrientation

BottomLeft

TextField

ProductName

ValueField

ProductID

  1. [適用] と [OK] をクリックしてデザイナーを閉じます。

  2. Behaviors プロパティを指定して、省略記号 (…​) ボタンをクリックし、[グリッド動作の編集] ダイアログを起動します。

  3. 編集を有効にするには左のリストで Cell Editing 動作チェックボックスをチェックします。

  4. 右のプロパティ グリッドで ColumnSettings プロパティを指定して、省略記号 (…​) ボタンをクリックして、[列設定] ダイアログを起動します。

  5. WebDataGrid を構成して ProductName 列の編集のために DropDownProvider を使用します。

    • [項目の追加] ボタンをクリックして列設定を追加します。

    • ProductName として ColumnKey プロパティを設定します。

    • EditorID プロパティを使用できるプロバイダーのドロップダウン リストから DropDownProvider1 に設定します。

    • [適用] と [OK] ボタンをクリックして [列設定] ダイアログを閉じます。

    • [適用] と [OK] をクリックして [グリッド動作の編集] ダイアログを閉じます。

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 02.png
  1. アプリケーションを保存して実行します。ProductName 列のセルが編集モードになると、以下の画像のように項目のドロップダウン リストが表示されることがわかります。

WebDataGrid Using WebDropDown as an editor provider for WebDataGrid 03.png