Unable to change the header width while changeing the column width dynamically

[ravigupta84]

At run time i want to hide and unhide some column. here is the code for this. i am able to do this.

but the problem is width for the column is very less, unable to set the columnwidth.

so i tried by writing theline - columnModel.setColumnWidth(columnArray[i], 55, false);
but it's not working.

var columnModel = this.denomEditGrid.getColumnModel();

var columnArray = [""];
columnArray [0] = columnModel.findColumnIndex('defaultOrder');
columnArray [1] = columnModel.findColumnIndex('shipinSplitPrecent');
columnArray [2] = columnModel.findColumnIndex('shipoutSplitPrecent');
columnArray [3] = columnModel.findColumnIndex('roundingMethod');
columnArray [4] = columnModel.findColumnIndex('billsPerStrap');
columnArray [5] = columnModel.findColumnIndex('soRoundingMethod');
columnArray [6] = columnModel.findColumnIndex('soBillsPerStrap');

if(this.denomPatternFormPanel.getForm().findField('type').getValue() === 'LOCP'){
for (var i = 0; i < columnArray.length; i++) {
columnModel.setHidden(columnArray[i], false);
columnModel.setColumnWidth(columnArray[i], 55, false);
}
}else{
for (var i = 0; i < columnArray.length; i++) {
columnModel.setHidden(columnArray[i], true);
columnModel.setColumnWidth(columnArray[i], 55, false);
}
}

[Condor]

The extra 'false' in the setColumnWidth command suppresses the widthchange event, so the grid doesn't get notified.

Either use 'true', or call grid.getView().refresh(true) after updating the columnmodel.

[ravigupta84]

it is not working properly. some column are resized and some are not get fitted in the layout.
I do not want to set the width explicitly. it should be automatically get fitted into the layout?
Please do the needful.
The extra 'true' in the setColumnWidth command suppresses the widthchange event not 'false' as mentioned in the API 3.3.0.
So i used false.

I do not know why header and column are not synchronized while setting the width. it must be synchronized.

[Condor]

Did you configure your grid with an autoExpandColumn or with forceFit:true?

[ravigupta84]

We are using the same. it's not working

[Condor]

We are using the same. it's not working

"the same" what?

[ravigupta84]

We are using the below code. it's not working

viewConfig: {
forceFit: true,
forceLayout : true,
autoExpandColumn :true,
autoFill : true,
},

[Condor]

That's a completely bogus config!

Lookup each of these config options and determine which one you actually want to use!

[ravigupta84]

i used each view config option separately but all are not working.
Actually i have 2 grids- grid 1 and grid 2.
On double click on any row of grid1, grid 2 will be displayed. grid 2 has many columns.
Based on some condition few columns will be hide/visible as toggle columns.

Here is the code


