One master with two details grids - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, addrow, datafields, empty, grid, jqxgrid, master-details, row, source

This topic contains 12 replies, has 3 voices, and was last updated by Dimitar 10 years, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

One master with two details grids Posts
January 8, 2014 at 8:12 am One master with two details grids #47516
Philippe
Participant
Hello,

I’ve created a master grid with two details grids. Everything works fine, except for the first detail grid that displays all rows, but only shows data in the first column. Below you can find the code that creates the connection between the master and the History/Sales dataAdapter. Any idea?
```
           
            // Create master-details data
            $("#customersGrid").on('rowselect', function (event) {

	            // Create master-details data (History)
                var customerID = event.args.row.CustomerID;
                var records = new Array();
                var length = historyDataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = historyDataAdapter.records[i];
                    if (record.CustomerID == customerID) {
                        records[records.length] = record;
                    }
                }
                var dataSource = {
                    datatype: "xml",
                    datafields: dataFields,
                    root: "Root",
                    record: "Item",
                    localdata: records,                      
                }
                var historyAdapter = new $.jqx.dataAdapter(dataSource);
                $("#historyGrid").jqxGrid({ source: historyAdapter });                                                
                
                //  Create master-details data (Sales)
                var customerID = event.args.row.CustomerID;
                var records = new Array();
                var length = salesDataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = salesDataAdapter.records[i];
                    if (record.CustomerID == customerID) {
                        records[records.length] = record;
                    }
                }
                var dataSource = {
                    datatype: "xml",
                    datafields: dataFields,
                    root: "Root",
                    record: "Item",
                    localdata: records,                      
                }
                var salesAdapter = new $.jqx.dataAdapter(dataSource);
                $("#salesGrid").jqxGrid({ source: salesAdapter });
                
            });
```
Thank you for your help,
Philippe
January 8, 2014 at 8:31 am One master with two details grids #47519

Dimitar
Participant

Hello Philippe,

The issue probably comes from having the same datafields for both details grids. Please define the historyGrid datafields (which are different from the salesGrid ones) in a separate variable.

Best Regards,
Dimitar

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

January 8, 2014 at 11:17 am One master with two details grids #47535

Philippe
Participant

Indeed. Problem solved.

Your help is much appreciated.
Philippe

January 8, 2014 at 4:50 pm One master with two details grids #47573

Philippe
Participant

Hi Dimitar,

I would like to add an empty row at the bottom of the ‘history’ details grid, but as a newbie I don’t know how to implement the genereaterow() function. A link to the actual page can be found here.

Your help would be much appreciated.
Philippe

