jQuery UI Widgets Forums DataTable Nested DataTable Removed when setting Cell value of Parent

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Iain Joyce
    Participant

    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>
    

    Dimitar
    Participant

    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,
    Dimitar

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

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

You must be logged in to reply to this topic.