How to load data into nested jqxgrid?

[sspParticipant]

Hi,

On using the following code for nested grid, I get a blank grid with the column names of only parent grid!??

<%@ taglib uri=”http://www.springframework.org/tags/form” prefix=”form”%>
<%@ include file=”/jsp/include.jsp”%>
<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<link rel=”stylesheet” href=”/resources/css/gpdx-stylesheet.css” type=”text/css”>

<link rel=”stylesheet” href=”jqwidget/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script src=”<c:url value=”/grid/js/jquery-1.10.1.min.js” />”
type=”text/javascript”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”></script>
<script type=”text/javascript”
src=”<c:url value=”/resources/javascript/GPDX_ProjectSummary.js”/>”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/javascript/jquery.blockUI.js”/>”></script>

<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidget/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/globalization/jquery.global.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidget/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”<c:url value=”/resources/javascript/projectplanning.js”/>”></script>

<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css”>
<script type=”text/javascript” src=”<c:url value=”/resources/javascript/chili-1.7.pack.js”/>”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var theme = getDemoTheme();
var url = “/resources/xml/employees.xml”;
var source =
{
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ }
],
root: “Employees”,
record: “Employee”,
id: ‘EmployeeID’,
datatype: “xml”,
async: false,
url: url
};
var employeesAdapter = new $.jqx.dataAdapter(source);

var orderdetailsurl = “/resources/xml/orderdetails.xml”;
var ordersSource =
{
datafields: [
{ name: ‘EmployeeID’ },
{ name: ‘ShipName’ },
{ name: ‘ShipAddress’ },
{ name: ‘ShipCity’ },
{ name: ‘ShipCountry’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
root: “Orders”,
record: “Order”,
datatype: “xml”,
url: orderdetailsurl,
async: false
};
var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“EmployeeID”]);
if (result)
ordersbyid.push(orders[m]);
}
var orderssource = { datafields: [
{ name: ‘EmployeeID’ },
{ name: ‘ShipName’ },
{ name: ‘ShipAddress’ },
{ name: ‘ShipCity’ },
{ name: ‘ShipCountry’ },
{ name: ‘ShippedDate’ }
],
id: ‘OrderID’,
localdata: ordersbyid
}
if (grid != null) {
grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
]
});
}
}
var photorenderer = function (row, column, value) {
var name = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row).FirstName;
var imgurl = ‘/jqwidget/images’ + name.toLowerCase() + ‘.png’;
var img = ‘<div style=”background: white;”><img style=”margin:2px; margin-left: 10px;” width=”32″ height=”32″ src=”‘ + imgurl + ‘”></div>’;
return img;
}
var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}
// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
height: 365,
source: source,
theme: theme,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘Photo’, width: 50, cellsrenderer: photorenderer },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100, cellsrenderer: renderer },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100, cellsrenderer: renderer },
{ text: ‘Title’, datafield: ‘Title’, width: 180, cellsrenderer: renderer },
{ text: ‘Address’, datafield: ‘Address’, width: 300, cellsrenderer: renderer },
{ text: ‘City’, datafield: ‘City’, width: 170, cellsrenderer: renderer }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>

[Peter StoevKeymaster]

Hi,

You can learn how to load data into nested grid from our Nested Grid sample and also from the nested grid demo in the phpdemos folder of the download package.

Best Regards,
Peter Stoev

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

[sspParticipant]

Hi Peter,

Thanx for the reply and it helped!

Now, my requirement is to have four nested grids for a parent grid…
Do I have to use the following code with respect to every nested grid?

var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]["EmployeeID"]);
if (result)
ordersbyid.push(orders[m]);
}

[sspParticipant]

Hi,

I am referring to your Nested Grid sample code, which works when I test your sample code using xml data,

but in my case, I am using JSON data and am able to get the resultsets for both the parent and the child grid( found on debugging), but am able to display only the parent grid data and nested grid is displayed blank( without grid),

