Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid 新規追加行に EditorProvider を利用する

WebDataGrid ではセル編集時にデフォルトで提供されるエディタ以外に EditorProvider という高機能エディタを提供しています。

過去にいくつかの記事で EditorProvider の利用方法をご紹介しておりました。今回は、新規追加行に DropDownProvider という EditorProvider を利用し、行の初期値を規定値の中から選択できるようにします。

 

EditorProvider の準備

EditorProvider は WebDataGrid 配下の EditorProviders コレクションに追加します。EditorProvider の定義方法は下記ブログ記事が参考になります。

WebDataGrid コンボボックスによるセル編集
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2014/05/01/26520.aspx

WebDataGrid でカスケードのドロップダウンを作成する
http://blogs.jp.infragistics.com/blogs/mikam/archive/2016/07/19/26757.aspx

 

DropDownProvider を下記のように定義します。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="550px" Width="670px"
    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
    <Columns>
        ...省略...
    </Columns>
    <EditorProviders>
        <ig:DropDownProvider ID="WebDataGrid1_DropDownProvider1">
            <EditorControl ClientIDMode="Predictable" Width="115px"
                DropDownContainerMaxHeight="200px"
                EnableAnimations="False" EnableDropDownAsChild="False"
                DataSourceID="SqlDataSource2"
                DataKeyFields="ID" ValueField="ID" TextField="ColorName">
                <DropDownItemBinding TextField="ColorName" ValueField="ID">
                </DropDownItemBinding>
            </EditorControl>
        </ig:DropDownProvider>
    </EditorProviders>
    <Behaviors>
        ...省略...
    </Behaviors>
</ig:WebDataGrid>

 

EditorProvider の参照

EditorProvider を定義した後、データを表示する明細行と新規追加行それぞれの「Color」列で EditorProvider を参照します。ここでは1つの EditorProvider を明細行と新規追加行で参照していますが、明細行と新規追加行で別々のエディタプロバイダーを参照することもできます。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="550px" Width="812px"
    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
    ...省略...
    <Behaviors>
        <ig:EditingCore>
            <Behaviors>
                <ig:CellEditing>
                    <ColumnSettings>
                        <%--明細行で利用するエディタプロバイダー--%>
                        <ig:EditingColumnSetting
                            ColumnKey="Color"
                            EditorID="WebDataGrid1_DropDownProvider1" />
                    </ColumnSettings>
                </ig:CellEditing>
                <ig:RowAdding>
                    <ColumnSettings>
                        <%--新規追加行で利用するエディタプロバイダー--%>
                        <ig:RowAddingColumnSetting
                            ColumnKey="Color"
                            EditorID="WebDataGrid1_DropDownProvider1" />
                    </ColumnSettings>
                </ig:RowAdding>
            </Behaviors>
        </ig:EditingCore>
    </Behaviors>
</ig:WebDataGrid>

 

実行結果

新規追加行の「Color」列で入力を開始すると DropDownProvider が表示されました。新規追加行においても、項目の値を規定値の中から選択することで、入力ミスを抑止することができますので非常に有用です。

image

 

サンプル

サンプルはこちらからどうぞ。
WebDataGrid_EditorProvider_AddNew_CS.zip

(本サンプルは16.1.20161.2081バージョンで作成されました) 

 

リファレンス

WebDataGrid でカスケードのドロップダウンを作成する
http://blogs.jp.infragistics.com/blogs/mikam/archive/2016/07/19/26757.aspx

WebDataGrid コンボボックスによるセル編集
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2014/05/01/26520.aspx

WebDataGrid JavaScript からエディタプロバイダにアクセスする方法
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2014/05/13/26540.aspx

WebDataGrid 入力文字数を制限する方法(EditorProvider)
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2014/08/14/26573.aspx

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

Anonymous comments are disabled