How to hide datagrid columns except for the last

Question

That is expected result: http://rghost.net/39116974/image.png. So, we have no possible to uncheck the last item called "Caption".

Thanks in advance.

score 1 · Answer 1 · answered Jul 09 '12 at 11:27

1

Ext.grid.column.ColumnView has a hideable property.

False to prevent the user from hiding this column.

Defaults to: true

answered Jul 09 '12 at 11:27

CD..

72,281
25
154
163

Thanks, I know, but that if I do not know in advance what will be the last column? – Dmitry Makeev Jul 09 '12 at 11:33
@DmitryMakeev: you'll need to explain your self..I can't understand the problem. – CD.. Jul 09 '12 at 11:39

score 1 · Answer 2 · answered Jul 11 '12 at 22:20

1

How about this

for(var i=0; i< grid.columns.length - 1; i++)
    grid.columns[i].hide();

answered Jul 11 '12 at 22:20

scusyxx

1,226
1
8
9

score 0 · Answer 3 · answered Jul 11 '12 at 22:50

before rendering the grid, you can find the last column and set its hideable to false.

ie:

myGrid.on( 'beforerender', function(){
    myGrid.colModel = myGrid.getColumnModel();
    myGrid.colModel.config[ myGrid.colModel.config.length - 1 ].hideable = false;
} );

mart7ini · Answer 4 · 2013-08-22T12:52:14.567

If you want to hide all, but one, you need to take a look to the method handleHdMenuClick of Ext.grid.GridView (I used it in 2.3, 3.0, 3.1 ext versions), and you will understand that u need to use fixed property for your column:

    handleHdMenuClick : function(item){
    var index = this.hdCtxIndex;
    var cm = this.cm, ds = this.ds;
    switch(item.id){
        case "asc":
            ds.sort(cm.getDataIndex(index), "ASC");
            break;
        case "desc":
            ds.sort(cm.getDataIndex(index), "DESC");
            break;
        default:
            index = cm.getIndexById(item.id.substr(4));
            if(index != -1){
                if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                    this.onDenyColumnHide();
                    return false;
                }
                cm.setHidden(index, item.checked);
            }
    }
    return true;
},

    isHideableColumn : function(c){
    return !c.hidden && !c.fixed;
},

But only difference in 2.x version it was used fixed property, but in > 3.x it didn't. You will need to add override file to fix this issue:

   Ext.override(Ext.grid.GridView, {
        handleHdMenuClick : function(item) {
            var store     = this.ds,
                dataIndex = this.cm.getDataIndex(this.hdCtxIndex),
                result    = true;

            switch (item.getItemId()) {
                case 'asc':
                    store.sort(dataIndex, 'ASC');
                    break;
                case 'desc':
                    store.sort(dataIndex, 'DESC');
                    break;
                default:
                    result = this.handleHdMenuClickDefault(item);
            }
            return result;
        },

        handleHdMenuClickDefault: function(item) {
            var colModel = this.cm,
                itemId   = item.getItemId(),
                index    = colModel.getIndexById(itemId.substr(4));

            if (index != -1) {
                if (item.checked && colModel.getColumnsBy(this.isHideableColumn, this).length <= 1) {
                    this.onDenyColumnHide();
                    return false;
                }
                colModel.setHidden(index, item.checked);
            }
        },

        isHideableColumn : function(c) {
            return !c.hidden && !c.fixed;
        }
    });

How to hide datagrid columns except for the last

4 Answers4