jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Master Detail – Detail Grid not populating
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 9 years, 4 months ago.
-
Author
-
Hi, I am working on a master detail screen and having trouble getting the detail grid to display. The master grid is fine, and as I loop through the detail data I can see that the detail sql is returning the correct json data. I put an alert in the for loop and can display the detail data and know the correct rows are being selected. I believe my issue is in assigning the dataSource binding it to the adapter above the #ordersGrid.
I have put the code below. Any insight would be helpful. Thank you
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to implement Master-Details binding scenario with two Grids.</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CompanyName’ },
{ name: ‘ContactName’ },
{ name: ‘ContactTitle’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘Country’ }
],
localdata: [{ “CustomerID”: “ALFKI”, “CompanyName”: “Alfreds Futterkiste”, “ContactName”: “Maria Anders”, “ContactTitle”: “Sales Representative”, “Address”: “Obere Str. 57”, “City”: “Berlin”, “Region”: null, “PostalCode”: 12209, “Country”: “Germany”, “Phone”: “030-0074321”, “Fax”: “030-0076545” }, { “CustomerID”: “ANATR”, “CompanyName”: “Ana Trujillo Emparedados y helados”, “ContactName”: “Ana Trujillo”, “ContactTitle”: “Owner”, “Address”: “Avda. de la Constitucin 2222”, “City”: “Mxico D.F.”, “Region”: null, “PostalCode”: 05021, “Country”: “Mexico”, “Phone”: “(5) 555-4729”, “Fax”: “(5) 555-3745” },{ “CustomerID”: “WOLZA”, “CompanyName”: “Wolski Zajazd”, “ContactName”: “Zbyszek Piestrzeniewicz”, “ContactTitle”: “Owner”, “Address”: “ul. Filtrowa 68”, “City”: “Warszawa”, “Region”: null, “PostalCode”: “01-012”, “Country”: “Poland”, “Phone”: “(26) 642-7012”, “Fax”: “(26) 642-7012”}]
};
var dataAdapter = new $.jqx.dataAdapter(source);$(“#customersGrid”).jqxGrid(
{
width: 850,
height: 250,
source: dataAdapter,keyboardnavigation: false,
columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 120 },
{ text: ‘Country’, datafield: ‘Country’}
]
});// Orders Grid
// prepare the data
var dataFields = [
{ name: ‘CustomerID’ },
{ name: ‘OrderID’ },
{ name: ‘OrderDate’, type: ‘date’ },
{ name: ‘ShippedDate’, type: ‘date’ },
{ name: ‘ShipName’ },
{ name: ‘ShipCountry’ }
];var source =
{
datafields: dataFields,
localdata: [{ “OrderID”: 10248, “CustomerID”: “ALFKI”, “EmployeeID”: 5, “OrderDate”: “1996-07-04 00:00:00”, “RequiredDate”: “1996-08-01 00:00:00”, “ShippedDate”: “1996-07-16 00:00:00”, “ShipVia”: 3, “Freight”: 32.3800, “ShipName”: “Vins et alcools Chevalier”, “ShipAddress”: “59 rue de l-Abbaye”, “ShipCity”: “Reims”, “ShipRegion”: null, “ShipPostalCode”: 51100, “ShipCountry”: “France” },{ “OrderID”: 11077, “CustomerID”: “ALFKI”, “EmployeeID”: 1, “OrderDate”: “1998-05-06 00:00:00”, “RequiredDate”: “1998-06-03 00:00:00”, “ShippedDate”: null, “ShipVia”: 2, “Freight”: 8.5300, “ShipName”: “Rattlesnake Canyon Grocery”, “ShipAddress”: “2817 Milton Dr.”, “ShipCity”: “Albuquerque”, “ShipRegion”: “NM”, “ShipPostalCode”: 87110, “ShipCountry”: “USA”}]
};var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
$(“#customersGrid”).on(‘rowselect’, function (event) {
var customerID = event.args.row.CustomerID;
var records = new Array();
var length = dataAdapter.records.length;
for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.CustomerID == customerID) {
records[records.length] = record;
}
}
var dataSource = {
datafields: dataFields,
localdata: records
}
var adapter = new $.jqx.dataAdapter(dataSource);// update data source.
$(“#ordersGrid”).jqxGrid({ source: adapter });
});$(“#ordersGrid”).jqxGrid(
{
width: 850,
height: 250,
keyboardnavigation: false,
columns: [
{ text: ‘OrderID’, datafield: ‘OrderID’, width: 100 },
{ text: ‘OrderDate’, datafield: ‘OrderDate’, cellsformat: ‘d’, width: 150 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘d’, width: 150 },
{ text: ‘Ship Name’, datafield: ‘ShipName’ }
]
});$(“#customersGrid”).jqxGrid(‘selectrow’, 0);
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<h3>
Customers</h3>
<div id=”customersGrid”>
</div>
<h3>
Orders by Customer</h3>
<div id=”ordersGrid”>
</div>
</div>
</body>
</html>Hello tbrocker,
The ‘orders’ grid do not shows details because there are no details.
In Your code missing such details that ‘CustomerID’ to be equal to ‘CustomerID’ from parent grid data.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.