Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid コンボボックスによるセル編集

WebDataGrid のエディタにコンボボックスを利用する例を紹介致します。

グリッドのセル編集時にはエンドユーザーに値を直接入力してもらう代わりに、コンボボックスから値を選択してもらうシナリオは多くあると思います。WebDataGrid では EditorProvider というセル編集用エディタとして様々なエディタを用意しており、そのうちの一つである DropDownProvider をご利用頂くことで素早くコンボボックスをエディタとして実装することができます。

今回は簡易な発注管理画面での利用例をご紹介いたします。

1.DropDownProvider の定義

デザイナより「グリッド エディター プロバイダーの編集」をクリックし、DropDownProvider を追加します。

image

 

DropDownProvider を追加します。

image

 

DropDownContainerHeight などのプロパティを変更します。

<EditorProviders>
    <ig:DropDownProvider ID="WebDataGrid1_DropDownProvider1">
        <EditorControl
            runat="server"
            ClientIDMode="Predictable"
            DropDownContainerMaxHeight="200px"
            DropDownContainerHeight="97px"
            DropDownContainerWidth="100%"
            EnableAnimations="False"
            EnableDropDownAsChild="False"
            >
            <ClientEvents
                DropDownOpening="WebDataGrid1_DropDown_DropDownOpening"
                SelectionChanged="WebDataGrid1_DropDown_SelectionChanged" />
        </EditorControl>
    </ig:DropDownProvider>
</EditorProviders>

 

続いて用意した DropDownProvider を列の編集エディタとして割り当てます。

WebDataGrid スマートタグから「コアの編集機能」→「セルの編集機能」→「ColumnSettings」を開きます。すると「列の設定」ウィンドウが開きますので、対象の列を選択し、EditorID に DropDownProvider の ID を設定(選択)します。

image

<Behaviors>
    <ig:Activation>
    </ig:Activation>
    <ig:EditingCore>
        <Behaviors>
            <ig:CellEditing>
                <ColumnSettings>
                    <ig:EditingColumnSetting ColumnKey="ID" ReadOnly="true" />
                    <ig:EditingColumnSetting ColumnKey="ItemName" ReadOnly="true"/>
                    <ig:EditingColumnSetting ColumnKey="UnitPrice" ReadOnly="true"/>
                    <ig:EditingColumnSetting ColumnKey="Ammount"
                                             EditorID="WebDataGrid1_DropDownProvider1" />
                    <ig:EditingColumnSetting ColumnKey="TotalPrice" ReadOnly="true" />
                </ColumnSettings>
            </ig:CellEditing>
        </Behaviors>
    </ig:EditingCore>
</Behaviors>

 

2.データの割り当て

DropDownProvider の Items コレクションに選択項目を割り当てます。ASPX、コードビハインドどちらでも割り当てが可能です。今回はコードビハインドでの選択項目割り当てを行います。

DropDownProvider への選択項目割り当ては、DropDownProvider の DataSource プロパティへデータソースを指定してエディタの表示項目(Text)とエディタ値項目(Value)をそれぞれ指定する方法と、Items コレクションへ DropDownItem インスタンスを直接追加する方法があります。ここでは前者のデータソースを指定する方法で DorpDownProvider を初期化します。

 

C#

protected void Page_Load(object sender, EventArgs e)
{
    ...
    // DropDownProvider の参照を取得
    DropDownProvider ddprovider = ((DropDownProvider)WebDataGrid1.EditorProviders["WebDataGrid1_DropDownProvider1"]);

    /* DropDownProvider のリストにアイテムを追加 */
    // データソースを指定する場合
    DataTable list = Session["list"] as DataTable;
    ddprovider.EditorControl.DataSource = list;
    ddprovider.EditorControl.ValueField = "Value";
    ddprovider.EditorControl.TextField = "Text";

    // DropDownProvider に直接値を割り当てる場合
    //ddprovider.EditorControl.Items.Add(new DropDownItem("10", "10"));
    //ddprovider.EditorControl.Items.Add(new DropDownItem("20", "20"));
    //ddprovider.EditorControl.Items.Add(new DropDownItem("30", "30"));
    //ddprovider.EditorControl.Items.Add(new DropDownItem("40", "40"));
}

 

