AG-Gridで列を非表示にする方法、およびツールパネルに表示されないようにする方法...
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]
suppressToolPanel のcolumnプロパティをtrueに設定すると、これを実現できます。
var columnDefs = [
{
headerName: "Stone_ID",
field: "Stone_ID",
width: 100,
hide: true,
suppressToolPanel: true
}
]
あなたが探しているなら動的に列の表示/非表示は以下に従います:
setColumnVisible
またはsetColumnsVisible
を使用できます。
注:これらの関数は、columnDefsで設定したフィールドに関連するcolKey(s)を予期します。
columnDefs = [
{
headerName: "Name",
field: "name", // => that!
width: 150
},
{
headerName: "Last Name",
field: "last_name", // => that!
width: 150
},
// ...
];
setColumnVisible
を使用すると、単一の列を表示/非表示にできます
gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it
setColumnsVisible
を使用すると、複数の列を表示/非表示にできます
gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them
これをプログラムで行うには、以下を使用できます。
列を非表示:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);
列を表示:
this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);
列グループ全体に対してこれを行うには、以下を使用できます。
const group = this.columnApi.getColumnGroup("MY_GROUP");
group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));
var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]
非表示:文字列「true」ではなく値trueを取得する必要があります(幅:「100」ではなく100を取得するなど)