filter n-tier nested grid

[AussieNeilMember]

Hi,

I am a newbie on jqwidgets (and also javascript) so I may be missing something very basic but I cannot get my head around how to display a subset of a json file returned for n-tier nest grids. I tried to follow this article http://www.jqwidgets.com/assembling-n-nested-jquery-grid/. and managed to get the 2nd grid showing the whole json response but only want the related data for the grid that is expanded in the top tier (and of course to do the same for the 3rd and 4th tier).

Can you explain how to get something simliar to http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/nestedgrids.htm so that my 2nd tier grid uses the key record from the 1st tier to display the subset of records and then extrapolate how to do it for a 3rd and 4th tier?

Thanks,

Neil

[Peter StoevKeymaster]

Hi,

We have demo with Nested Grids and JSON included in the phpdemos folder of the download package. It should be helpful in scenario with Nested Grids populated from JSON.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AussieNeilMember]

Thanks,

I have managed to get data displaying but I just can’t seem to get the restriction on the 3rd tier.

My code is as follows:

$(document).ready(function () {
var theme = ‘darkblue’;//getDemoTheme();

// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
for (var i = 0; i < 10; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};

var rabsectionurl = "Jsonlist";
// prepare the data
var rabsection =
{
datatype: "json",
datafields: [
{ name: 'RabbitSectionId'},
{ name: 'RabbitSectionName'},
{ name: 'RabbitSectionOrder' },
],
root: "Jsonlist",
async:false,
id: 'RabbitSectionId',
url: rabsectionurl
};

var rsdataAdapter = new $.jqx.dataAdapter(rabsection);

// set rows details.
$("#jqxgrid").bind('bindingcomplete', function (event) {
if (event.target.id == "jqxgrid") {
$("#jqxgrid").jqxGrid('beginupdate');
var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
for (i = 0; i 0 ? true : false;
$(“#jqxgrid”).jqxGrid(‘setrowdetails’, i, “

“, 220, hidden);
}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
}
});

var initlevel3 = function (index) {
var grid = $($.find(‘#subgrid’ + index));
var row = index;
var id = $(“#grid.jqxgrid”).jqxGrid(‘getrowdata’,row)[‘RabbitBreedId’];
//var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[‘RabbitBreedId’];
//var dataAdapter = new $.jqx.dataAdapter(source);
if (grid != null) {
//rabbit colour
var rabcoloururl = “../rabbitcolour/rcJsonlist”;
// prepare the data
var rabcolourjson =
{
datatype: “json”,
data: {rabbitbreedid: id},
datafields: [
{ name: ‘id’},
{ name: ‘RabbitColourName’},
{ name: ‘RabbitColourOrder’},
{ name: ‘RabbitBreedId’}
],
//root: “rbJsonlist”,
//id: ‘id’,
async:false,
url: rabcoloururl
};

var rcdataAdapter = new $.jqx.dataAdapter(rabcolourjson, { autoBind: true });
grid.jqxGrid({
source: rcdataAdapter,
theme: theme,
width: 530,
height: 200,
columns: [
{ text: ‘id’, dataField: ‘id’, width: 100 },
{ text: ‘Colour’, dataField: ‘RabbitColourName’, width: 100 },
{ text: ‘Order’, dataField: ‘RabbitColourOrder’, width: 80 },
{ text: ‘Breed Id’, dataField: ‘RabbitBreedId’ }
]
});
}
}

//var dataAdapter = new $.jqx.dataAdapter(source);
// create nested grid.
var initlevel2 = function (index) {
var grid = $($.find(‘#grid’ + index));
var row = index;
var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[‘RabbitSectionId’];
grid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “grid” + index) {
grid.jqxGrid(‘beginupdate’);
var datainformation = grid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
grid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
grid.jqxGrid(‘endupdate’);
}
});

if (grid != null) {
//var dataAdapter = new $.jqx.dataAdapter(source);
//rabbit breed
var rabbreedurl = “../rabbitbreed/rbJsonlist”;
// prepare the data
var rabbreedjson =
{
datatype: “json”,
data: {rabbitsectionid: id, gridrow: row},
datafields: [
{ name: ‘id’},
{ name: ‘RabbitBreedName’},
{ name: ‘RabbitBreedOrder’},
{ name: ‘RabbitSectionId’}
],
//root: “rbJsonlist”,
//id: ‘id’,
async:false,
url: rabbreedurl
};

var rbdataAdapter = new $.jqx.dataAdapter(rabbreedjson, { autoBind: true });

grid.jqxGrid({
rowdetails: true,
initrowdetails: initlevel3,
source: rbdataAdapter,
theme: theme,
width: 600,
height: 200,
columns: [
{ text: ‘id’, datafield: ‘id’, width: 30 },
{ text: ‘Breed’, datafield: ‘RabbitBreedName’, width: 600 },
{ text: ‘Order’, datafield: ‘RabbitBreedOrder’, width: 50 },
{ text: ‘Section’, datafield: ‘RabbitSectionId’, width: 50 }
]
});
}
}

// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 365,
source: rsdataAdapter,
theme: theme,
rowdetails: true,
initrowdetails: initlevel2,
columns: [
{ text: ‘id’, datafield: ‘RabbitSectionId’, width: 30 },
{ text: ‘Name’, datafield: ‘RabbitSectionName’, width: 600 },
{ text: ‘Order’, datafield: ‘RabbitSectionOrder’, width: 50 },
]
});

});

