how to hide column of GridPanel in extjs

Question

hi i have gridcoumn with multiple columns ,i want hide and show some column with AriaAttributes() when change my combobox(this code is ok just not work hide and show columns) my code:

     @(X.GridPanel()
          .View(X.GridView().GetRowClass(x => x.Fn = "MyRowCls"))
          .Stateful(true)
          .Region(Region.Center)
          .ID("MyGrid")
X.Column().Text("a").DataIndex(Model, m => m.a),
X.Column().Text("b").DataIndex(Model, m => m.b).AriaAttributes(myAttr),//show and hide this column
X.Column().Text("c").DataIndex(Model, m => m.b),
X.Column().Text("c").DataIndex(Model, m => m.b),
X.Column().Text("c").DataIndex(Model, m => m.b).AriaAttributes(myAttr),//show and hide this column
X.Column().Text("a").DataIndex(Model, m => m.a)
...

and jquery code is :

var grid = Ext.getCmp('MyGrid');
grid.initialConfig.columns.items.forEach(
        ... /checked AriaAttributes is ok
{
        item.Hidden(true); // not work
        //item.setVisible(false)  // not work
        ....  // not work
}
...
   }

but not work

Answer 1

You are trying to call setVisible a method on a simple object, because initialConfig.columns stores the original configs of columns that did not pass the conversion to gridcolumns instance.

The columns themselves are here - grid.columns and it has needed methods

var grid = Ext.getCmp('MyGrid');
grid.columns.items.forEach(item =>
    ...
    {
        item.setVisible(false);
        // or you can call hide() method
    }
    ...
   });