FlexGridをレスポンシブなグリッドとして最適化する２つの方法を紹介します。

①データの表示方法を変更する方法

グリッドを表示する十分なウィンドウサイズの時は通常のグリッドの表示ですが、ウィンドウサイズの幅が狭い場合には行の情報を１列に集約して表示します。

タブレットで横向きに表示した場合

タブレットで縦向きに表示した場合


●サンプルコードの解説
ウィンドウのresizeイベントの処理:モバイル表示にあわせて列幅と行の高さを調整します。
FlexGrid.formatItem イベント:Wijmo.format メソッドを利用して、HTMLタグとサマリーデータを加工します。

※サンプルの確認方法

1. 以下フレームの「Edit on StackBlitz」をクリックして別ウィンドウで表示します
2. コードが表示されているEditor領域と、実行結果が表示されているPreview領域の間にある境界線を移動させてPreview領域を狭めます

②データの表示列数を変更する方法

ウィンドウサイズの幅が狭い時は特定の列を非表示にします。

●サンプルコードの解説
ウィンドウのresizeイベントの処理:モバイル表示にあわせて特定列を非表示にします。

※サンプルの確認方法

1. 以下フレームの「Edit on StackBlitz」をクリックして別ウィンドウで表示します
2. コードが表示されているEditor領域と、実行結果が表示されているPreview領域の間にある境界線を移動させてPreview領域を狭めます