データグリッドカラム

データグリッドカラムはデータグリッドを構成する各カラムコンポーネントです。コンポーネントとして独立しておらずデータグリッドの子要素として存在します。データグリッドのプロパティ右上にある[＋]ボタンからカラム追加できます。

ここで追加されるカラムがデータグリッドカラムです。データグリッドカラムはデータグリッドのプロパティにタブ形式で並びます。タブ要素をクリックすると該当のデータグリッドカラムのプロパティにアクセスできます。

データグリッドカラムは次のようにカラムタイプが分かれます。カラムタイプによってセル入力の仕様が変化します。

カラムタイプ	データタイプ	セル入力方式	セルオプション	表示形式	値 (value)の例
テキスト入力	string	直接入力			apple
コンボボックス	string	単数選択フィルタ可能	apple grape melon	リンゴぶどうメロン	apple
複数選択	string (カンマ区切り)	複数選択フィルタ不可	apple grape melon	リンゴ, ぶどう	apple, grape
チェックボックス	boolean	チェック		チェック	true
日付ピッカー	string	日付ピッカー	カレンダー	2019/08/01	2019-08-01
プッシュボタン	string			プッシュボタン	Edit ボタンのラベル

データグリッドカラムにはアクションを設定することができます。イベントはカラムタイプにより[onchange]または[onclick]となります。アクションエディタへのアクセスはデータグリッドのコンテキストメニューから[アクション]- [データグリッドカラム]の順に選択します。アクションエディタにおけるデータグリッドカラムへのアクセスは次のように直接データグリッドカラムのIDを指定します。例) $ui.data_grid_column_id.label
データグリッドカラムのタブをドラッグし、移動先にドロップすることでデータグリッドカラムの並び順を変更することができます
カラムタイプ[テキスト入力]は、1行データのみサポートしています。
改行データはサポート外となります。

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列
幅	数値		100
カラムタイプ	選択	テキスト入力コンボボックス複数選択入力チェックボックス日付ピッカープッシュボタン	テキスト入力
ボタン色	文字列カラーピッカー
ボタンラベル色	文字列カラーピッカー
水平位置	選択	自動左中央右	自動
数値フォーマット	文字列	なし #,#.## #,#.00	なし
日付フォーマット	文字列	yyyy/MM/dd MM/dd/yyyy dd/MM/yyyy	yyyy/MM/dd
表示	真偽	オンオフ	オン
フィルタ	真偽	オンオフ	オフ
フッター	選択	none text sum avg max min count	なし
フッターテキスト	文字列
オプション	表形式
クリックイベント	選択	なしアクション	なし
変更イベント	選択	なしアクション	なし

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string
幅	width	number		100
カラムタイプ	-
ボタン色	buttonColor	string
ボタンラベル色	buttonLabelColor	string
水平位置	hAlign	string	auto left center right	auto
数値フォーマット	numberFormat		none #,#.## #,#.00	none
日付フォーマット	dateFormat		yyyy/MM/dd MM/dd/yyyy dd/MM/yyyy	yyyy/MM/dd
表示	visibility	boolean	true false	true
フィルタ	filter	boolean	true false	false
フッター	footer	string	none text sum avg max min count	none
フッターテキスト	footerText	string
オプション	options	string array
クリックイベント	-
変更イベント	-

イベント

イベント名	説明	カラムタイプ
onchange	セル値の変更が行われ、カーソルが外れた時に発生します。	• テキスト入力 • コンボボックス • 複数選択 • チェックボックス • 日付ピッカー
onclick	セル内のコンポーネントがクリックされた時に発生します。	• プッシュボタン