This is the code which I believe this is the problem but I don’t know how to change this to get the value back from the 2nd tier nested grid. (It is in initlevel3)

var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’,row)[‘RabbitBreedId’];

If I force id to a value I can restrict it correctly. I just need to know how to know which row has been expanded so help would be appreciated.

Regards,

Neil

[AussieNeilMember]

Hi,

I have managed to solve this issue. I was able to find something in another post which led me to the answer, and when I looked at the examples again it became even clearer.

So the solution was to change initlevel3 as follows

var initlevel3 = function (index, parentElement, gridElement, datarecord) {
//Comment for solution – Added the extra parameters which allowed me to get the id much easier
var grid = $($.find(‘#rabbreedgrid’ + index));
var row = index;
var id = $(gridElement).jqxGrid(‘getrowdata’,row)[‘id’];
// changed this to use the gridElement but I also was using the wrong field needed id from parent
grid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “breedgrid” + index) {
grid.jqxGrid(‘beginupdate’);
var datainformation = grid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
grid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
grid.jqxGrid(‘endupdate’);
}
});
if (grid != null) {
//rabbit colour
var rabcoloururl = “../rabbitcolour/rcJsonlist”;
// prepare the data
var rabcolourjson =
{
datatype: “json”,
data: {rabbitbreedid: id},
datafields: [
{ name: ‘id’},
{ name: ‘RabbitColourName’},
{ name: ‘RabbitColourOrder’},
{ name: ‘RabbitBreedId’}
],
//root: “rbJsonlist”,
//id: ‘id’,
async:false,
url: rabcoloururl
};

var rcdataAdapter = new $.jqx.dataAdapter(rabcolourjson, { autoBind: true });
grid.jqxGrid({
source: rcdataAdapter,
theme: theme,
width: 530,
height: 200,
columns: [
{ text: ‘id’, dataField: ‘id’, width: 100 },
{ text: ‘Colour’, dataField: ‘RabbitColourName’, width: 100 },
{ text: ‘Order’, dataField: ‘RabbitColourOrder’, width: 80 },
{ text: ‘Breed Id’, dataField: ‘RabbitBreedId’ }
]
});
}
}

So thank you for your help not only on this post but in other posts as well.

Regards,

Neil

[sspParticipant]

Hi!!

I was facing the same issue and glad you posted the working solution which helped me a lot!!!

Perhaps, now I am facing a weird issue in one scenario, plz suggest if you could rectify my mistake!

Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
grid21 has subgrid grid31 and
grid22 has subgrid grid32 at initlevel3,

If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

// create third nested grid.
var initlevel3 = function (index,parentElement, gridElement, datarecord) {
var row3 = index;
alert(“index:” +index);

var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
alert(“projectNumber:” +id1);
var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
alert(“projectRevisionId:” +id2);
var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
alert(“location:” +id3);

thirdGrid = $($.find(‘#jqxThirdGrid’ + index));

thirdGrid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxThirdGrid” + index) {
thirdGrid.jqxGrid(‘beginupdate’);
var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
thirdGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
thirdGrid.jqxGrid(‘endupdate’);
}
});

if (thirdGrid != null) {

var sourceThirdGrid =
{
//data: {ProjectRevisionid: id1},
datatype: “json”,
cache: false,
datafields: [
{ name: ‘projectNumber’ },
{name: ‘projectRevisionId’},
{ name: ‘location’ },
{ name: ‘jobName’ },
{ name: ‘hours’ },
{ name: ‘hoursDifference’ },
{ name: ‘total’ },
{ name: ‘costDiff’ },
{ name: ‘jobId’}
],
cache: false,
url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id1 +’&projectRevisionId=’+id2+’&location=’+id3
};
var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);

// init Orders Grid
thirdGrid.jqxGrid(
{
width : 859,
height : 235,
source : thirdGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initlevel4,
showstatusbar : true,
statusbarheight : 00,
showaggregates : true,
rendergridrows: function () {
return thirdGridAdapter.records;
},
selectionmode : ‘multiplecellsadvanced’,
columns: [
{ text: ‘Location’, datafield: ‘location’, cellsformat: ‘d’, width: 150 },
{ text: ‘Global Skill’, datafield: ‘jobName’, width: 150 },
{ text: ‘Hours’, datafield: ‘hours’, width: 100 },
{ text: ‘Hour Difference’, datafield: ‘hoursDifference’, width: 100 },
{ text: ‘Total Cost(KEuro)’, datafield: ‘total’, width: 100 },
{ text: ‘Cost Difference’, datafield: ‘costDiff’, width: 100 },
{ text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

]
});
}
};

var initlevel2 = function (index) {
var row2 = index;
alert(“index:” +index);
var id = $(“#jqxFirstgridHistory”).jqxGrid(‘getrowdata’, row2)[‘projectNumber’];
alert(“jqxprojectNumber:”+id);

secGrid = $($.find(‘#jqxSecGrid’ + index));

secGrid.bind(‘bindingcomplete’, function (event) {

if (event.target.id == “jqxSecGrid” + index) {
secGrid.jqxGrid(‘beginupdate’);
var datainformation = secGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
secGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
secGrid.jqxGrid(‘endupdate’);
}
});

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi,

I got the solution but right now my issue is, in initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

Do you see anything wrong with the code?

[sspParticipant]

Hi,

In initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

Do you see anything wrong with the above code?

[Author]

Posts