SMART datagrid :: List Cell Editors

List Cell Editors Example 準備中...

リストセルエディターは選択可能な値たちを先にドロップダウンリストに表示して、必ずその値たちの中で一つを選択するか、入力のための参照の値で使えるようにする。 SMART datagridグリッドモジュールにはListCellEditorとSearchCellEditorの二つの種類のリストエディターが存在する。

リストエディターたちはTextCellEditorを受け継ぐので、 maxLengthなどTextCellEditorのプロパティー達が使える。テキストエディターのサンプルを参考する。

1. Dropdown List CellEditor

ListCellEditorをエディターとして使うためにはカラムeditorにtypeを"list"に指定する。そして、エディターのdropdownリストに表示される項目達はまずvaluesプロパティーで指定する。

Code -1

    {
    	"fieldName": "country",
    	"editor": {
    	    "type": "list",
    	    "values": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
    	}
    }

エディターでテキストを入力するかセルの右側のボタンをクリックするとリストが表示される。この時、ListCellEditor.domainOnlyがtrueならユーザーはリストの項目たちの中で一つを選択しなければならないし、項目にない値を入力すれば無視される。下のDomainOnlyカラムで確認する。また、エディターの"values"の代わりにカラムのlookupValuesに項目達が設定されたらその値たちがリストに表示される。

Code -2

    {
    	"fieldName": "country",
        "lookupValues": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
    	"editor": {
    	    "type": "list",
    	    "domainOnly": true
    	}
    }

エディターのlabelsや、カラムのlookupLabelsにvaluesと同じ個数の項目達を設定すれば実際の値の代わりに他の値たちをリストに表示することができる。また、カラムのlookupDisplayをtrueに指定して、lookupValues、lookupLabelsを指定すれば、エディターだけではなくデータセルにも値の代わりにlabelが表示される。

Code -3

    {
        "lookupDisplay": true,
        "lookupLabels": ["in", "out"],
        "lookupValues": ["Import", "Export"],
        "editor": {
            "type": "list",
            "domainOnly": true
        }
    }

Grid - 1

0 rows

2. Search CellEditor

SearchCellEditorのtypeは"search"で指定する。基本機能はListCellEditorと同じで、ユーザーの入力によって指定した時点でイベントを発生させてリストの項目達を動的に変更できる機能が追加されたエディターである。

下のグリッドで"国家"カラムがsearchエディターで設定された。 keyLengthの長さ以上の文字が入力された後、 searchDelalyミリセカンド以上の時間がたてばGridBase.onEditSearchイベントが発生する。イベントハンドラの内でGridBase.fillEditSearchItemsメソッドを利用してリストの項目達を更新する。

Code -4

    var countries = [
        "Algeria", "Argentina", "Australia", "Austria",
        ...
    ];
    grid.onEditSearch = function (grid, index, key) {
        key = key.toLowerCase();
        var items = countries.filter(function (s) {
            return s.toLowerCase().indexOf(key) == 0;
        });
        grid.fillEditSearchItems(index.column, key, items);
    }

SearchCellEditor.requestWhenCtrlEnterやrequestWhenEnterプロパティーを設定して、 ctrl+enter"キーやenter*キーを打った時にkeyLengthやsearchDelayとは関係なくまたイベントを発生させるようにすることができる。 ctrl+enter設定が優先する。

Request When Ctrl+Enter Key Request When Enter Key

Grid - 2

0 rows

ソースを見る

See Also: ListCellEditor; SearchCellEditor; DataColumn.editor; GridBase.onEditSearch; GridBase.fillEditSearchItems; EditOptions; GridView.editOptions