CLDenominationGrid = Ext.extend(CLEditGrid, {
viewConfig: {
forceFit: true
},
defaults :{
width: 130
},
enableColumnHide:true,
loadMask: true,

clStoreConfig: {
clUrl: CorpointWebController.denomPattern.url,
clRecord: Ext.data.Record.create([{
name: 'denominationId'
}, {
name: 'currencyName'
}, {
name: 'fitness'
}, {
name: 'name'
}, {
name: 'minimum'
}, {
name: 'maximum'
}, {
name: 'defaultOrder'
}, {
name: 'shipinSplitPrecent'
}, {
name: 'shipoutSplitPrecent'
}, {
name: 'sortOrder'
}, {
name: 'roundingMethod'
}, {
name: 'billsPerStrap'
}, {
name: 'soRoundingMethod'
}, {
name: 'soBillsPerStrap'
}, {
name: 'currencyId'
}, {
name: 'hopper'
}, {
name: 'denominationPatternID'
}, {
name: 'fitnessId'
}]),
clRecordId: 'denominationId' + 'currencyName' + 'fitness' + 'name' + 'currencyId' + 'hopper' + 'denominationPatternID' + 'fitnessId'
},
initComponent: function() {
summary = new Ext.ux.grid.GridSummary();

this.plugins = summary;

var denomGridrecords = Ext.data.Record.create([]);


var denopatternsCheckbox = new Ext.grid.CheckboxSelectionModel();
this.sm = denopatternsCheckbox;
var thisGrid = this;

this.columns = [denopatternsCheckbox, {
id: 'name',
header: '<cl:message code="corpoint.denom.edit.denom.details.currency"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.currency"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'currencyName',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.fitness"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.fitness"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'fitness',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.denomination"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.denomination"/>',
autoExpandColumn :true,
sortable: true,
dataIndex: 'name',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.defaultOrderAmt"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.defaultOrderAmt"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'defaultOrder',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.shipInPerc"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.shipInPerc"/>',
sortable: true,
autoExpandColumn :true,
//hidden:this.noLOCPType,
dataIndex: 'shipinSplitPrecent',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.shipOutPerc"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.shipOutPerc"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'shipoutSplitPrecent',
renderer: this.displayDenomValInToolTip
}, {
header: '<cl:message code="corpoint.denom.edit.denom.details.sortOrder"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.sortOrder"/>',
sortable: true,
autoExpandColumn :true,
dataIndex: 'sortOrder',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
minValue:0,
maxLength: 14
}),
renderer:function(value, metadata, record, rowIndex, colIndex, store) {
metadata.css = 'x-grid3-cell-editAdj';
return value;
}
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.siRounding"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.siRounding"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'roundingMethod',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.siStrapCount"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.siStrapCount"/>',
sortable: true,
autoExpandColumn :true,
dataIndex: 'billsPerStrap',
//hidden:this.noLOCPType,
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.soRounding"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.soRounding"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'soRoundingMethod',
renderer: this.displayDenomValInToolTip
},{
header: '<cl:message code="corpoint.denom.edit.denom.details.soStrapCount"/>',
tooltip: '<cl:message code="corpoint.denom.edit.denom.details.soStrapCount"/>',
sortable: true,
//hidden:this.noLOCPType,
autoExpandColumn :true,
dataIndex: 'soBillsPerStrap',
renderer: this.displayDenomValInToolTip
}];

CLDenominationGrid.superclass.initComponent.call(this);
}
});

Ext.reg('xclfw-denominationGrid', CLDenominationGrid);
===========================================================
listeners: {
rowdblclick: function(grid, index, e) {
Ext.getCmp(this.compIds.denomPatternCenterPanelId).setVisible(true);
Ext.getCmp(this.compIds.denomPatternTabPanelId).setVisible(true);
Ext.getCmp(this.compIds.denomPatternTabPanelId).setActiveTab(0);
var records = this.store.getAt(index);
this.denomEditGrid.showDenominationEditGrid(records.data);
Ext.getCmp(this.compIds.denomPatternCenterPanelId).doLayout();
this.denomDetailTbar.enable();
this.denomPatternFormPanel.editPattern(records.data);

var columnModel = this.denomEditGrid.getColumnModel();

var columnArray = [""];
columnArray [0] = columnModel.findColumnIndex('defaultOrder');
columnArray [1] = columnModel.findColumnIndex('shipinSplitPrecent');
columnArray [2] = columnModel.findColumnIndex('shipoutSplitPrecent');
columnArray [3] = columnModel.findColumnIndex('roundingMethod');
columnArray [4] = columnModel.findColumnIndex('billsPerStrap');
columnArray [5] = columnModel.findColumnIndex('soRoundingMethod');
columnArray [6] = columnModel.findColumnIndex('soBillsPerStrap');

var columnWidth = new Number(230);
if(this.denomPatternFormPanel.getForm().findField('type').getValue() === 'LOCP'){
for (var k = 0; k < columnArray.length; k++) {
columnModel.setHidden(columnArray[k], false);
if (k === 0) {
columnModel.setColumnWidth(columnArray[k], columnWidth, false);
}
else {
columnModel.setColumnWidth(columnArray[k], 110, false);
}
}
}else{
for (var l = 0; l < columnArray.length; l++) {
columnModel.setHidden(columnArray[l], true);
if (l === 0) {
columnModel.setColumnWidth(columnArray[l], columnWidth, false);
}
else {
columnModel.setColumnWidth(columnArray[l], 110, false);
}

}
}
this.denomEditGrid.getView().refresh(true);

}
},

[Condor]

Creating a grid with that many hidden columns is going to be slow.

Maybe you should reconfigure the grid with only the visible columns (use ColumnModel.setConfig).