PDA

View Full Version : How to change the order of the Grid columns Dynamically or after page loaded



agarapati
13 May 2015, 5:06 AM
I have requirement where various clients can change the order of the columns or hide few columns in the grid. We have created json object for each client and loading the Json data through Ajax call.

I am able to hide and show columns as per the Json data for respective client(s) as show below. The issue is with re-order or changing the columns display order.

Controller Code



reconfigureGridColumns:function(grid,store) {
var columns = [];


store.each(function(item) {
if(item.data.display){
columns.push(item.data.dataIndex);
}
});

Ext.each(grid.columns, function (col) {
if(Ext.Array.indexOf(columns, col.dataIndex) === -1){
col.setVisible(false);
}
});
},


Gird code in the view:



{
xtype: 'grid',
itemId: 'textGrid',
id: 'textGrid',
height:370,
cls: 'extra-alt',
autoScroll: true,
border: true,
forceFit: true,
enableColumnMove: false,
selType: 'cellmodel',
viewConfig: {
emptyText: 'No data or records found'
},
columns: [{
text: 'Text 8',
dataIndex: 'text8',
align:"center",
locked: true
},{
text: 'Text 7',
dataIndex: 'text7',
align:"center",
locked: true
}, {
text: 'Text6',
dataIndex: 'text6'
}, {
text: 'Text5',
dataIndex: 'text5'
}, {
text: 'Text4',
dataIndex: 'text4'
}, {
text: 'Text3',
dataIndex: 'text3'
}, {
text: 'Text2',
dataIndex: 'text2'
}, {
text: 'Text1',
dataIndex: 'text1'
}
}],
store: 'store1'
}



Json format of clients


{
"columns":[
{dataIndex: 'text1', order:1, display:true},
{dataIndex: 'text2', order:2, display:true},
{dataIndex: 'text3', order:3, display:false},
{dataIndex: 'text4', order:4, display:true},
{dataIndex: 'text5', order:5, display:false},
{dataIndex: 'text6', order:6, display:true},
{dataIndex: 'text7', order:7, display:true},
{dataIndex: 'text8', order:8, display:true},
]
}





Is there a way to re-order or change the order of the columns in above controller code.

tristan.lee
19 May 2015, 7:10 AM
When you receive the column definition from the client, you could iterate that array and order the columns as desired. Pass that array to grid.reconfigure() (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-method-reconfigure) and you can order and set visibility easily.

Here's an example on how to use the metachange listener to handle this:

mpe

agarapati
19 May 2015, 10:02 PM
Thanks lee.