jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Error when selected Level 3 Nested Grid
Tagged: angular grid, filter, filter data, grid, jquery grid, jqxgrid, n-nested, nested grid, nested grids, record, relevant data, row
This topic contains 4 replies, has 2 voices, and was last updated by windrunner 9 years, 5 months ago.
-
Author
-
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/thanks for your response Dimitar
it’s done..
-
AuthorPosts
You must be logged in to reply to this topic.