データグリッドカラム

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

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

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

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

ノート

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

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string		カラムの一意識別子
2	ラベル	文字列		label	string		カラムのヘッダーラベル
3	幅	数値	100	width	number	100	カラムの幅
4	カラムタイプ	選択 1. テキスト入力 2. コンボボックス 3. 複数選択入力 4. チェックボックス 5. 日付ピッカー 6. プッシュボタン	テキスト入力				カラムの入力タイプ（アクションプロパティなし）
5	ボタン色	文字列 カラーピッカー		buttonColor	string		プッシュボタンの色
6	ボタンラベル色	文字列 カラーピッカー		buttonLabelColor	string		プッシュボタンのラベル色
7	水平位置	選択 1. 自動 2. 左 3. 中央 4. 右	自動	hAlign	string	auto	セル内容の水平配置
8	数値フォーマット	文字列 1. なし 2. #,#.## 3. #,#.00	なし	numberFormat		none	数値の表示フォーマット
9	日付フォーマット	文字列 1. yyyy/MM/dd 2. MM/dd/yyyy 3. dd/MM/yyyy	yyyy/MM/dd	dateFormat		yyyy/MM/dd	日付の表示フォーマット
10	表示	真偽	ON	visibility	boolean	true	カラムの表示状態
11	フィルタ	真偽	OFF	filter	boolean	false	フィルタ機能の有効化
12	フッター	選択 1. none 2. text 3. sum 4. avg 5. max 6. min 7. count	なし	footer	string	none	フッターの集計タイプ
13	フッターテキスト	文字列		footerText	string		フッターに表示するテキスト
14	オプション	表形式		options	string array		選択肢オプション
15	クリックイベント	選択 1. なし 2. アクション	なし				クリック時のイベント
16	変更イベント	選択 1. なし 2. アクション	なし				値変更時のイベント

ノート

• カラムのIDには[id]を定義しないでください。[id]はシステム内部で使用する予約語です。
• 以下のプロパティはカラムタイプを選択する事により、設定可能なプロパティです。 設定可能なプロパティとカラムタイプの関係は次の通りです。

プロパティ	カラムタイプ
数値フォーマット	テキスト入力
日付フォーマット	日付ピッカー
オプション	1. コンボボックス 2. 複数選択
ボタン色	プッシュボタン
ボタンラベル色	プッシュボタン

ノート

• フッターは数値以外のセルは計算対象となりません。
• カラムタイプ「コンボボックス」「複数選択入力」を選択した時に設定・取得可能な[options]プロパティは文字列配列形式になります。 [“option1”,“option2”]
• カラムタイプ「コンボボックス」は、オプションから値を選択した後、何も選択していない状態にすることができません。 何も選択していない状態が必要な場合は、空の選択肢を用意してください。

イベント

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