It is not linking with the second URL( url: ‘getSecondGridForRevisionHistory.htm’ ), thus displaying only the parent grid…

What should be the main criteria to link the child grid with the parent grid?

Should there be a common ID field in both the grids? please explain!!

$(document).ready(function () {
var theme = getDemoTheme();
var sourceFirstGrid =
{
datatype: “json”,
datafields: [
{ name: ‘leadProjectNumber’ },
{ name: ‘projectNumber’ },
{ name: ‘pdxType’ }

],
id: ‘projectNumber’,
cache: false,
url: ‘getFirstGridForRevisionHistory.htm’
};

var firstGridAdapter = new $.jqx.dataAdapter(sourceFirstGrid);
var sourceSecondGrid =
{
datatype: “json”,
datafields: [
// { name: ‘projectNumber’ },
{ name: ‘modifiedDate’ },
{ name: ‘modifiedBy’ },
{ name: ‘projectNumber’ },
{ name: ‘leadProjectNumber’ },
{ name: ‘status’ },
{ name: ‘checkinComments’ },
{ name: ‘remarks’ }
],

cache: false,
url: ‘getSecondGridForRevisionHistory.htm’
};
var secondGridAdapter = new $.jqx.dataAdapter(sourceSecondGrid);

Thanks & Regards,

Sandhya S P

[Peter StoevKeymaster]

Hi,

As I pointed out in my previous post, we have a Nested Grid sample with JSON data included in the phpdemos folder of the download package.

Best Regards,
Peter Stoev

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

[sspParticipant]

Hi Peter,

Thanks for the reply, after using your sample code for JSON data now I am able to link into the URL of the nested grid!

but I am not able to display the values in the grid other than the column names of both the grid..
I able to implement everything from your sample php code in my java except the below lines:-

beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

I am returning the entire JSON data as “return strJsonRevisionHistoryGrid” from the controller which contains the below data,
strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},{“projectRevisionId”:0,”projectNumber”:”04.35555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

Please explain what I should have as data[0].TotalRows,

[sspParticipant]

Hi Peter,

After using your sample code for JSON data now I am able to link into the URL of the nested grid!

but I am not able to display the values in the grid other than the column names of both the grid..
I able to implement everything from your sample php code in my java except the below lines:-

beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

I am returning the entire JSON data as “return strJsonRevisionHistoryGrid” from the controller which contains the below data,
strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

Please explain if data[0].TotalRows is the reason for the data being not displayed in the grid and how should I modify the below in my case:
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

Thanks & Regards,

Sandhya S P

[sspParticipant]

I am referring to your sample code “server_side_grid__with_nested_grids” in phpdemos,

data[] and TotalRows are defined in “data file” of your code,

but my query is how r they linked/defined in the “index file”??

please explain, as this may be the reason I am unable to display data in both the grids

because even though I am able display the data in the console

strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

strJsonRevisionHistoryGrid:{“firstGridForHistory”:null,”secondGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.11111″,”location”:null,”statusId”:0,”status”:”Proposal”,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:”18-JUL-2013 02:49 PM”,”costDiff”:0.0,”modifiedBy”:”Madhu Kumar KS”,”leadProjectNumber”:”04.11111″,”checkinComments”:”Distributed from GPDX”,”crNumber”:null,”pdxType”:null,”remarks”:”-“},

[sspParticipant]

I am able to get data in both the grids now, thing is i removed root: ‘Rows’, not sure even though! but the same data is getting repeated in every row, and whether I can use the same method to get four nested grids???

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CustomerID’, type: ‘string’},
{ name: ‘CompanyName’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘ContactTitle’, type: ‘string’},
{ name: ‘Address’, type: ‘string’},
{ name: ‘City’, type: ‘string’}
],
id: ‘CustomerID’,
url: ‘data.php’,
// root: ‘Rows’,
cache: false,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},
sort: function()
{
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

Thanks & Regards,

Sandhya S P

[Author]

Posts