jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 9, 2015 at 3:13 pm in reply to: Error when selected Level 3 Nested Grid Error when selected Level 3 Nested Grid #77911

    windrunner
    Participant

    thanks for your response Dimitar

    it’s done..

    November 7, 2015 at 3:40 am in reply to: Error when selected Level 3 Nested Grid Error when selected Level 3 Nested Grid #77860

    windrunner
    Participant

    Hai Dimitar thanks for your reply ,

    i have follow your idea , i have include filtering function on nested grid but now it’s occur another problem there is the data on nested grid level 3 not show…

    i don’t know which is wrong the code or the structure of main data source.

    plis i need your help dimitar 😀

    here is the newest html code 

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>test nested grid.</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/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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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'>
	$(document).ready(function () {
	//Getting the source data with ajax GET request
	var url1 = "test1.xml";
	source1 = {	datafields: [{ name: 'Tanggal',type: 'date'}
	],
	  root: "Tables",
                record: "Table",
                id: 'ReportID',
                datatype: "xml",
                url: url1,
				async: false
                
	};
	var dataAdapter1 =  new $.jqx.dataAdapter(source1);
	var url2 = "test2.xml";
	source2 = {
	datafields: [
	{ name: 'ReportID',type: 'string'},
	{ name: 'Shifts',type: 'string'},
	],
	root: "Tables",
    record: "Table",
    datatype: "xml",
    url: url2,
    async: false
	};
	var url3 = "test3.xml";
	source3 = {
	datafields: [
	{ name: 'ReportID',type: 'string'},
	{ name: 'ReportShiftID',type: 'string'},
	{ name: 'Tanggal',type: 'date'},
	{ name: 'Shifts',type: 'string'},
	{ name: 'ShiftHour',type: 'string'},
	{ name: 'Position02',type: 'string'},
	{ name: 'Position05',type: 'string'},
	{ name: 'Position04',type: 'string'},
	{ name: 'Position03',type: 'string'}
	],
	root: "Tables",
    record: "Table",
    datatype: "xml",
    url: url3,
    async: false
	};
	var ordersDataAdapter2 = new $.jqx.dataAdapter(source2, { autoBind: true });
    orders2 = ordersDataAdapter2.records;
	var nestedGrids2 = new Array();
	var ordersDataAdapter3 = new $.jqx.dataAdapter(source3, { autoBind: true });
    orders3 = ordersDataAdapter3.records;
	var nestedGrids3 = new Array();
	
	var initlevel2 = function (index, parentElement, gridElement, record) {
    var id2 = record.uid.toString();
	var grid2 = $($(parentElement).children()[0]);
	nestedGrids2[index] = grid2;
	            var filtergroup2 = new $.jqx.filter();
                var filter_or_operator2 = 1;
                var filtervalue2 = id2;
                var filtercondition2 = 'equal';
                var filter2 = filtergroup2.createfilter('stringfilter', filtervalue2, filtercondition2);
	
                // fill the orders depending on the id.
                var ordersbyid2 = [];
				
                for (var m2 = 0; m2 < orders2.length; m2++) {
				    var result2 = filter2.evaluate(orders2[m2]["ReportID"]);
                    if (result2)
                        ordersbyid2.push(orders2[m2]);
                }

                var orderssource2 = { datafields: [
				{ name: 'ReportID',type: 'string'},
	{ name: 'Shifts',type: 'string'}
	],
                    id: 'ReportShiftID',
                    localdata: ordersbyid2
                }
                var nestedGridAdapter2 = new $.jqx.dataAdapter(orderssource2);
	if (grid2 != null)
	{
	grid2.jqxGrid
	({
	filterable: true,
	showfilterrow: true,rowdetails: true, initrowdetails: initlevel3, source: nestedGridAdapter2, width: '90%',height: '90%',
	rowdetailstemplate:
	{
	rowdetails: "<div id='subgrid' ></div>", rowdetailsheight: 300, rowdetailshidden: true 
	},
	columns:
	[
	{ text: 'Shifts', dataField: 'Shifts',  width: '100%' }
	]
	});
	}
	}
	
	var initlevel3 = function (index, parentElement, gridElement, record) {
    var id3 = record.uid.toString();
	var grid3 = $($(parentElement).children()[0]);
	nestedGrids3[index] = grid3;
	            var filtergroup3 = new $.jqx.filter();
                var filter_or_operator3 = 1;
                var filtervalue3 = id3;
                var filtercondition3 = 'equal';
                var filter3 = filtergroup3.createfilter('stringfilter', filtervalue3, filtercondition3);
	
                // fill the orders depending on the id.
                var ordersbyid3 = [];
				var length = orders3.length;
			    for (var m3 = 0; m3 < orders3.length; m3++) {
					var result3 = filter3.evaluate(orders3[m3]["ReportShiftID"]);
                    if (result3)
                        ordersbyid3.push(orders3[m3]);
                }

                var orderssource3 = { datafields: [
				{ name: 'ReportID',type: 'string'},
				{ name: 'ReportShiftID',type: 'string'},
	{ name: 'Tanggal',type: 'date'},
	{ name: 'Shifts',type: 'string'},
	{ name: 'ShiftHour',type: 'string'},
	{ name: 'Position02',type: 'string'},
	{ name: 'Position05',type: 'string'},
	{ name: 'Position04',type: 'string'},
	{ name: 'Position03',type: 'string'}
	],
                    id: 'ReportDetailsID',
                    localdata: ordersbyid3
                }
				var nestedGridAdapter3 = new $.jqx.dataAdapter(orderssource3);
				
	if (grid3 != null)
	{
	grid3.jqxGrid
	({ filterable: true,
	showfilterrow: true,source: nestedGridAdapter3,  width: '80%',
	height: '80%',
	columns:
	[
	{ text: 'Hour', dataField: 'ShiftHour', width: '20%' },
	{ text: 'Shiftly_Data[0].Availability', dataField: 'Position02',  width: '20%' }
	,{ text: 'Shiftly_Data[0].OEE', dataField: 'Position05',  width: '20%' }
	,{ text: 'Shiftly_Data[0].Performance', dataField: 'Position04',  width: '20%' }
	,{ text: 'Shiftly_Data[0].Quality', dataField: 'Position03',  width: '20%' }
	]
	});
	}
	}
	$('#jqxgrid').jqxGrid(
	{
	width: '100%',
	source: dataAdapter1,
	autoheight: true,
	filterable: true,
	showfilterrow: true,
	rowdetails: true,
	initrowdetails: initlevel2,
	rowdetailstemplate:
	{
	rowdetails: "<div id='grid' ></div>", rowdetailsheight: 400, rowdetailshidden: true
	},
	columns:
	[
	{ text: 'Date', dataField: 'Tanggal',  width: '100%' , cellsformat: 'dd-MM-yyyy HH:mm:ss', filtertype: 'date' }
	]
	});
	});
	</script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)