`
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css”>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.metro.css” type=”text/css”>

<style type=”text/css”>
html, body {width: 100%; margin:0; padding:0; color:#666}
h4 {font-family: ‘segoe ui’, arial, sans-serif; margin: 0 0 10px 0}

.orange {color: black; background-color: #ea8a1c}
.blue {color: black; background-color: #7ecee2}
.green {color: black; background-color: #63be7b}
</style>

<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.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/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

// Adjust localize
var getLocalization = function () {
var localizationobj = {};
localizationobj.firstDay = 1;
localizationobj.percentSymbol = “%”;
localizationobj.currencySymbol = “€ “;
localizationobj.currencySymbolPosition = “before”;
localizationobj.decimalSeparator = “,”;
localizationobj.thousandsSeparator = “.”;
var patterns = {
d: “dd/MM/yyyy”,
D: “dddd, d. MMMM yyyy”,
t: “HH:mm”,
T: “HH:mm:ss”,
f: “dddd, d. MMMM yyyy HH:mm”,
F: “dddd, d. MMMM yyyy HH:mm:ss”,
M: “dd MMMM”,
Y: “MMMM yyyy”
}
localizationobj.patterns = patterns;
return localizationobj;
}

// Determine cell colors/group.
var cellclass = function (row, columnfield, value) {
if (value == ‘Bm’) {
return ‘green’;
}
else if (value == ‘CMm’) {
return ‘orange’;
}
else if (value == ‘Dm’) {
return ‘blue’;
}
else return ‘red’;
}

// Prepare the Prospects data
var url = “../sampledata/prospects.xml”;
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘CustomerID’, type: ‘string’ },
{ name: ‘CMm_P’, type: ‘bool’ },
{ name: ‘Dm_P’, type: ‘bool’ },
{ name: ‘Bm_P’, type: ‘bool’ },
{ name: ‘Category’, type: ‘string’ },
{ name: ‘Company’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ }
],
root: “Root”,
record: “Item”,
sortcolumn: ‘Company’,
sortdirection: ‘asc’,
async: false,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source, {
autoBind: true,
loadComplete: function() {
},
});

// Prepare the History data
var url = “../sampledata/history.xml”;
var historydataFields = [
{ name: ‘CustomerID’, type: ‘string’ },
{ name: ‘Group’, type: ‘string’ },
{ name: ‘Author’, type: ‘string’ },
{ name: ‘Date’, type: ‘date’},
{ name: ‘Comment’, type: ‘string’ }
];
var source =
{
datatype: “xml”,
datafields: historydataFields,
root: “Root”,
record: “Item”,
url: url,
addrow: function (rowid, rowdata, position, commit) {commit(true) },
deleterow: function (rowid, commit) { commit(true) },
updaterow: function (rowid, newdata, commit) { commit(true) }
};
var historyDataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data)
{ $(“#customersGrid”).jqxGrid(); }
});
historyDataAdapter.dataBind();

// Prepare the Sales data
var url = “../sampledata/sales.xml”;
var salesdataFields = [
{ name: ‘CustomerID’, type: ‘string’ },
{ name: ‘Group’, type: ‘string’ },
{ name: ‘Edition’, type: ‘date’ },
{ name: ‘Format’, type: ‘string’ },
{ name: ‘Remarks’, type: ‘string’ },
{ name: ‘Amount’, type: ‘number’}
];
var source =
{
datatype: “xml”,
datafields: salesdataFields,
root: “Root”,
record: “Item”,
url: url
};
var salesDataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data)
{ $(“#customersGrid”).jqxGrid(); }
});
salesDataAdapter.dataBind();

// Create master-details data
$(“#customersGrid”).on(‘rowselect’, function (event) {

// Create master-details data (History)
var customerID = event.args.row.CustomerID;
var records = new Array();
var length = historyDataAdapter.records.length;
for (var i = 0; i < length; i++) {
var record = historyDataAdapter.records[i];
if (record.CustomerID == customerID) {
records[records.length] = record;
}
}
var dataSource = {
datatype: “xml”,
datafields: historydataFields,
root: “Root”,
record: “Item”,
localdata: records,
}
var historyAdapter = new $.jqx.dataAdapter(dataSource);
$(“#historyGrid”).jqxGrid({ source: historyAdapter });

// Create master-details data (Sales)
var customerID = event.args.row.CustomerID;
var records = new Array();
var length = salesDataAdapter.records.length;
for (var i = 0; i < length; i++) {
var record = salesDataAdapter.records[i];
if (record.CustomerID == customerID) {
records[records.length] = record;
}
}
var dataSource = {
datatype: “xml”,
datafields: salesdataFields,
root: “Root”,
record: “Item”,
localdata: records,
}
var salesAdapter = new $.jqx.dataAdapter(dataSource);
$(“#salesGrid”).jqxGrid({ source: salesAdapter });

});

// Initialize customers grid
$(“#customersGrid”).jqxGrid(
{
width: 690,
height: 800,
source: dataAdapter,
sortable: true,
showfilterrow: true,
filterable: true,
keyboardnavigation: true,
theme: “metro”,
columns: [
{ text: ‘CMm’, datafield: ‘CMm_P’, align: ‘center’, columntype: ‘checkbox’, filtertype: ‘bool’, sortable: false, width: 55 },
{ text: ‘Dm’, datafield: ‘Dm_P’, align: ‘center’, columntype: ‘checkbox’, filtertype: ‘bool’, sortable: false, width: 55 },
{ text: ‘Bm’, datafield: ‘Bm_P’, align: ‘center’, columntype: ‘checkbox’, filtertype: ‘bool’, sortable: false, width: 55 },
{ text: ‘Category’, dataField: ‘Category’, align: ‘center’, filtertype: ‘checkedlist’, width: 140 },
{ text: ‘Company’, dataField: ‘Company’, align: ‘center’, width: 200 },
{ text: ‘City’, datafield: ‘City’, align: ‘center’, width: 165}
]
});

// Initialize history grid
$(“#historyGrid”).jqxGrid(
{
width: 600,
autoheight: true,
autorowheight: true,
sortable: true,
editable: true,
selectionmode: ‘singlecell’,
enabletooltips: true,
keyboardnavigation: false,
localization: getLocalization(),
theme: “metro”,
columns: [
{ text: ‘Group’, dataField: ‘Group’, width: 63, align: ‘center’, cellsalign: ‘center’, cellclassname: cellclass },
{ text: ‘Author’, dataField: ‘Author’, width: 60, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Date’, dataField: ‘Date’, width: 100 , align: ‘center’, cellsalign: ‘center’, cellsFormat: ‘d’ },
{ text: ‘Comment’, dataField: ‘Comment’, width: 377, align: ‘center’ }
]
});

// Add history row
$(“#addrowbutton”).jqxButton({ theme: “metro” });
$(“#addrowbutton”).on(‘click’, function () {
var datarow = generaterow();
var commit = $(“#historyGrid”).jqxGrid(‘addrow’, null, datarow);
});

// Initialize sales grid
$(“#salesGrid”).jqxGrid(
{
width: 600,
autoheight: true,
autorowheight: true,
sortable: true,
showstatusbar: true,
statusbarheight: 25,
showaggregates: true,
keyboardnavigation: false,
selectionmode: ‘none’,
localization: getLocalization(),
theme: “metro”,
columns: [
{ text: ‘Group’, dataField: ‘Group’, width: 63, align: ‘center’, cellsalign: ‘center’, cellclassname: cellclass },
{ text: ‘Edition’, dataField: ‘Edition’, width: 60, align: ‘center’, cellsalign: ‘center’, cellsFormat: “MM/yyyy” },
{ text: ‘Format’, dataField: ‘Format’, width: 100, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Remarks’, dataField: ‘Remarks’, width: 297, align: ‘center’ },
{ text: ‘Amount’, dataField: ‘Amount’, width: 80, align: ‘center’, cellsalign: ‘right’, cellsFormat: ‘c2’, aggregates: [‘sum’] }
]
});
});
</script>
</head>
<body class=’default’>
<div style=”width:100%; height:50px; background-color:lightsteelblue”></div>
<div style=”width:1340px; margin:10px auto 0 auto; text-align:center”>
<div style=”float:left; margin-right:10px”>
<h4>Prospects</h4>
<div id=”customersGrid”></div>
</div>
<div style=”margin-left:708px”>
<h4>Hisotry</h4>
<div id=”historyGrid”></div>
<div style=”margin: 10px auto; float: none”>
<div>
<input id=”addrowbutton” type=”button” value=”Add Comment”>
</div>
</div>
<h4 style=”margin-top:30px”>Sales</h4>
<div id=”salesGrid”></div>
</div>
</div>
</body>
</html>’

January 9, 2014 at 6:17 am One master with two details grids #47599
Dimitar
Participant
Hi Philippe,

To add an empty row you do not need generaterow, which is used for generatinging sample data. Instead of:
```
$("#addrowbutton").on('click', function () {
	var datarow = generaterow();
	var commit = $("#historyGrid").jqxGrid('addrow', null, datarow);
});
```
you should have:
```
$("#addrowbutton").on('click', function () {
	var datarow = {};
	var commit = $("#historyGrid").jqxGrid('addrow', null, datarow);
});
```
You can read more about addrow in the jqxGrid API Documentation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
January 10, 2014 at 1:07 am One master with two details grids #47651
Philippe
Participant
Hi Dimitar,

I’ve almost finished my project, but due to a lack of time/knowledge the following issues remain to be solved:
- A connecting string to an MS Access Database (provided) instead of an XML-table (if technical possible). The XML source was only used for testing proposal.
- The missing function to create/remove/update from a row of the three grids to the MS Access Database.
- A default sort order for both the details grids
I understand that this goes beyond the normal support, so we’re willing to pay for the extra work to finish this job.
If acceptable for you, do you have an estimate cost and how long would it take? We’re willing to pay in advance.

Please find here the link to our project.

If required you can always send me an e-mail (can be found in my Profile).
Your help is much appreciated.

Kind regards,
Philippe
January 10, 2014 at 6:31 am One master with two details grids #47660

Dimitar
Participant

Hi Philippe,

Please post your sales-related questions to sales@jqwidgets.com.

Best Regards,
Dimitar

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

May 20, 2014 at 6:13 pm One master with two details grids #54707

dippy
Participant

Hi ,

I have similar issue..

My Html code is

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.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/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.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.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.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/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘AccInvoiceNo’, type: ‘string’},
{ name: ‘CustomInvoiceNo’, type: ‘string’},
{ name: ‘AccInvoiceDate’, type: ‘date’},
{ name: ‘TerrCode’, type: ‘number’},
{ name: ‘Volume’, type: ‘number’},
{ name: ‘AiValue’, type: ‘number’},
{ name: ‘Ageing’, type: ‘number’}
],
id: ‘AccInvoiceNo’,
url: ‘ainv_dtl.php’,
cache: false,
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};

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

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
theme: ‘classic’,
width: 800,
height: 200,
//pageable: true,
//autoheight: true,
virtualmode: false,
keyboardnavigation: true,
rendergridrows: function () {
return dataAdapter.records;
},
columns:
[
{ text: ‘Acc Inv No’, datafield: ‘AccInvoiceNo’, filtertype: ‘textbox’, filtercondition: ‘CONTAINS’, columntype: ‘textbox’, width: 160},
{ text: ‘Customs Inv No’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘CONTAINS’, datafield: ‘CustomInvoiceNo’, width: 160},
{ text: ‘Acc Inv Date’, columntype: ‘date’, filtertype: ‘date’, datafield: ‘AccInvoiceDate’, cellsformat: ‘d’, width: 90,cellsalign: ‘center’},
{ text: ‘Territory’, columntype: ‘textbox’, datafield: ‘TerrCode’,filtercondition: ‘CONTAINS’, width:75,cellsalign: ‘center’},
{ text: ‘Volume’, columntype: ‘textbox’, filtertype: ‘number’,datafield: ‘Volume’, width: 75,cellsalign: ‘right’},
{ text: ‘Ai Value’, columntype: ‘textbox’, filtertype: ‘number’,datafield: ‘AiValue’, width: 75,cellsalign: ‘right’,cellsformat: ‘n1’},
{ text: ‘Ageing’, columntype: ‘textbox’, filtertype: ‘number’,datafield: ‘Ageing’, width: 75,cellsalign: ‘right’},
]
});

// init Orders Grid
$(“#jqxgrid2”).jqxGrid(
{
virtualmode: true,
//pageable: true,
width: 1150,
//autoheight: true,
height:200,
theme: ‘classic’,
keyboardnavigation: true,
rendergridrows: function (obj) {
return [];
},
columns: [
//{ text: ‘Custom Invoice’, columntype: ‘textbox’, datafield: ‘CustomInvoiceNo’, width: 160},
{ text: ‘SNo’, datafield: ‘LineNo’, editable: false, visible:false, columntype: ‘textbox’, width: 35,cellsalign: ‘right’},
{ text: ‘Accounting Invoice’, datafield: ‘AccInvoiceNo’, editable: false, columntype: ‘textbox’, width: 160},
{ text: ‘Item Code’, columntype: ‘textbox’, datafield: ‘ItemCode’, editable: false, width: 120},
{ text: ‘Item Description’, columntype: ‘textbox’, datafield: ‘ItemDesc’, editable: false, width: 330},
{ text: ‘Estm Cost’, columntype: ‘textbox’, datafield: ‘EstTerrLndCst’, width: 75, editable: false,cellsalign: ‘right’},
{ text: ‘Sugg RSP’, columntype: ‘textbox’, datafield: ‘SuggRSP’, width: 70, editable: false,cellsalign: ‘right’},
{ text: ‘Final RSP’, columntype: ‘textbox’, datafield: ‘FinalRSP’, width: 70,editable: true,cellsalign: ‘right’},
{ text: ‘VAT %’, columntype: ‘textbox’, datafield: ‘VATPer’, width: 60, editable: false,cellsalign: ‘right’},
{
text: ‘Margin’, editable: false, datafield: ‘margin’,width: 65,
cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
if ((parseFloat(rowdata.FinalRSP)>0) && parseFloat(rowdata.EstTerrLndCst)>0)
{
var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
var margin = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(FinalRSPNetVat))*100;
return “<div class=’jqx-right-align’>” + dataAdapter.formatNumber(margin, “p2”) + “</div>”;
}
}
},
{
text: ‘Markup’, editable: false, datafield: ‘markup’,width: 65,
cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata)
{
if (parseFloat(rowdata.FinalRSP)>0 && parseFloat(rowdata.EstTerrLndCst)>0)
{
var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
var markup = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(rowdata.EstTerrLndCst))*100;
return “<div class=’jqx-right-align’>” + dataAdapter.formatNumber(markup, “p2”) + “</div>”;
}
}
},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, twostatecheckbox: true,width: 75,cellsalign: ‘right’},
]
});

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var row = event.args.rowindex;

var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[‘AccInvoiceNo’];
var source =
{
url: ‘ainv_dtl.php’,
dataType: ‘json’,
data: {AccInvoiceNo: id},
datatype: “json”,
cache: false,
datafields: [
//{ name: ‘CustomInvoiceNo’, type: ‘string’},
{ name: ‘LineNo’, type: ‘number’},
{ name: ‘AccInvoiceNo’, type: ‘string’},
{ name: ‘ItemCode’, type: ‘string’},
{ name: ‘ItemDesc’, type: ‘string’},
{ name: ‘EstTerrLndCst’, type: ‘number’},
{ name: ‘SuggRSP’, type: ‘number’},
{ name: ‘FinalRSP’, type: ‘number’},
{ name: ‘VATPer’, type: ‘number’}
//{ name: ‘MRGNPer’, type: ‘number’}
],
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var adapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid2″).jqxGrid(
{
source: adapter,

rendergridrows: function (obj) {
return obj.data;
}
});
});
});
</script>
</head>
<body class=’default’>
<h3>Accounting Invoices</h3>
<div id=”jqxgrid”></div>
<h3>Accounting Invoice Details</h3>
<div id=”jqxgrid2″></div>
</body>
</html>

and my php code (oracle) is
….

<?php
#Include the connect.php file
include(‘xe.php’);
#Connect to the database
//connection String

if ($xeconn == False){
print “can’t find $database”;
}
// get data and store in a json array
$query = “select * from cps_ainvc_head_test”;
if (isset($_GET[‘accinvoiceno’]))
{
//$pagenum = $_GET[‘pagenum’];
//$pagesize = $_GET[‘pagesize’];
//$pagenum = 1;
//$pagesize = 6;
//$start = $pagenum * $pagesize;
$query = “SELECT count(*) over () found_rows,Nvl(B.LINE_NO,0)LINE_NO,
A.CINVC_NO,
A.AINVC_NO AS AINVC_NO_DT,
B.ITEM,
Initcap(B.ITEM_DESC)ITEM_DESC,
Round(Nvl(B.EST_UNIT_TERR_LND_CST,0),3)EST_UNIT_TERR_LND_CST,
Nvl(B.SUG_INIT_PRICE,0)SUG_INIT_PRICE,
Nvl(B.BUY_FINAL_RSP,0)BUY_FINAL_RSP,
B.AVG_VAT_RATE,
rownum rn
FROM CPS_AINVC_HEAD_TEST A,
CPS_AINVC_DETL_TEST B,
DOC_APPROVER_MERCH_HIERARCHY C,
DOC_APPROVERS D,
DOC_APPROVER_LVL E,
DOC_APPROVAL_AUTHORITY F
WHERE A.CINVC_NO=B.CINVC_NO
AND A.AINVC_NO=B.AINVC_NO
AND A.AINVC_NO='”.$_GET[‘accinvoiceno’].”‘
AND A.FINAL_TO_WH=B.FINAL_TO_WH
AND B.DEPT=C.APP_DEPT
AND B.DOC_CURR_APP_SEQ_NO=E.APP_FLOW_SEQ_NO
AND B.RSP_CHANGE_IND IS NULL
AND C.APP_CODE=D.APP_CODE
AND C.APP_CODE=1
AND E.DOC_TYPE=’CPS’
AND E.DOC_TYPE=F.DOC_TYPE
AND E.APP_TYPE=F.APP_TYPE
ORDER BY B.LINE_NO”;
$result = oci_parse($xeconn,$query);
//$sql = “SELECT count(*)found_rows from CPS_AINVC_DETL_TEST”;
//$rows = oci_parse($xeconn,$sql);
//$rows =oci_fetch_assoc($rows);
//$total_rows = $rows[‘found_rows’];
// get data and store in a json array
while ($row =oci_fetch_array($result, OCI_ASSOC))
{
$accInvDetails[] = array(
‘LineNo’ => $row[‘LINE_NO’],
‘CustomInvoiceNo’ => $row[‘CINVC_NO’],
‘AccInvoiceNoDtl’ => $row[‘AINVC_NO_DT’],
‘ItemCode’ => $row[‘ITEM’],
‘ItemDesc’ => $row[‘ITEM_DESC’],
‘EstTerrLndCst’ => $row[‘EST_UNIT_TERR_LND_CST’],
‘SuggRSP’ => $row[‘SUG_INIT_PRICE’],
‘FinalRSP’ => $row[‘BUY_FINAL_RSP’],
‘VATPer’ => $row[‘AVG_VAT_RATE’],
);
}
$data[] = array(
// ‘TotalRows’ => $total_rows,
‘Rows’ => $accInvDetails
);
echo json_encode($data);
}
else
{
//$pagenum = $_GET[‘pagenum’];
//$pagesize = $_GET[‘pagesize’];

//$pagenum = 1;
//$pagesize = 6;

//$start = $pagenum * $pagesize;
$query = “select count(*) over () found_rows,AINVC_NO,
CINVC_NO,
AINVC_DT,
FINAL_TO_WH,
VOLUME,
SUM(AI_VALUE)AI_VALUE,
AGEING
from
(SELECT A.AINVC_NO,
A.CINVC_NO,
A.AINVC_DT,
A.FINAL_TO_WH,
ROUND(A.VOLUME,2)VOLUME,
ROUND(SUM(B.AI_ITEM_RATE*B.AI_QTY),0)AI_VALUE,
ROUND((SYSDATE-A.AINVC_DT),0)AGEING
FROM CPS_AINVC_HEAD_TEST A,
CPS_AINVC_DETL_TEST B,
DOC_APPROVER_MERCH_HIERARCHY C,
DOC_APPROVERS D,
DOC_APPROVER_LVL E,
DOC_APPROVAL_AUTHORITY F
WHERE A.CINVC_NO=B.CINVC_NO
AND A.AINVC_NO=B.AINVC_NO
AND A.FINAL_TO_WH=B.FINAL_TO_WH
AND B.DEPT=C.APP_DEPT
AND B.DOC_CURR_APP_SEQ_NO=E.APP_FLOW_SEQ_NO
AND B.RSP_CHANGE_IND IS NULL
AND C.APP_CODE=D.APP_CODE
AND C.APP_CODE=1
AND A.APPROVED_STATUS=’N’
AND E.DOC_TYPE=’CPS’
AND E.DOC_TYPE=F.DOC_TYPE
AND E.APP_TYPE=F.APP_TYPE
GROUP BY
A.AINVC_NO,
A.CINVC_NO,
A.AINVC_DT,
A.FINAL_TO_WH,
A.VOLUME
ORDER BY
ROUND((SYSDATE-A.AINVC_DT),0) DESC)
gROUP BY
— found_rows,
AINVC_NO,
CINVC_NO,
AINVC_DT,
FINAL_TO_WH,
VOLUME,
AGEING”;

//where rownum between $start and $pagesize
//$query = “SELECT SQL_CALC_FOUND_ROWS * FROM customers LIMIT $start, $pagesize”;
$result = oci_parse($xeconn,$query);
oci_execute($result);
//$sql = “SELECT count(*)found_rows from CPS_AINVC_HEAD_TEST”;
//$rows = oci_parse($xeconn,$sql);
//echo $sql;
//oci_execute($rows);
//$rows =oci_fetch_assoc($rows);

//$total_rows = $rows[‘FOUND_ROWS’];

while ($row =oci_fetch_array($result, OCI_ASSOC)) {
$accInvHead[] = array(
‘AccInvoiceNo’ => $row[‘AINVC_NO’],
‘CustomInvoiceNo’ => $row[‘CINVC_NO’],
‘AccInvoiceDate’ => $row[‘AINVC_DT’],
‘TerrCode’ => $row[‘FINAL_TO_WH’],
‘Volume’ => $row[‘VOLUME’],
‘AiValue’ => $row[‘AI_VALUE’],
‘Ageing’ => $row[‘AGEING’],
);
}
$data[] = array(
//’TotalRows’ => $total_rows,
‘Rows’ => $accInvHead
);
echo json_encode($data);
}
?>

Please help me sort the issue…

May 21, 2014 at 7:16 am One master with two details grids #54735

Dimitar
Participant

Hello deepakds,

There are two issues discussed in this topic. Which one is yours similar to? Please explain it in detail and also re-post your code and format it by selecting it and clicking the code button in the toolbar.

Best Regards,
Dimitar

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

May 21, 2014 at 9:57 am One master with two details grids #54743

dippy
Participant

Hi Dimitar,

The issue is the detail grid is showing all the rows but in 1 column ‘AccInvoiceNo’. As you mentioned earlier both the column names are same with same variable name datafields.

My Master grid is populating correctly.

I need to populate the second detail grid based on row selection of 1 grid and my key column is ‘AccInvoiceNo’ which is available in both datafields grids.

I don’t need pageination as on now.

Thanks for your reply

Reposting the code.

May 21, 2014 at 9:58 am One master with two details grids #54744
dippy
Participant
```
<!DOCTYPE html>
 <html lang=”en”>
 <head>
 <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
 <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.css” type=”text/css” />
 <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.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/jqxlistbox.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxdata.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.pager.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxexpander.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.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/jqxgrid.sort.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxnumberinput.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
 <script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
 <script type=”text/javascript” src=”../../scripts/demos.js”></script>
 <script type=”text/javascript” src=”generatedata.js”></script>
 <script type=”text/javascript”>
 $(document).ready(function () {
 // prepare the data
 var source =
 {
 datatype: “json”,
datafields: [
 { name: 'AccInvoiceNo', type: 'string'},
 { name: 'CustomInvoiceNo', type: 'string'},
 { name: 'AccInvoiceDate', type: 'date'},
 { name: 'TerrCode', type: 'number'},
 { name: 'Volume', type: 'number'},
 { name: 'AiValue', type: 'number'},
 { name: 'Ageing', type: 'number'}
 ],
 id: ‘AccInvoiceNo’,
url: ‘ainv_dtl.php’,
cache: false,
 root: ‘Rows’,
beforeprocessing: function (data) {
 source.totalrecords = data[0].TotalRows;
 }
 };

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

$(“#jqxgrid”).jqxGrid(
 {
 source: dataAdapter,
 theme: ‘classic’,
width: 800,
 height: 200,
 //pageable: true,
 //autoheight: true,
 virtualmode: false,
 keyboardnavigation: true,
 rendergridrows: function () {
 return dataAdapter.records;
 },
 columns:
 [
 { text: 'Acc Inv No', datafield: 'AccInvoiceNo', filtertype: 'textbox', filtercondition: 'CONTAINS', columntype: 'textbox', width: 160},
 { text: 'Customs Inv No', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'CONTAINS', datafield: 'CustomInvoiceNo', width: 160},
 { text: 'Acc Inv Date', columntype: 'date', filtertype: 'date', datafield: 'AccInvoiceDate', cellsformat: 'd', width: 90,cellsalign: 'center'},
 { text: 'Territory', columntype: 'textbox', datafield: 'TerrCode',filtercondition: 'CONTAINS', width:75,cellsalign: 'center'},
 { text: 'Volume', columntype: 'textbox', filtertype: 'number',datafield: 'Volume', width: 75,cellsalign: 'right'},
 { text: 'Ai Value', columntype: 'textbox', filtertype: 'number',datafield: 'AiValue', width: 75,cellsalign: 'right',cellsformat: 'n1'},
 { text: 'Ageing', columntype: 'textbox', filtertype: 'number',datafield: 'Ageing', width: 75,cellsalign: 'right'},
 ]
 }); 

// init Orders Grid
 $(“#jqxgrid2″).jqxGrid(
 {
 virtualmode: true,
 //pageable: true,
 width: 1150,
 //autoheight: true,
 height:200,
 theme: ‘classic’,
keyboardnavigation: true,
 rendergridrows: function (obj) {
 return [];
 },
 columns: [
 //{ text: 'Custom Invoice', columntype: 'textbox', datafield: 'CustomInvoiceNo', width: 160},
 { text: 'SNo', datafield: 'LineNo', editable: false, visible:false, columntype: 'textbox', width: 35,cellsalign: 'right'},
 { text: 'Accounting Invoice', datafield: 'AccInvoiceNo', editable: false, columntype: 'textbox', width: 160},
 { text: 'Item Code', columntype: 'textbox', datafield: 'ItemCode', editable: false, width: 120},
 { text: 'Item Description', columntype: 'textbox', datafield: 'ItemDesc', editable: false, width: 330},
 { text: 'Estm Cost', columntype: 'textbox', datafield: 'EstTerrLndCst', width: 75, editable: false,cellsalign: 'right'},
 { text: 'Sugg RSP', columntype: 'textbox', datafield: 'SuggRSP', width: 70, editable: false,cellsalign: 'right'},
 { text: 'Final RSP', columntype: 'textbox', datafield: 'FinalRSP', width: 70,editable: true,cellsalign: 'right'},
 { text: 'VAT %', columntype: 'textbox', datafield: 'VATPer', width: 60, editable: false,cellsalign: 'right'},
 {
 text: 'Margin', editable: false, datafield: 'margin',width: 65,
 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
 if ((parseFloat(rowdata.FinalRSP)>0) && parseFloat(rowdata.EstTerrLndCst)>0)
 {
 var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
 var margin = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(FinalRSPNetVat))*100;
 return "<div class='jqx-right-align'>" + dataAdapter.formatNumber(margin, "p2") + "</div>";
 }
 }
 },
 {
 text: 'Markup', editable: false, datafield: 'markup',width: 65,
 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata)
 {
 if (parseFloat(rowdata.FinalRSP)>0 && parseFloat(rowdata.EstTerrLndCst)>0)
 {
 var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
 var markup = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(rowdata.EstTerrLndCst))*100;
 return "<div class='jqx-right-align'>" + dataAdapter.formatNumber(markup, "p2") + "</div>";
 }
 }
 },
 { text: 'Available', datafield: 'available', columntype: 'checkbox', twostatecheckbox: true,width: 75,cellsalign: 'right'},
 ]
 });

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
 var row = event.args.rowindex; 

