How display local map data in a nested Grid

[kkasunpereraMember]

Hi all

Below is my program. I have local data as a nested Map (“parentMap” and inside parentMap there are “childMap”)
I want to display “parentMap” data in grid’s rows and “childMap” data in the row details.
Can anyone please help me to figure out how to do this. My specific questions are withing the code highlighted please look at those questions.

$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = new Array();

var documentName=["HSBC inc.","City Bank","Countrywide Loans","Bank of America"];
var sectionName =["Risk Factors","Discription of Notes","Plan of Distribution","ERISA Considerations", "Tax Considerations"];
var docSec=new Array();

docSec[0]=[["Putable","Calleble","assets managed by","Asset Pool Equity","Strippable"],
["Putable","Strippable","Asset Pool Equity","Strippable"],
["Putable"],
["Bond Pool","Bullet Bond","Cash CDO"]];

docSec[1]=[[],
["Putable","Strippable","Asset Pool Equity","Strippable"],
["Calleble","assets managed by","Asset Pool Equity","Strippable"],
["Bond Pool","Cash CDO"]];

docSec[2]=[["Management Style","Seniority","CDO Portfolio Manager"],
["Putable","Strippable","Asset Pool Equity","Strippable"],
[],
["Bond Pool","Cash CDO"]];

docSec[3]=[["Value At Issue"],
["Putable","Strippable","Asset Pool Equity","Strippable"],
["Calleble","assets managed by","Asset Pool Equity","Strippable"],
[]];

var parentMap = new Object();

for (var i=0;i<sectionName.length;i++){
var chidMap = new Object();
for (var j=0;j<documentName.length;j++){

chidMap[documentName[j]]=docSec[i][j];
}
parentMap[sectionName[i]] = chidMap;
}

var source =
{
localdata: parentMap,
datatype: "map"
};

var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var tabsdiv = null;
var information = null;
var notes = null;
tabsdiv = $($(parentElement).children()[0]);
/*
var data2 = new Array();

var row2 = {};
row2["firstname"] = datarecord.firstname;
row2["lastname"] = datarecord.lastname;
row2["title"] = datarecord.title;
data2 = row2;

//how do I get the "childMap" of the selected "parentMap" object (Selected row)?
if (tabsdiv != null) {
tabsdiv.jqxGrid({source: source, theme: theme, width: 400, height: 100,
columns: [

//for no of objectds in childMap of selectd parentMap construct the columns
// and display data in the childMap
//How to do this??
{ text: '??????', datafield: '????????', width: 100 },

]

});
}

}

//create Parent Grid and call to raw details
$("#jqxgrid").jqxGrid(
{
width: 670,
height: 250,
source: source,
theme: theme,
rowdetails: true,

rowdetailstemplate: { rowdetails: "

", rowdetailsheight: 120, rowdetailshidden: true },
ready: function () {
$("#jqxgrid").jqxGrid('showrowdetails', 0);

},
initrowdetails: initrowdetails,
columns: [

//How do I dispaly the keys of parentMap in rows?
{ text: 'Doc Section Name', datafield: '??????', width: 100 },
]
});
});

[DimitarParticipant]

Hello kkasunperera,

To create a jqxGrid from an array, you need to have key-value pairs, as shown in the demo Binding to Array. Moreover, datatype: “map” is not supported. For more information on nested grids, please check out the demo Nested Grids – you can clearly see there that the parent and child grid have different sources, unlike in your example.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kkasunpereraMember]

Hi Dimitar

So I can’t use Maps and I have use Arrays in Grid. Thanks for the info.

[Author]

Posts