jQuery UI Widgets › Forums › DataTable › Nested DataTable Removed when setting Cell value of Parent
Tagged: data table, datatable, jqxdatatable, master-details, nested tables, setcellvalue
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 7 months ago.
-
Author
-
I’m working on a small proof of concept based on the Master Details Nested Tables example. In short I have Datatable of employees, each of which has sold some products which is shown in the nested table for each employee. In the parent table I have a Sales column which is meant to be the sum of the prices of the products in the nested table. I’m computing this sum in the ready() of each nested table and then setting the cell value of the Sales column of the parent row.
The catch is that for some reason once setCellValue is called the nested data table disappears and nothing is shown when expanding the row
$("#dataTable").jqxDataTable('setCellValue', id, 'Sales', salesTotal);
I’ve also tried using the updateRow method but had similar results.
Source Code below, any help would be greatly appreciated.
<html> <head> <link rel="stylesheet" href="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/styles/jqx.base.css" type="text/css"/> <link href="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/styles/jqx.ui-redmond.css" rel="stylesheet" type="text/css" /> <link href="/ais_dev/jquery/jquery-ui-1.11.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="/ais_dev/jquery/jquery-1.11.2.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxgrid.storage.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxdata.export.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="/ais_dev/jquery/jqwidgets_3.7.0/jqwidgets/jqxtabs.js"></script> <script src="/ais_dev/jquery/jquery-ui-1.11.2/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function () { var data = [ { "Id":"0", "Name": "John"}, { "Id":"1", "Name": "Mary"}, { "Id":"2", "Name": "Bob"} ]; var source = { dataFields: [ { name: 'Id', type: 'string' }, { name: 'Name', type: 'string' }, { name: 'Sales', type: 'number' } ], id: "Id", localdata: data }; var employeesAdapter = new $.jqx.dataAdapter(source); var ordersData = [ { "Id":"0", "Product": "Hat", "Price": "10"}, { "Id":"0", "Product": "Coat", "Price": "5"}, { "Id":"1", "Product": "Shoes", "Price": "4"}, { "Id":"2", "Product": "Shoes", "Price": "12"}, { "Id":"2", "Product": "Pants", "Price": "9"}, { "Id":"2", "Product": "Belt", "Price": "15"}, ]; var ordersSource = { dataFields: [ { name: 'Id', type: 'string' }, { name: 'Product', type: 'string' }, { name: 'Price', type: 'number' } ], localdata: ordersData }; var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true }); var orders = ordersDataAdapter.records; var nestedTables = new Array(); // create nested DataTable. var initRowDetails = function (id, row, element, rowinfo) { element.append($("<div style='margin: 10px;'></div>")); var nestedDataTable = $(element.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]["Id"]); if (result) ordersbyid.push(orders[m]); } var ordersSource = { dataFields: [ { name: 'Id', type: 'string' }, { name: 'Product', type: 'string' }, { name: 'Price', type: 'number' } ], id: 'OrderID', localdata: ordersbyid } if (nestedDataTable != null) { var nestedDataTableAdapter = new $.jqx.dataAdapter(ordersSource); nestedDataTable.jqxDataTable({ source: nestedDataTableAdapter, width: 820, pageable: false, columns: [ { text: 'Product Name', dataField: 'Product', width: 200 }, { text: 'Price', dataField: 'Price', width: 200 } ], ready: function () { var rows = nestedDataTable.jqxDataTable('getRows'); var salesTotal = 0; for (var j = 0; j < rows.length; j++) { var price = rows[j]['Price']; salesTotal += price; } //This line causes trouble $("#dataTable").jqxDataTable('setCellValue', id, 'Sales', salesTotal); } }); nestedTables[id] = nestedDataTable; } } // create jqxDataTable. $("#dataTable").jqxDataTable( { width: 850, source: source, pageable: false, rowDetails: true, initRowDetails: initRowDetails, ready: function () { //Load the subgrids var rows = $("#dataTable").jqxDataTable('getRows'); for (var i = 0; i < rows.length; i++) { $("#dataTable").jqxDataTable('showDetails', i); $("#dataTable").jqxDataTable('hideDetails', i); } }, columns: [ { text: 'Name', dataField: 'Name', width: 250 }, { text: 'Sales', dataField: 'Sales' } ] }); }); </script> </head> <body> <div id="gridContainer"> <div id="dataTable"> </div> </div> </body> </html>
Hello Iain Joyce,
As far as I can see the variable id from the following line:
$("#dataTable").jqxDataTable('setCellValue', id, 'Sales', salesTotal);
is undefined. This probably results in a console error and breaks the rendering of the data table.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.