var id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)['AccInvoiceNo'];
 var source =
 {
 url: ‘ainv_dtl.php’,
dataType: ‘json’,
data: {AccInvoiceNo: id},
 datatype: “json”,
cache: false,
 datafields: [
 //{ name: 'CustomInvoiceNo', type: 'string'},
 { name: 'LineNo', type: 'number'},
 { name: 'AccInvoiceNo', type: 'string'},
 { name: 'ItemCode', type: 'string'},
 { name: 'ItemDesc', type: 'string'},
 { name: 'EstTerrLndCst', type: 'number'},
 { name: 'SuggRSP', type: 'number'},
 { name: 'FinalRSP', type: 'number'},
 { name: 'VATPer', type: 'number'}
 //{ name: 'MRGNPer', type: 'number'}
 ],
 root: ‘Rows’,
beforeprocessing: function (data) {
 source.totalrecords = data[0].TotalRows;
 }
 };
 var adapter = new $.jqx.dataAdapter(source);
 // initialize jqxGrid
 $(“#jqxgrid2″).jqxGrid(
 {
 source: adapter,

rendergridrows: function (obj) {
 return obj.data;
 }
 });
 });
 });
 </script>
 </head>
 <body class=’default’>
 <h3>Accounting Invoices</h3>
 <div id=”jqxgrid”></div>
 <h3>Accounting Invoice Details</h3>
 <div id=”jqxgrid2″></div>
 </body>
 </html>
