igGridで同じ列の隣接セルを結合して表示する

2017/8/25 IgniteUI

igGridで表示したグリッドで、よくExcelでやるように同じ列の複数行を結合して表示させる方法。

igGridCellMergingを使用します。

igGridCellMergingを適用する

「単一のセルを選択」のタイトルがついているグリッドの、igGrid初期化処理中のfeaturesプロパティに機能の配列を渡しているところの末尾に以下の処理を追加します。

          },
          {
            name: "CellMerging"
          },
          {
            name: "Sorting"
          }

画面左上の「Run」のリンクを踏み、画面が更新されたら、「役職」列をクリックして並び替えるとこんな感じになります。

同じ列で、隣り合った行の値が同じものをマージして表示する機能なので、ソートが必要です。

初期表示時点でマージ表示する

initialStateプロパティをmergedにすると、対象のすべての列をマージした状態で表示します。

          },
          {
            name: "CellMerging",
            initialState: "merged"
          },
          {
            name: "Sorting",
            columnSettings : [
                {
                    columnIndex: 1,
                    allowSorting: true,
                    firstSortDirection: "ascending",
                    currentSortDirection: "descending"
                }
            ]            
          }