View Full Version : How to hide/unhide column of grid at runtime

20 Feb 2011, 11:25 PM
I want to hide and unhide columns of grid at runtime on click of button
How can I do this, Any help please

21 Feb 2011, 5:53 AM
grid.getColumnModel().setHidden(index, hidden);

21 Feb 2011, 6:03 AM
thanks Condor and if I have to hide row then?

21 Feb 2011, 6:04 AM
There are two ways to hide a row.

1. Filter the records out by using store.filter or store.filterBy.
2. Use a getRowClass method that adds a class with display:none to rows that should be hidden.

21 Feb 2011, 10:56 PM
Condor, I am trying to access grid outside class.
Can I access my grid using prototype.
actually I want to hide the row if there is no data in one of the column.

I want to access grid in "MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.showFund" method of the class
Let me know how to do this

check my code

MS.ImpactSisterApp.FinancialProjectionsPanel = Ext.extend(Ext.grid.GridPanel, {

fundChild: null,
regionchild : null,

initComponent: function() {

var FundRecord = Ext.data.Record.create([
{name: 'Fund'},
{name: 'level'},
{name: 'Status'},
{name: 'ReportingPeriod'}
store = new Ext.data.Store({
url: MS.ImpactSisterApp.testUrl.getInvestments,
autoLoad: true,
reader: new Ext.data.JsonReader({
root: 'data',
idProperty: 'Fund.Id'

var config = {
store: store,
master_column_id : 'id',
columns: [
{ id: 'id', header: "Id", width: 20, sortable: true, dataIndex: 'id', hidden: true },
{ id: 'name', header: "Funds Name", width: 250, sortable: true, renderer: this.showFund, dataIndex: 'model_name', minWidth: 100 },
{ id: 'regionName', header: "Region", width: 250, sortable: true, renderer: this.showRegion, dataIndex: 'region_name', minWidth: 100, hidden: true },
{ id: 'invName', header: "Investments", width: 250, sortable: true, renderer: this.showInvest, dataIndex: 'inv_name', minWidth: 100, hidden: true },
{ id: "status", header: "Status", width: 100, sortable: true, renderer: this.showCombo, fixed: true, dataIndex: 'model_status', minWidth: 50 }
//title: this.ReportingPeriod.Name,
root_title: 'Investment Models',
id: 'gridId',
style: 'font-size:8pt;font-family:helvetica;overflow:auto;',
autoScroll: true,
closable: true,
stripeRows: true
Ext.apply(this, Ext.apply(this.initialConfig, config));
MS.ImpactSisterApp.FinancialProjectionsPanel.superclass.initComponent.apply(this, arguments);
this.on('cellclick', this.modelSelected, this);
this.on('render', this.onGridRender, this);

MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.showFund = function(val, meta, rec, rowIndex) {
if(rec.data.Fund.ChildNo != null){
MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.fundChild = rec.data.Fund.ChildNos;

if(rowIndex == 0){
var data = rec.data.Fund.fundName;
MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.fundCData = data;
return '<div style="font-size:11px"><input style="cursor:pointer;border:1px solid lightblue;font-size:11px;font-family:tahoma;width:230px;padding:3px 5px" name="fundCombo" type="text" value="-- Select Funds --" size="20"/></div>';
//MS.ImpactSisterApp.SisterAppEventManager.fireEvent("loadFundCombo", data);
if(rec.data.Fund.Children == "Y"){
return '<img style="cursor:pointer;" src="'+MS.ImpactSisterApp.SisterWebAppBase + 'icons/elbow-end-plus-nl.gif" id="model_inv_' + rec.data.Fund.Id + '" />&nbsp;&nbsp;' + rec.data.Fund.Name;
} else if(rec.data.Fund.Children == "N"){
return '<img style="cursor:pointer;" src="'+MS.ImpactSisterApp.SisterWebAppBase + 'icons/elbow-minus-nl.gif" id="model_inv_' + rec.data.Fund.Id + '" />&nbsp;&nbsp;' + rec.data.Fund.Name;
} else {
if(rec.data.Fund.Name == ""){
} else {
return rec.data.Fund.Name;

22 Feb 2011, 10:49 PM
Condor, any help on this please

22 Feb 2011, 11:23 PM
You can't hide a row from a renderer, you need the getRowClass method for that.

22 Feb 2011, 11:41 PM
can you explain me more about this(getRowClass) method
How can i use this in my code

22 Feb 2011, 11:44 PM
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
if (!record.data.Fund.Name) {
return 'x-hide-display';

23 Feb 2011, 12:24 AM
Thanks Condor, it works

24 Jan 2013, 7:14 AM
I am using the store to populate the data of my list. On a click of my button I am hiding new columns by replacing the existing column array. This hides the column header but does not hides the data for that column for all the rows. Can you help me please....

24 Jan 2013, 7:28 AM
You do not need to replace the column array to achieve this.

Use the setHidden method:

grid.getColumnModel().setHidden(colIndex, hidden);


18 Jun 2014, 11:49 PM
I can't seem to use the getColumnModel() method for the grid. I am currently using v4.1.0.

Is this deprecated ?

What are the alternatives to hide a column at runtime ? And what if its a group of columns that need to be hidden ?

Thanks in advance