Nested grid data binding issue

[jumpstartParticipant]

We are using nested grid functionality. Entire data will be fetched from database only.
Here, we are able to bind 1st table, but not able to bind nested grid data.
We are following jqxgrid’s “nested grid” functionality ==>
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/nestedgrids.htm

Here, we are going to pass “id” of parent table to child table to bind inner grid. Please find the code below.

var url = “main_data.php”;
var source =
{
datafields: [
{ name: ‘id’, type: ‘int’ },
{ name: ‘name’, type: ‘string’ },
],
root: ‘ids’,
id: ‘id’,
datatype: ‘json’,
async: false,
url: url
};
var parentDataAdapter = new $.jqx.dataAdapter(source);
var nesteddetailsurl = “nested_data.php”;
var nestedSource =
{
datafields: [
{ name: ‘id’, type: ‘int’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘parent_id’, type: ‘int’ },
],

root: ‘ids’,
record: ‘id’,
datatype: “json”,
url: nesteddetailsurl,
async: false
};

var childDataAdapter = new $.jqx.dataAdapter(nestedSource, { autoBind: true });
c_records = childDataAdapter.records;

var nestedGrids = new Array();
var initrowdetails = function (index, parentElement, gridElement, record) {

var id = parseInt(record.uid);
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘numericfilter’, filtervalue, filtercondition);

// fill the c_records depending on the id.
var recordsbyid = [];

for (var a = 0; a < c_records.length; a++)
{
var result = filter.evaluate(c_records[a][“id”]);
if (result)
{
recordsbyid.push(c_records[a]);
}
}

var nestedSource = { datafields: [
{ name: ‘id’, type: ‘int’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘parent_id’, type: ‘int’ },
],
// id: ‘id’,
localdata: recordsbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null)
{
grid.jqxGrid(
{
source: nestedGridAdapter, width: 780, height: 100,
columns: [
{ text: ‘ID’, datafield: ‘id’, width: 200 },
{ text: ‘NAME’, datafield: ‘name’, width: 200 },
]
});
}
}

// creage grid
$(“#data_grid”).jqxGrid(
{
width: ‘70%’,
height: ‘50%’,
source: source,
rowdetails: true,
rowsheight: 30,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 120, rowdetailshidden: true },
columns: [
{ text: ‘ID’, datafield: ‘id’, width: 100 },
{ text: ‘NAME’, datafield: ‘name’, width: 200 },
]
});

[HristoParticipant]

Hello jumpstart,

Is there any error message in the console?
Could you clarify it?

Also, I would like to suggest you look at this topic, that could be helpful:
https://www.jqwidgets.com/community/topic/multi-level-nested-grid/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts