PDA

View Full Version : Grouped Nested grid



reej
21 Aug 2012, 2:36 AM
I have designed the below grouped header grid,
How to bring about the drill down inside the grid,
On clicking the + inside the grid header, set of columns should be loaded.
and also the month cols should be dynamically loaded depending on the data
Kindly help me with some samples or ideas.

The data will be loaded from json file

Thanks in advance

scottmartin
21 Aug 2012, 11:28 AM
Is this something you have already started? or just a concept?

Scott.

reej
21 Aug 2012, 6:34 PM
Is this something you have already started? or just a concept?

Scott.

This is a mockup, I have designed the screen with grouped header, but not started with nesting and all, Kindly refer the screen shot below..
In this grouping itself, to achieve as in the mockup i have added a empty col in the first half header and applied style to set the background white, and if it is set like that, if i set locked:true to all the cols b4 the months columns, its not getting locked.. refer my code n screenshot..

Kindly suggest how to achieve
1. This screen design
2. Freezing of cols
3. Nesting inside the cols

///// code for grid --- For now read from local store - future to be read from a flat file
var gridPanel = Ext.create('Ext.grid.Panel', {
store: jsonStore
,columnLines: true
,forceFit: 'true'
,layout:'fit'
// ,header : false
,bodyBorder :false
,columns:[
{
//locked:true, // if lock is set true, im getting the first column alone visible.. refer 2nd //screen shot
columns:[
{
// text : vatHeader.getName1(),
text : 'Posting by Month',
//width : 30,
sortable : false,
dataIndex: 'postingMonth'
,locked:true
,cls:'headerColorBlue'
},
{
text: 'Vat by Fa piao Type'
,cls:'headerColorBlue'
,locked:true
//flex:3,
,columns: [{
text : 'Special',
//width : 55,
sortable : true,
//renderer : 'spcl',
dataIndex: 'special'
,color:'red'
,locked:true
,cls:'headerColorBlue'
},
{
text : 'Commercial',
//width : 55,
sortable : true,
// renderer : 'commercial,
dataIndex: 'commercial'
,locked:true
,cls:'headerColorBlue'
},
{
text : 'No Fa Piao',
//width : 55,
sortable : true,
// renderer : pctChange,
dataIndex: 'noFaPiao'
,locked:true
,cls:'headerColorBlue'
},
{
text : 'Total',
//width : 55,
sortable : true,
// renderer : pctChange,
dataIndex: 'Total'
,locked:true
,cls:'headerColorBlue'
}]
}, {
text : 'Total VAT Posted in GL',
//width : 55,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'totVatPostedinGL'
,cls:'headerColorBlue'
,locked:true
}
,{
text : 'Variance',
//width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'variance'
,locked:true
,cls:'headerColorBlue'
},{
text : 'PF To Issue',
//width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fptoissue'
,locked:true
,cls:'headerColorBlue'
},{
text : 'PF pending/No of Request to issue',
//flex:1,
renderer: columnWrap,
////width : 25,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'fppndingbynoofreqtoissue'
,locked:true
,cls:'headerColorBlue'
},{
text : '+ Total FP issuance',
//width : 35,
sortable : true,
//renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'totalfpissuance'
,cls:'headerColorBlue'
,locked:true
}]},{
text : 'FA Pioa Issuance By Month'
,cls:'headerColorBlue'
,columns: [
{
text : 'June 2012',
columns:[{
text:' + Total'
,cls:'headerColorBlue'
,dataIndex:'value1'}]

},
{
text : 'May 2012'
,cls:'headerColorBlue'
,columns:[{
text:' + Total'
,cls:'headerColorBlue'
,dataIndex:'value2'}]

},
{
text : 'April 2012'
,cls:'headerColorBlue'
,columns:[{
text:'+ Total'
,cls:'headerColorBlue'
,dataIndex:'value3'}]

}
,
{
text : 'March 2012',
columns:[{
text:'+ Total'
,cls:'headerColor'
,dataIndex:'value3'}]

}
,
{
text : 'Feb 2012',
columns:[{
text:'+ Total'
,cls:'headerColor'
,dataIndex:'value3'}]

}]
}

],

title: 'Grouped Header Grid'
,region:'center'
,frame:true
,height:600
, renderTo:'nested-json-grid-example'
,viewConfig: {
stripeRows: true

}
});

3813438135

scottmartin
22 Aug 2012, 9:57 AM
This could be very involved due to the grouping and column expansion with nested data.

Here is a nested grid example that may help:
https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander

Scott.