Is it possible to toggle( show/hide ) column menu in Ag Grid

Question

I want to add conditional edit mode for ag grid so that user can only be allowed to pin /unpin show/hide column from menu after some action button click. I have tried to add "menuTabs" in column definition after action but it is not changing column headers. Please find below my current try

//Initialy. This works fine no column menu visible on grid

this.gridColumns.map((column) => {
    column['menuTabs'] = [];
    return column;
})

//Conditional. Not working column menu still missing

if (condition) {
                this.gridColumns.map((column) => {
                    column['menuTabs'] = ["generalMenuTab",columnsMenuTab"];
                    return column;
                })
                this.gridApi.setColumnDefs(this.gridColumns)
                this.gridApi.refreshHeader();
            }

Thank you

I understand that ag grid need an array of columns in columnsDefs. So the idea is that you has two variables, columnsDefs and columnsDefsShowed.. You binding the ag grid using columnsDefsShowed, and create this variable filtering you columnsDefs, eg. you has an array with the fields of columns "myColumns" and columnsDefsShowed=columnsDefs.filter(x=>myColumns.indexOf(x.field)>=0) — Eliseo, Jan 18 '19 at 07:43

score 0 · Accepted Answer · answered Jan 27 '19 at 02:48

You can try creating a new colDef array and passing it to grid Options.
Something like this -

function updateColDef()
{ 
    let newColDef= [];
    this.gridColumns.forEach(function(colDef) {
                colDef['menuTabs'] = ["generalMenuTab",columnsMenuTab"];
                newColDef.push(colDef);
            });    
  this.gridApi.api.setColumnDefs(newColDef);
  this.gridApi.refreshHeader();
}

Similar issue faced by another ag grid user

Is it possible to toggle( show/hide ) column menu in Ag Grid

1 Answers1