3

Possible Duplicate:
how to show/ hide column in a grid panel

In an ext js grid, I have the requirement of hiding/showing a column based on some cond = true/ false.

Can i set the 'hidden' property of a column dynamically?

Community
  • 1
  • 1
Victor
  • 16,609
  • 71
  • 229
  • 409
  • Is this after the column/grid are already constructed? Or do you know whether you want to show it when you're creating the column definition? – Jonas Mar 21 '11 at 03:19
  • After grid is constructed, when store loads, store will contain a flag for hide/show – Victor Mar 21 '11 at 04:41
  • similar to this imho : http://stackoverflow.com/questions/6042138/extjs4-what-is-the-equivalent-to-the-grid-columnmodel – mike_hornbeck Jun 06 '12 at 14:28

3 Answers3

11

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);
        }

    }
}
Abdel Raoof Olakara
  • 19,223
  • 11
  • 88
  • 133
  • i like where you are going with it but it would be nice if it was a more rounded approach like: when the user hides a column, trap the event, store in localStorage the flag for hidding the certain column. Any grid loading script would set the visibility of the column based on whats inside the localStorage for it. – IEnumerator Oct 19 '11 at 19:42
  • you could easily extend the above approach to do that! – Abdel Raoof Olakara Oct 19 '11 at 20:08
  • i ended up realizing that extjs has a state manager. switched it on and bam! I user configurable grids. – IEnumerator Oct 20 '11 at 21:46
5

You can check and hide when store loads:

store.load({
    callback: function(){
        // access raw json data and check some columns to hide or not
        if(store.getProxy().getReader().rawData.myColumn.hide) {
            grid.columns[1].setVisible(false);
        }
        if(store.getProxy().getReader().rawData.myAnotherColumn.hide) {
            grid.columns[4].setVisible(false);
        }
    }
});
digz6666
  • 1,798
  • 1
  • 27
  • 37
-6

if($('.selector').is(':hidden')) { your_code }

http://api.jquery.com/hidden-selector/

Agonych
  • 330
  • 4
  • 4