jQuery UI Widgets Forums Grid Error when selected Level 3 Nested Grid

This topic contains 4 replies, has 2 voices, and was last updated by  windrunner 8 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Error when selected Level 3 Nested Grid #77735

    windrunner
    Participant

    Hai All,

    i have one case there is i have create 3 Level nested grid and they are success bind the source data
    but there something happen, when i’m trying select one item in level 2 they show all data without bind to ID …

    if this not clear , i will give the case example

    Case :

    i have several data on level 1 grid there are
    <Tables>
    <Table ReportID=”25-05-2015″>
    <Tanggal>25-05-2015</Tanggal>
    </Table>
    <Table ReportID=”29-05-2015″>
    <Tanggal>29-05-2015</Tanggal>
    </Table>
    <Table ReportID=”30-05-2015″>
    <Tanggal>30-05-2015</Tanggal>
    </Table>
    </Tables>

    and in the level 2 grid are
    <Tables>
    <Table ReportShiftID=”Shift1″>
    <ReportID>25-05-2015</ReportID>
    <Shifts>Shift1</Shifts>
    </Table>
    <Table ReportShiftID=”Shift2″>
    <ReportID>25-05-2015</ReportID>
    <Shifts>Shift2</Shifts>
    </Table>
    <Table ReportShiftID=”Shift3″>
    <ReportID>25-05-2015</ReportID>
    <Shifts>Shift3</Shifts>
    </Table>
    <Table ReportShiftID=”Shift1″>
    <ReportID>29-05-2015</ReportID>
    <Shifts>Shift1</Shifts>
    </Table>
    <Table ReportShiftID=”Shift2″>
    <ReportID>29-05-2015</ReportID>
    <Shifts>Shift2</Shifts>
    </Table>
    <Table ReportShiftID=”Shift3″>
    <ReportID>29-05-2015</ReportID>
    <Shifts>Shift3</Shifts>
    </Table>
    <Table ReportShiftID=”Shift1″>
    <ReportID>30-05-2015</ReportID>
    <Shifts>Shift1</Shifts>
    </Table>
    <Table ReportShiftID=”Shift2″>
    <ReportID>30-05-2015</ReportID>
    <Shifts>Shift2</Shifts>
    </Table>
    <Table ReportShiftID=”Shift3″>
    <ReportID>30-05-2015</ReportID>
    <Shifts>Shift3</Shifts>
    </Table>
    </Tables>

    and in the level 3 grid are
    <Tables>
    <Table ReportDetailsID=”0″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>25-05-2015 12:00:00</ShiftHour>
    <Position02>38.31</Position02>
    <Position05>18.49</Position05>
    <Position04>56.42</Position04>
    <Position03>85.55</Position03>
    </Table>
    <Table ReportDetailsID=”1″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>25-05-2015 13:00:00</ShiftHour>
    <Position02>84.13</Position02>
    <Position05>41.04</Position05>
    <Position04>56.74</Position04>
    <Position03>85.97</Position03>
    </Table>
    <Table ReportDetailsID=”2″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>25-05-2015 14:00:00</ShiftHour>
    <Position02>90.93</Position02>
    <Position05>44.39</Position05>
    <Position04>56.78</Position04>
    <Position03>85.98</Position03>
    </Table>
    <Table ReportDetailsID=”3″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>25-05-2015 15:00:00</ShiftHour>
    <Position02>93.65</Position02>
    <Position05>45.73</Position05>
    <Position04>56.8</Position04>
    <Position03>85.98</Position03>
    </Table>
    <Table ReportDetailsID=”4″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>25-05-2015 16:00:00</ShiftHour>
    <Position02>95.11</Position02>
    <Position05>46.44</Position05>
    <Position04>56.84</Position04>
    <Position03>85.9</Position03>
    </Table>
    <Table ReportDetailsID=”5″>
    <ReportID>25-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>25-05-2015 17:00:00</ShiftHour>
    <Position02>95.15</Position02>
    <Position05>46.45</Position05>
    <Position04>56.84</Position04>
    <Position03>85.89</Position03>
    </Table>
    <Table ReportDetailsID=”6″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>29-05-2015 23:00:00</ShiftHour>
    <Position02>34.05</Position02>
    <Position05>16.63</Position05>
    <Position04>56.88</Position04>
    <Position03>85.88</Position03>
    </Table>
    <Table ReportDetailsID=”7″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 00:00:00</ShiftHour>
    <Position02>47.47</Position02>
    <Position05>23.22</Position05>
    <Position04>56.92</Position04>
    <Position03>85.94</Position03>
    </Table>
    <Table ReportDetailsID=”8″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 00:00:00</ShiftHour>
    <Position02>71</Position02>
    <Position05>34.71</Position05>
    <Position04>56.83</Position04>
    <Position03>86.02</Position03>
    </Table>
    <Table ReportDetailsID=”9″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 02:00:00</ShiftHour>
    <Position02>86.37</Position02>
    <Position05>42.23</Position05>
    <Position04>56.73</Position04>
    <Position03>86.19</Position03>
    </Table>
    <Table ReportDetailsID=”10″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 03:00:00</ShiftHour>
    <Position02>88.84</Position02>
    <Position05>43.45</Position05>
    <Position04>56.76</Position04>
    <Position03>86.16</Position03>
    </Table>
    <Table ReportDetailsID=”11″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 04:00:00</ShiftHour>
    <Position02>90.77</Position02>
    <Position05>44.44</Position05>
    <Position04>56.81</Position04>
    <Position03>86.17</Position03>
    </Table>
    <Table ReportDetailsID=”12″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 05:00:00</ShiftHour>
    <Position02>92.13</Position02>
    <Position05>45.14</Position05>
    <Position04>56.85</Position04>
    <Position03>86.19</Position03>
    </Table>
    <Table ReportDetailsID=”13″>
    <ReportID>29-05-2015</ReportID>
    <ReportShiftID>Shift3</ReportShiftID>
    <ShiftHour>30-05-2015 06:00:00</ShiftHour>
    <Position02>93.14</Position02>
    <Position05>45.66</Position05>
    <Position04>56.87</Position04>
    <Position03>86.2</Position03>
    </Table>
    <Table ReportDetailsID=”14″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift3</ReportShiftID>
    <ShiftHour>30-05-2015 07:00:00</ShiftHour>
    <Position02>93.9</Position02>
    <Position05>46.02</Position05>
    <Position04>56.85</Position04>
    <Position03>86.21</Position03>
    </Table>
    <Table ReportDetailsID=”15″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift3</ReportShiftID>
    <ShiftHour>30-05-2015 08:00:00</ShiftHour>
    <Position02>94.03</Position02>
    <Position05>46.09</Position05>
    <Position04>56.85</Position04>
    <Position03>86.2</Position03>
    </Table>
    <Table ReportDetailsID=”16″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>30-05-2015 20:00:00</ShiftHour>
    <Position02>0</Position02>
    <Position05>0</Position05>
    <Position04>0</Position04>
    <Position03>0</Position03>
    </Table>
    <Table ReportDetailsID=”17″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift1</ReportShiftID>
    <ShiftHour>30-05-2015 21:00:00</ShiftHour>
    <Position02>27.68</Position02>
    <Position05>13.51</Position05>
    <Position04>56.85</Position04>
    <Position03>85.87</Position03>
    </Table>
    <Table ReportDetailsID=”18″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 22:00:00</ShiftHour>
    <Position02>47.04</Position02>
    <Position05>22.97</Position05>
    <Position04>56.87</Position04>
    <Position03>85.89</Position03>
    </Table>
    <Table ReportDetailsID=”19″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>30-05-2015 23:00:00</ShiftHour>
    <Position02>58.22</Position02>
    <Position05>28.45</Position05>
    <Position04>56.87</Position04>
    <Position03>85.92</Position03>
    </Table>
    <Table ReportDetailsID=”20″>
    <ReportID>30-05-2015</ReportID>
    <ReportShiftID>Shift2</ReportShiftID>
    <ShiftHour>31-05-2015 00:00:00</ShiftHour>
    <Position02>59.08</Position02>
    <Position05>28.87</Position05>
    <Position04>56.87</Position04>
    <Position03>85.91</Position03>
    </Table>
    </Tables>

    then i want to see the data from date 25-05-2015 on shift1 they show all the data from date between 25-05-2015 until 30-05-2015 and all shift

    my question is how can i fix it ? i’m really don’t know what is wrong from the code..

    this is the 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 = {
    	datatype: 'xml',
    	datafields: [
    	{ 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'}
    	],
    	async: false,
    	record: 'Table',
    	id: 'ReportID',
    	url: url1,
    	};
    	var dataAdapter1 =  new $.jqx.dataAdapter(source1);
    	var url2 = "test2.xml";
    	source2 = {
    	datatype: 'xml',
    	datafields: [
    	{ 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'}
    	],
    	async: false,
    	record: 'Table',
    	id: 'ReportShiftID',
    	url: url2,
    	};
    	var url3 = "test3.xml";
    	source3 = {
    	datatype: 'xml',
    	datafields: [
    	{ 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'}
    	],
    	async: false,
    	record: 'Table',
    	id: 'ReportDetailsID',
    	url: url3,
    	};
    	var initlevel2 = function (index)
    	{
    	var grid = $($.find('#grid' + index));
    	if (grid != null)
    	{
    	var dataAdapter2 = new $.jqx.dataAdapter(source2);
    	grid.jqxGrid
    	({
    	filterable: true,
    	showfilterrow: true,rowdetails: true, initrowdetails: initlevel3, source: dataAdapter2, width: '90%',height: '90%',
    	source: dataAdapter2,
    	rowdetailstemplate:
    	{
    	rowdetails: "<div id='subgrid' ></div>", rowdetailsheight: 300, rowdetailshidden: true 
    	},
    	columns:
    	[
    	{ text: 'Shifts', dataField: 'Shifts',  width: '100%' }
    	]
    	});
    	}
    	}
    	var initlevel3 = function (index)
    	{
    	var grid = $($.find('#subgrid' + index));
    	var dataAdapter3 = new $.jqx.dataAdapter(source3);
    	if (grid != null)
    	{
    	grid.jqxGrid
    	({ filterable: true,
    	showfilterrow: true,source: dataAdapter3,  width: '80%',
    	source: dataAdapter3,
    	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>
    Error when selected Level 3 Nested Grid #77785

    Dimitar
    Participant

    Hi windrunner,

    Before initializing the nested grids, you would have to filter the whole data (i.e. from test2.xml) in order to display only the relevant records in the nested grids. This can be seen implemented in the demo Nested Grids (note the use of filtering functions in initrowdetails).

    Best Regards,
    Dimitar

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

    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>
    
    Error when selected Level 3 Nested Grid #77887

    Dimitar
    Participant

    Hi windrunner,

    For data in the third level to be shown, you need to change the filtervalue3 from id3 to record.Shifts, i.e.:

    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 = record.Shifts;
        var filtercondition3 = 'equal';
        var filter3 = filtergroup3.createfilter('stringfilter', filtervalue3, filtercondition3);
        ...

    Best Regards,
    Dimitar

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

    Error when selected Level 3 Nested Grid #77911

    windrunner
    Participant

    thanks for your response Dimitar

    it’s done..

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

You must be logged in to reply to this topic.