dhtmlXGridで列幅や列のデータ型を指定する場合には、列のヘッダーを初期化してから行う必要がありますがマニュアルをざっと見た限りでは明確に記載がなかったようですのでまとめました。
※DHTMLXのサンプルでは、もちろん下記のようにsetHeader
による初期化から処理が始まっています。
事象について
弊社で作成しているシステムのとある画面ですが、検索画面のため列を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ははまりどころも多いですが、すてきなライブラリなので是非利用してみてください!