VB.NET

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

    ...
    ' DropDownProvider の参照を取得
    Dim ddprovider As DropDownProvider = DirectCast(WebDataGrid1.EditorProviders("WebDataGrid1_DropDownProvider1"), DropDownProvider)

    ' DropDownProvider のリストにアイテムを追加
    ' データソースを指定する場合
    Dim list As DataTable = TryCast(Session("list"), DataTable)
    ddprovider.EditorControl.DataSource = list
    ddprovider.EditorControl.ValueField = "Value"
    ddprovider.EditorControl.TextField = "Text"

    ' DropDownProvider に直接値を割り当てる場合
    'ddprovider.EditorControl.Items.Add(New DropDownItem("10", "10"))
    'ddprovider.EditorControl.Items.Add(New DropDownItem("20", "20"))
    'ddprovider.EditorControl.Items.Add(New DropDownItem("30", "30"))
    'ddprovider.EditorControl.Items.Add(New DropDownItem("40", "40"))

End Sub

 

3.DropDownProvider の幅調整

DropDownProvider の表示幅を列幅に調整します。

function WebDataGrid1_DropDown_DropDownOpening(sender, eventArgs)
{
    // DropDownProvider の幅を列幅に合わせる
    var width = sender.get_element().style.width;
    document.getElementsByClassName("igdd_DropDownListContainer")[0].style.width = width;
}

 

実行結果(セル編集)

image

 

4.仕入れ数に応じた集計列の計算

ここまでの設定・実装でコンボボックス(ドロップダウン)を利用できるようになりましたので続いてコンボボックスの選択値に応じて TotalPrice 列(集計列)の値を自動計算してみましょう。 DropDownProvider の選択値が変更されるタイミングで発生する SelectionChanged イベントをハンドルし、TotalPrice セルの値を計算します。セルへのアクセス方法はこちらの記事に解説がございます。

function WebDataGrid1_DropDown_SelectionChanged(sender, eventArgs)
{
    // DropDownProvider の選択値を取得
    var selectedValue = eventArgs.getNewSelection()[0].get_value();
    // DropDownProvider のセルを取得
    var activeCell = $find("WebDataGrid1").get_behaviors().get_activation().get_activeCell();
    // 単価セルを取得
    var unitPrice = activeCell.get_row().get_cellByColumnKey("UnitPrice").get_value();
    // 計算
    var newTotal = selectedValue * unitPrice;
    // 集計列のセルを取得
    activeCell.get_row().get_cellByColumnKey("TotalPrice").set_value(newTotal);
}

 

実行結果(自動計算)
 image

DropDownProvider の選択値を変更したタイミングで "TotalPrice" セルの値が更新されました。

 

今回は WebDataGrid でコンボボックスを利用するセル編集方法を紹介致しました。WebDataGrid にはコンボボックス以外にも 日付エディタ、数値エディタ、通貨エディタなど様々なタイプのエディタを用意しています。データ表示の要件に応じてこれらエディタをご利用いただけます。

WebDataGrid エディター プロバイダー
http://help.jp.infragistics.com/Doc/aspnet/2014.1/CLR4.0/?page=WebDataGrid_Editor_Providers.html

 

サンプルはこちらから
WebDataGrid_DropDownProvider_CS.zip
WebDataGrid_DropDownProvider_VB.zip

 

WebDataGrid 関連記事

WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

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

 

弊社製品は機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。

Infragistics 製品トライアルダウンロード

Posted: 01 May 2014, 18:27

Comments

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# May 1, 2014 8:32 PM

Yuki Mita said:

UltraWebGrid では列の FieldLen プロパティを設定することで、セルに入力できる文字数を制限することができました。WebDataGrid では TextEditorProvider の

# August 14, 2014 1:45 AM

Yuki Mita said:

UltraWebGrid では列の FieldLen プロパティを設定することで、セルに入力できる文字数を制限することができました。WebDataGrid では TextEditorProvider の

# August 14, 2014 7:56 PM

Yuki Mita said:

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

# September 1, 2016 3:56 AM
Anonymous comments are disabled