PDA

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



amanind
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

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

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

Condor
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.

amanind
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, {

store:null,
fundCData:null,
regionCData:null,
fundChild: null,
regionchild : null,

initComponent: function() {

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

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) {
debugger
if(rec.data.Fund.ChildNo != null){
MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.fundChild = rec.data.Fund.ChildNos;
//MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.gridId;
}

//MS.ImpactSisterApp.FinancialProjectionsPanel.prototype.getGridEl('gridId')
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 == ""){
Ext.get('gridId');
} else {
return rec.data.Fund.Name;
}
}
};

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

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

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

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

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

Pawan012
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....

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

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.ColumnModel-method-setHidden

isuvaish
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