How to Show/Hide a Column at Runtime

Dynamically show/hide columns in Gridview in ASP.NET

DataGridView1.Columns(n).Visible = False ' working in vb.net

where n represent the column index

How to dynamically show/hide columns in extjs Grid?

You have to try something like that:

someGrid.getColumnModel().setHidden(0, true);

Dynamically show/hide columns based on user selection with respect to react-table : React+Typescript

The first issue I see is you are planning to store all column names in a Row 'Edit' -but the function

'(row:any) => { return {row.index+1}; }' is will iterate over data object - not columns object. That means, if data rows more then columns you are unnecessarily going over all the data rows.

Instead, store columns object state in React State. Update 'show' property of the columns to hide/show columns.

Something like this code here --
https://eim52.codesandbox.io/

extjs show/hide column dynamically

You can use the beforerender event to hide the column. The event is called before the render function is called to display your grid. The event function take a param which is the grid itself. From this grid object you can get the column model of the grid and call setHidden method to hide the appropriate column. From the grid object you can also get the store attached to the grid for your check.

Here is how the code will be:

listeners: {
    'beforerender' : function(grid) {

        store = grid.getStore();
        if(your-condition) {
            cm = grid.getColumnModel();
            cm.setHidden(0,true);
        }

    }
}

show/hide column in grid conditionally in extjs

Columns have a hide method which you can use. For example, take a look at this example that show you how to hide an specific column in runtime.

If you want to hide/show a the column depending on a condition, you have to evaluate that condition and use the hide & show methods.

How to hide column in AG-Grid?

You can set the column property of suppressToolPanel to true to achieve that.

var columnDefs = [
    {
       headerName: "Stone_ID",
       field: "Stone_ID",
       width: 100,
       hide: true,
       suppressToolPanel: true
    }
]

---

Related Topics