PDA

View Full Version : Hide RowExpander +/- column



deving
5 Mar 2013, 1:16 PM
Hi:

I have a check box column that I am using to show/hide the rowexpander section. Therefore, I need to hide the column that contains the +/- icons. I can get the icon to not show via CSS, but the column is still there and can be clicked. How do I get rid of that column completely? Thank you!

slemmon
5 Mar 2013, 3:08 PM
Use at your own risk since this uses some private methods from the RowExpander class, but if you give your rowExpander config a pluginId the following would work



plugins: [{
ptype: 'rowexpander'
, pluginId: 'expander'
, rowBodyTpl: ''
}]




// .... grid config
listeners: {
afterrender: function (grid) {
var columnId = grid.getPlugin('expander').getHeaderId();
Ext.getCmp(columnId).hide();
}
}

udaya20690
26 Nov 2013, 2:29 AM
Hi Slemmon,

The above code for getting the id of the column of RowExpander plugin works fine for Ext 4.1.
In Ext 4.2, the plugin does not have getHeaderId method. so how to get the id of the column created by the Rowexpander plugin. Thanks in advance.

Thanks,
Udaya

slemmon
2 Dec 2013, 9:06 AM
You might extend the plugin and modify the addExpander method to cache a reference to the inserted header:

..
this.myHeader = expanderGrid.headerCt.insert(0, expanderHeader);
..

udaya20690
2 Dec 2013, 8:54 PM
I had overridden the getHeaderConfig method of row expander plugin and explicitly specified an id in the returned object. This helped me getting the id of the +/- column. Thanks slemmon for your help. I can use this method also.

Thanks,
Udaya

danklasson
17 Dec 2013, 4:15 PM
I'm having the exact same problem. Can you please provide the code you made it work with? Thanks.

udaya20690
18 Dec 2013, 9:08 PM
Hi danklasson,

I had overrided the 'getHeaderConfig' method of rowexpander class and added id to the column as shown.




getHeaderConfig : function() { var me = this;

return {
width: 24,
lockable: false,
sortable: false,
resizable: false,
id: 'some_id',
draggable: false,
hideable: false,
menuDisabled: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
renderer: function(value, metadata) {
// Only has to span 2 rows if it is not in a lockable grid.
if (!me.grid.ownerLockable) {
metadata.tdAttr += ' rowspan="2"';
}
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander" role="presentation"></div>';
},
processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
if (type == "mousedown" && e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-expander')) {
me.toggleRow(rowIndex, record);
return me.selectRowOnExpand;
}
}
};

}
After the grid has rendered you can access the +/- column using this id 'some_id'. I hope this is what you wanted .

Thanks,
Udaya

danklasson
7 Jan 2014, 10:25 AM
Thank you. Hiding the column caused the subgrid to change column width. Instead I just changed the width. Here is the code if anyone is interested:


Ext.define('Rx.grid.MyRowExpander', function() { var spec = {
extend: 'Ext.ux.RowExpander',
alias: 'plugin.myrowexpander',


getHeaderConfig : function() {
var me = this;

return {
width: 2,
lockable: false,
sortable: false,
resizable: false,
draggable: false,
hideable: false,
menuDisabled: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
renderer: function(value, metadata) {
// Only has to span 2 rows if it is not in a lockable grid.
if (!me.grid.ownerLockable) {
metadata.tdAttr += ' rowspan="2"';
}
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander"></div>';
},
processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
me.toggleRow(rowIndex, record);
return me.selectRowOnExpand;
}
}
};
}
};


return spec;
});

Then just use myrowexpander instead of rowexpander

praetor_blue
8 May 2014, 11:11 AM
This worked for me for Ext 4.2



listeners: {
afterrender: function (grid) {
grid.getView().getHeaderAtIndex(0).hide();
}
}

SurenderBhyan1
23 Jun 2015, 1:58 AM
Worked for me. Thank you Praetor_blue :)

spsingh113
18 Nov 2015, 10:33 AM
This worked for me for Ext 4.2



listeners: {
afterrender: function (grid) {
grid.getView().getHeaderAtIndex(0).hide();
}
}


Or you can use
grid.colModel.setHidden(0, true);
for older versions.