PDA

View Full Version : How to hide the column from column menu on condition



kamalakarreddy vancha
12 Feb 2015, 5:45 AM
Hi..
here i am using this code to hide the grid column based on condition.


if(intrnlUserIndVar == 'E' ||
intrnlUserIndVar == 'O' ||
intrnlUserIndVar == 'I') {
hideGridColumns();
}



function hideGridColumns() {
var grid = Ext.getCmp(Modules.CompIds.containerListGridId);
grid.columns.forEach( function( col ) {
if( ( col.text == 'importExporterNm' ) ) {
col.setVisible(false);
//Here i need to some code to hide this column in the column menu.
}
if( ( col.text =='crgDescr' ) ) {
col.setVisible(false);
}
if( ( col.text == 'importerFlg') ) {
col.setVisible(false);
}
});
}

It is working fine but the hidden column is showing the column menu,
If i use the hideable:false to grid column it is hiding.
But i want to hide the column conditionally.
I need to hide the columns in the column menu also when the condition is true.


Thanks
Kamalakar

bvasudevan
12 Feb 2015, 10:52 AM
hope i understood your question correctly :can you do somethign like this ?{ text: "id", flex: 8/100, sortable: true, dataIndex: "Id', hidden : condition ? true: false, hideable : condition ? true : false }so the condition will control both properties.. you might not need a whole new function ..

kamalakarreddy vancha
12 Feb 2015, 9:37 PM
Thanks for your reply...
i am not getting the 'condition' in following code.

hidden : condition ? true: false, hideable : condition ? true : false

Can you please give me brief explnation or piece of code to hide .

Thanks
Kamalakar

steffenk
15 Feb 2015, 3:51 AM
you have to override the Ext.grid.header.Container to customize the column menu. Place your condition into the following function:


/**
* Returns an array of menu CheckItems corresponding to all immediate children
* of the passed Container which have been configured as hideable.
*/
getColumnMenu: function(headerContainer) {
var menuItems = [],
i = 0,
item,
items = headerContainer.query('>gridcolumn[hideable]'),
itemsLn = items.length,
menuItem;

for (; i < itemsLn; i++) {
item = items[i];
menuItem = new Ext.menu.CheckItem({
text: item.menuText || item.text,
checked: !item.hidden,
hideOnClick: false,
headerId: item.id,
menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
checkHandler: this.onColumnCheckChange,
scope: this
});
menuItems.push(menuItem);

// If the header is ever destroyed - for instance by dragging out the last remaining sub header,
// then the associated menu item must also be destroyed.
item.on({
destroy: Ext.Function.bind(menuItem.destroy, menuItem)
});
}
return menuItems;
}

yeghikyan
28 Feb 2015, 2:28 AM
Ext.grid.Panel has a reconfigure([store], [columns]) method, you can change there the column config on the fly :)