PDA

View Full Version : How to add new columns to existing Grid with locked columns



agarapati
12 May 2015, 5:54 AM
I need to add 6 new columns to a existing grid. I am getting dtaa from a Ajax call , below is the sample Json object format.




{
"columns":[
{text: 'Approved By', dataIndex: 'approve', display:true},
{text: 'Government<br>Approvde', dataIndex: 'riskCategory', display:false},
{text: 'Field<br>Ratio', dataIndex: 'field1', order:5, display:true},
{text: 'Field 2', dataIndex: 'field2', order:2, display:true},
{text: 'Field 3', dataIndex: 'field3', order:4, display:false},
{text: 'Field 4', dataIndex: 'field4', order:6, display:true},
{text: 'Discount', dataIndex: 'discount', order:7, display:true}
]
}





I tried to get existing columns to a column variable and pushed other columns to the array object as shown below but I am getting error when i do that



generateGridColumns:function(grid, store) {
var columns = grid.columns;
store.each(function(item) {
if(item.data.display){
if(item.data.dataIndex!='a'){
columns.push({text: 'Total<br>Price',
dataIndex: 'navPrice'
});
} else{
columns.push(item.data);
}

}
});
grid.reconfigure(grid.store, columns);
},


I tried to add all the columns as shown below, I am getting all the columns but if I do this method the columns are not getting locked even if I have specified "locked:true".



generateGridColumns:function(grid, store) {
var columns = [{
xtype : 'checkcolumn',
header: 'Select a <br>Item',
dataIndex: 'active',
width:80,
locked: true
},{
text: 'Itema Name',
dataIndex: 'name',
width:70,
locked: true

}, {
text: 'Price',
dataIndex: 'price',
width:335,
locked: true
}, {
text: 'Quantity',

width:78,
align:"center",
locked: true
}];

store.each(function(item) {
if(item.data.display){
if(item.data.dataIndex!='a'){
columns.push({text: 'Total<br>Price',
dataIndex: 'navPrice'
});
} else{
columns.push(item.data);
}

}
});
grid.reconfigure(grid.store, columns);

}

jmin91
12 May 2015, 12:52 PM
In your new columns JSON object, add the locked: true config to each column in there and see if that works.

agarapati
12 May 2015, 9:10 PM
In your new columns JSON object, add the locked: true config to each column in there and see if that works.

locked:true is already present in new Json object, I attached the new Json in the config ( see third code snippet). I have declared columns with locked:true then I added new columns to the new Json using loop

tristan.lee
13 May 2015, 2:13 PM
Check out this example of dynamically adding column. I return the columns in a metaData object, and listen for a metachange event. Then I append my new columns to the original config. One of the new columns is locked and it appears to be configuring as you would expect.

If you still have issues, provide a fiddle (https://fiddle.sencha.com) demonstrating and I'd be glad to help.

mpe

agarapati
18 May 2015, 1:24 AM
The code you Mentioned is not working for me. I have two stores and meta change event is not getting triggered. How ever my code worked when I added "enableLocking:true," in the grid config. I didnt add that config before so Locked true didnt work for dyanmically adding columns.





items: [
{
xtype: 'grid',
height:370,
autoScroll: true,
forceFit: true,
enableColumnMove: false,
enableLocking:true,
selType: 'cellmodel',
viewConfig: {
emptyText: 'No data or records found'
},
columns: [],
store: {
fields: [],
data: []
}
}
]

tristan.lee
18 May 2015, 4:45 AM
The metachange listener work when a metaData key is provided in your JSON response, which you would likely use to include column information for your grid that's separate from the data.

Looks like enableLocking solved your issue though.