2019J v3の新機能
〈FlexGrid〉列のグループ化
複数の列をグループ化して折りたたむことができるようになりました。列ヘッダの上にグループ名を表示して、「+」「-」アイコンをクリックしてグループを折りたたんだり展開したりできます。また、グループを折りたたんだときに表示する列を指定できます。
〈FlexGrid〉複数列のソート
複数の列ヘッダを続けてクリックすると、クリックした順にソートができるようになりました。列ヘッダにはソートされる順番を示す数字が表示されます。また、「Ctrl」キーを押しながら列ヘッダをクリックすると列のソートを1つずつ解除することができます。
〈FlexGrid〉ピンで列を固定
列ヘッダに表示されるピンをクリックするとその列を固定できるようになりました。固定した列のピンをクリックすると固定が解除されます。
〈FlexGrid〉検索
グリッド内のデータを検索できるようになりました。全てのセルから指定した文字列を検索して文字列を含む行だけを表示します。入力した文字列はリアルタイムで検索結果に反映されます。検索された文字列の強調表示やAND検索も可能です。
〈FlexGrid〉セルテンプレート
HTMLでセルのテンプレートを定義して、セルをカスタム表示できるようになりました。今まではAngularでのみHTMLでセルのテンプレートを定義できましたが、今回からPureJS/Vue.js/Reactにおいても利用できるようになります。
PureJS
列のcellTemplateプロパティを設定します。HTMLでセルコンテンツを記述できるので直感的で分かりやすいコードになります。
Vue.js
列のタグの中でセルテンプレートを定義します。こちらもHTMLでセルのコンテンツを記述できます。Angularとほぼ同じ設定方法です。
React
列のタグの中でセルテンプレートを定義します。JSXでセルのコンテンツを記述できます。Angularとほぼ同じ設定方法です。
〈FlexGrid〉CSV出力オプション
データをCSVファイルとして出力する際のオプションが設定できるようになりました。
〈FlexGrid〉列ヘッダも含めてコピー
ヘッダを含めてクリップボードにコピーできるようになりました。
〈FlexGrid〉自動生成される列の幅
列を自動生成する場合に、それぞれのデータ型(文字列型、数値型、日付型、ブール型)に対する列幅の既定サイズを設定できるようになりました。
〈FlexChart〉ステップチャート
ステップチャートを表示できるようになりました。ステップチャートは、階段形式のチャートです。口座残高のように、Yの値が急激に変化する場合によく用いられます。派生型として、マーカー付きチャートと面チャートにも対応します。
〈CollectionView〉複数のフィルター
複数のフィルターを同時に適用できるようになりました。
〈CollectionView〉編集後の自動更新の停止
ソートやフィルタを適用した状態でデータを編集した後に、自動的に更新しない(ソートやフィルタを再実行しない)でグリッドの内容をそのまま維持できるようになりました。
〈MultiRow〉列ヘッダのレイアウト〈Enterprise限定機能〉
明細行(セル本体)とヘッダを異なるレイアウトで表示できるようになりました。下記のサンプルでは、ヘッダの下2行は明細行と同じレイアウトにして、その上に列をグループ化するためのヘッダセル(受注情報、担当社員、出荷先)を生成しています。
〈MultiRow〉複数行のグループヘッダ〈Enterprise限定機能〉
グループ行を複数行で表示できるようになりました。グループ行に複数の集計値を表示することも可能です。
転置グリッド〈Enterprise限定機能〉
転置グリッドが追加され、データグリッドの行と列を入れ替えて(転置して)表示できるようになりました。通常のデータグリッドでは、行が縦方向に/列が横方向に並んで表示されますが、並べ方を逆にして、行を横方向に/列を縦方向に並べて表示できます。
TypeScript型の改善
いくつかのTypeScript型を改善しました。以下のTypeScript型が厳密に定義されます。
- 関数型:関数の引数と戻り値を定義します。
- Union型:「string型またはnumber型」のように複数の型を取りうる型を定義します。
- ジェネリックデータ:CollectionViewでデータの型を定義します。
- ジェネリックイベント:イベントハンドラの追加処理でイベント引数の型を定義します。
Angular 9に対応予定
Angular 9がリリースされた後に動作確認を踏まえて対応を予定しています。
双方向バインディングに対応
Vue.jsの双方向バインディングに対応します。今までのバージョンでは一方向のバインディングにしか対応しておらず、値の初期値をデータ連結することはできましたが、コンポーネントで変更した値をデータに反映することはできませんでした。2019J v3ではコンポーネントで変更した値がデータに反映されるようになります。