dhtmlXGridで列の初期化はヘッダーを設定してから行う

dhtmlXGridで列幅や列のデータ型を指定する場合には、列のヘッダーを初期化してから行う必要がありますがマニュアルをざっと見た限りでは明確に記載がなかったようですのでまとめました。

※DHTMLXのサンプルでは、もちろん下記のようにsetHeaderによる初期化から処理が始まっています。

Column Types DHTMLX Docs

事象について

弊社で作成しているシステムのとある画面ですが、検索画面のため列をroで指定しましたが設定が有効になりませんでした。

このときのグリッドは次のように初期化していました。

private initializeGridCell(gridCell) {

    gridCell.hideHeader();
    gridCell.fixSize(true, true);

    var grid = gridCell.attachGrid();

    // gridの初期化処理
    grid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");                // <= ここが有効にならない
    grid.setHeader(KanjoKamokuWindow.gridHeaderName());
    grid.setInitWidths("100,130,50,90,90,90,90,90,90,80");
    grid.setColSorting("str,str,str,str,str,str,str,str,str,str");
    grid.splitAt(KanjoKamokuWindow.GridColumns.plBsKubun.colNum);
    grid.init();
    grid.load(Constants.KanjoKamokuSearch.GRID_INIT_DATA);

    this.dhxGrid = grid;
};

特にエラーが出ているわけではなく、列のデータ型も正しかったので悩みました。

原因と対策

原因は単純でした。グリッドのヘッダーを定義する前に列のデータ型を指定していたためでした。当たり前と言えば当たり前なのですが、ちょっと気づきにくかったです。

ということで、次のように列定義の設定を修正することで期待通りの動作になります。

private initializeGridCell(gridCell) {

    gridCell.hideHeader();
    gridCell.fixSize(true, true);

    var grid = gridCell.attachGrid();

    // gridの初期化処理
    grid.setHeader(KanjoKamokuWindow.gridHeaderName());
    grid.setInitWidths("100,130,50,90,90,90,90,90,90,80");
    grid.setColSorting("str,str,str,str,str,str,str,str,str,str");
    grid.splitAt(KanjoKamokuWindow.GridColumns.plBsKubun.colNum);
    grid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");                 // <= ここを変更
    grid.init();
    grid.load(Constants.KanjoKamokuSearch.GRID_INIT_DATA);

    this.dhxGrid = grid;
};

DHTMLXははまりどころも多いですが、すてきなライブラリなので是非利用してみてください！