```
May 21, 2014 at 9:59 am One master with two details grids #54745
dippy
Participant
```
<?php
 #Include the connect.php file
 include(‘xe.php’);
 #Connect to the database
 //connection String

if ($xeconn == False){
 print “can’t find $database”;
 }
 // get data and store in a json array
 $query = “select * from cps_ainvc_head_test”;
if (isset($_GET['accinvoiceno']))
 {
 //$pagenum = $_GET['pagenum'];
 //$pagesize = $_GET['pagesize'];
 //$pagenum = 1;
 //$pagesize = 6;
 //$start = $pagenum * $pagesize;
 $query = “SELECT count(*) over () found_rows,Nvl(B.LINE_NO,0)LINE_NO,
 A.CINVC_NO,
 A.AINVC_NO AS AINVC_NO_DT,
 B.ITEM,
 Initcap(B.ITEM_DESC)ITEM_DESC,
 Round(Nvl(B.EST_UNIT_TERR_LND_CST,0),3)EST_UNIT_TERR_LND_CST,
 Nvl(B.SUG_INIT_PRICE,0)SUG_INIT_PRICE,
 Nvl(B.BUY_FINAL_RSP,0)BUY_FINAL_RSP,
 B.AVG_VAT_RATE,
 rownum rn
 FROM CPS_AINVC_HEAD_TEST A,
 CPS_AINVC_DETL_TEST B,
 DOC_APPROVER_MERCH_HIERARCHY C,
 DOC_APPROVERS D,
 DOC_APPROVER_LVL E,
 DOC_APPROVAL_AUTHORITY F
 WHERE A.CINVC_NO=B.CINVC_NO
 AND A.AINVC_NO=B.AINVC_NO
 AND A.AINVC_NO=’”.$_GET['accinvoiceno'].”‘
AND A.FINAL_TO_WH=B.FINAL_TO_WH
 AND B.DEPT=C.APP_DEPT
 AND B.DOC_CURR_APP_SEQ_NO=E.APP_FLOW_SEQ_NO
 AND B.RSP_CHANGE_IND IS NULL
 AND C.APP_CODE=D.APP_CODE
 AND C.APP_CODE=1
 AND E.DOC_TYPE=’CPS’
AND E.DOC_TYPE=F.DOC_TYPE
 AND E.APP_TYPE=F.APP_TYPE
 ORDER BY B.LINE_NO”;
 $result = oci_parse($xeconn,$query);
 //$sql = “SELECT count(*)found_rows from CPS_AINVC_DETL_TEST”;
 //$rows = oci_parse($xeconn,$sql);
 //$rows =oci_fetch_assoc($rows);
 //$total_rows = $rows['found_rows'];
 // get data and store in a json array
 while ($row =oci_fetch_array($result, OCI_ASSOC))
 {
 $accInvDetails[] = array(
‘LineNo’ => $row['LINE_NO'],
‘CustomInvoiceNo’ => $row['CINVC_NO'],
‘AccInvoiceNoDtl’ => $row['AINVC_NO_DT'],
‘ItemCode’ => $row['ITEM'],
‘ItemDesc’ => $row['ITEM_DESC'],
‘EstTerrLndCst’ => $row['EST_UNIT_TERR_LND_CST'],
‘SuggRSP’ => $row['SUG_INIT_PRICE'],
‘FinalRSP’ => $row['BUY_FINAL_RSP'],
‘VATPer’ => $row['AVG_VAT_RATE'],
 );
 }
 $data[] = array(
 // ‘TotalRows’ => $total_rows,
‘Rows’ => $accInvDetails
 );
 echo json_encode($data);
 }
 else
 {
 //$pagenum = $_GET['pagenum'];
 //$pagesize = $_GET['pagesize'];

//$pagenum = 1;
 //$pagesize = 6;

//$start = $pagenum * $pagesize;
 $query = “select count(*) over () found_rows,AINVC_NO,
 CINVC_NO,
 AINVC_DT,
 FINAL_TO_WH,
 VOLUME,
 SUM(AI_VALUE)AI_VALUE,
 AGEING
 from
 (SELECT A.AINVC_NO,
 A.CINVC_NO,
 A.AINVC_DT,
 A.FINAL_TO_WH,
 ROUND(A.VOLUME,2)VOLUME,
 ROUND(SUM(B.AI_ITEM_RATE*B.AI_QTY),0)AI_VALUE,
 ROUND((SYSDATE-A.AINVC_DT),0)AGEING
 FROM CPS_AINVC_HEAD_TEST A,
 CPS_AINVC_DETL_TEST B,
 DOC_APPROVER_MERCH_HIERARCHY C,
 DOC_APPROVERS D,
 DOC_APPROVER_LVL E,
 DOC_APPROVAL_AUTHORITY F
 WHERE A.CINVC_NO=B.CINVC_NO
 AND A.AINVC_NO=B.AINVC_NO
 AND A.FINAL_TO_WH=B.FINAL_TO_WH
 AND B.DEPT=C.APP_DEPT
 AND B.DOC_CURR_APP_SEQ_NO=E.APP_FLOW_SEQ_NO
 AND B.RSP_CHANGE_IND IS NULL
 AND C.APP_CODE=D.APP_CODE
 AND C.APP_CODE=1
 AND A.APPROVED_STATUS=’N’
AND E.DOC_TYPE=’CPS’
AND E.DOC_TYPE=F.DOC_TYPE
 AND E.APP_TYPE=F.APP_TYPE
 GROUP BY
 A.AINVC_NO,
 A.CINVC_NO,
 A.AINVC_DT,
 A.FINAL_TO_WH,
 A.VOLUME
 ORDER BY
 ROUND((SYSDATE-A.AINVC_DT),0) DESC)
 gROUP BY
– found_rows,
 AINVC_NO,
 CINVC_NO,
 AINVC_DT,
 FINAL_TO_WH,
 VOLUME,
 AGEING”;

//where rownum between $start and $pagesize
 //$query = “SELECT SQL_CALC_FOUND_ROWS * FROM customers LIMIT $start, $pagesize”;
 $result = oci_parse($xeconn,$query);
 oci_execute($result);
 //$sql = “SELECT count(*)found_rows from CPS_AINVC_HEAD_TEST”;
 //$rows = oci_parse($xeconn,$sql);
 //echo $sql;
 //oci_execute($rows);
 //$rows =oci_fetch_assoc($rows);

//$total_rows = $rows['FOUND_ROWS']; 

while ($row =oci_fetch_array($result, OCI_ASSOC)) {
 $accInvHead[] = array(
‘AccInvoiceNo’ => $row['AINVC_NO'],
‘CustomInvoiceNo’ => $row['CINVC_NO'],
‘AccInvoiceDate’ => $row['AINVC_DT'],
‘TerrCode’ => $row['FINAL_TO_WH'],
‘Volume’ => $row['VOLUME'],
‘AiValue’ => $row['AI_VALUE'],
‘Ageing’ => $row['AGEING'],
 );
 }
 $data[] = array(
 //’TotalRows’ => $total_rows,
‘Rows’ => $accInvHead
 );
 echo json_encode($data);
 }
 ?>
```
May 22, 2014 at 6:46 am One master with two details grids #54785

Dimitar
Participant

Hi deepakds,

Please refer to the demo Master-Details, which shows how to properly implement the functionality.

Best Regards,
Dimitar

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

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.