PDA

View Full Version : Advice on displaying nested JSON in a grid



danpres14
5 May 2010, 11:12 PM
I am trying to display a list of reports in a grid grouped by attributes in a parent object. I have searched the forums but have not been successful...

The JSON data:


{"d":{"__type":"DataObject","Success":true,"Message":"","RowCount":1,"Rows":[{"Id":1,"Name":"Test Data","SystemNames":["test1","test2"],"DailyReports":[],"WeeklyReports":[{"FileName":"TestReportA.pdf","FileCreationDate":"\/Date(1269968254271)\/"}],"MonthlyReports":[{"FileName":"TestReport1.pdf","FileCreationDate":"\/Date(1269968254271)\/"},{"FileName":"TestReport2.pdf","FileCreationDate":"\/Date(1269968254271)\/"}]}]}}
ExtJS Code:


// Setup the json data store
var jsonStore = new Ext.data.GroupingStore({id: 'JsonDataStore',
autoLoad: false,
proxy: new Ext.data.HttpProxy({url: '<Web Service URL>',
method: 'GET', jsonData: {},
headers: {'Content-Type': 'application/json; charset=utf-8;'}
}),
reader: new Ext.data.JsonReader({root: 'd.Rows', idProperty: 'Id',
totalProperty: 'd.RowCount', messageProperty: 'd.Message',
fields: [{name: 'Id', type: 'int'}, 'Name',]
}),
groupField: 'Name',
groupOnSort: true,
sortInfo: {field: 'Name', direction: 'DESC'}
});

// Load the json data store
jsonStore.load();

// Setup the column model
var columnModel = new Ext.grid.ColumnModel([{id: 'Id', header: "Property Identity", dataIndex: 'Id',
width: 50, readOnly: true, sortable: true, hidden: false},
{id: 'Name', header: "Name", dataIndex: 'Name',
width: 150, readOnly: true, sortable: true, hidden: false}
]);

// Setup the grid
var myGrid = new Ext.grid.GridPanel({id: 'MyGrid', ds: jsonStore, cm: columnModel,
autoExpandColumn: 'Name', height: 500, width: '100%', stripeRows: true,
collapsible: false, loadMask: false, renderTo: myGridDiv,
view: new Ext.grid.GroupingView({forceFit: true})
});
I have successfully displayed a grid showing the Id and Name with grouping and sorting - based on some good examples. I have not been able to figure out how to display the FileName or FileCreationDate along with the Id and Name. To make this a little more complicated, there is no guarantee that each of the attributes/objects will contain data...

Thanks for the help!
-Dan