Nested Grid manipulation

[mocchi253Member]

How can I determine in nestedgrid for each value, in Territory G-01a must out only nested grid with MD ID IM-00022
and the second G-01b out MD ID with MJ-00079
anyone can tell how can I compare for the value in each grid so I can display what would be equal value for each row

here: my code base on sample at nested grid

    $(document).ready(function () {
	 
         // prepare the data
         var source =
         {
             datatype: "json",
             datafields: [
                 { name: 'Region'},
                 { name: 'District'},
                 { name: 'Territory'},
				 { name: 'PSR'},
				 { name: 'Cycle_Planned'},
				 { name: 'Cycle_Actual'},
				 { name: 'Cycle_Missed'},
				 { name: 'Cycle_Acceptable'},
				 { name: 'Cycle_Performance'},
             ],
             url: 'customdata.php',
		 };
 
		//START TEST
		    // set rows details.
			$("#jqxgrid").bind('bindingcomplete', function (event) {
				if (event.target.id == "jqxgrid") {
					$("#jqxgrid").jqxGrid('beginupdate');
					var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
					for (i = 0; i  0 ? true : false;
						$("#jqxgrid").jqxGrid('setrowdetails', i, "<div style='margin: 10px'></div>", 220, hidden);
					}
					$("#jqxgrid").jqxGrid('endupdate');
				}
			});
	
			var initlevel2 = function (index) {
				var source2 =
					{
						datatype: "json",
						datafields: [
						{ name: 'Itinerary Date'},
							{ name: 'Visit Date'},
							{ name: 'Visit Time'},
							{ name: 'MD ID'},
						],
						url: 'customdata2.php',
				};			
					
				var grid = $($.find('#grid' + index));
			
				grid.bind('bindingcomplete', function (event) {
					if (event.target.id == "grid" + index) {
						grid.jqxGrid('beginupdate');
						var datainformation = grid.jqxGrid('getdatainformation');
						for (var i = 0; i &lt; datainformation.rowscount; i++) {
							var hidden = true;
							grid.jqxGrid('setrowdetails', i, &quot;<div style='margin: 10px'></div>", 220, hidden);
						}
						grid.jqxGrid('endupdate');
					}
				});
				
				if (grid != null) {
					var dataAdapter = new $.jqx.dataAdapter(source2);
					grid.jqxGrid({source: dataAdapter, theme: 'classic', width: 600, height: 200,
						columns: [
						{ text: 'Itinerary Date', datafield: 'Itinerary Date', width: 100 },
						{ text: 'Visit Date', datafield: 'Visit Date', width: 100 },
						{ text: 'Visit Time', datafield: 'Visit Time', width: 180 },
						{ text: 'MD ID', datafield: 'MD ID', cellsalign: 'right' }
						]
					});
				}
			}
		//END OF TEST
 
         $("#jqxgrid").jqxGrid(
         {
             source: source,
			 width: '80%',
             height: '80%',
			 rowdetails: true,
			 rowsheight: 20,
             theme: 'classic',
			 initrowdetails: initlevel2,
             columns: [
               { text: 'District', datafield: 'District', width: 100 },
               { text: 'Territory', datafield: 'Territory', width: 100 },
			   { text: 'PSR', datafield: 'PSR', width: 100 },
			   { text: 'Cycle_Planned', datafield: 'Cycle_Planned', width: 150 },
			   { text: 'Cycle_Actual', datafield: 'Cycle_Actual', width: 150 },
			   { text: 'Cycle_Missed', datafield: 'Cycle_Missed', width: 150 },
			   { text: 'Cycle_Acceptable', datafield: 'Cycle_Acceptable', width: 140 },
			   { text: 'Cycle_Performance', datafield: 'Cycle_Performance', width: 140 },
			   
           ]
         });
		 
     });

[DimitarParticipant]

Hello mocchi253,

As it is in the Nested Grids example, the initrowdetails property is filtered based on the EmployeeID. To have only certain rows show in your nested grid, you should create a similar filter. Please take a look at the one in the demo:

            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).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);
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[i]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }

Best Regards,
Dimitar

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

[Robin KluthMember]

Hi Dimitar!

The demo seems to be buggy, btw:

for (var m = 0; m < orders.length; m++) {
    var result = filter.evaluate(orders[m]["EmployeeID"]);
    if (result)
    ordersbyid.push(orders[i]);
}

You use ‘i’ for ordersbyid.push(orders[i]); but i is not defined. It should be m, shouldnt it?

[mocchi253Member]

Sorry but I’m really confuse about in the example, can you elaborate this part and I already look in documentation but there no part there about in nested grid please help me or explain this part I’m really confuse.

var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).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);
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]["EmployeeID"]);
if (result)
ordersbyid.push(orders[m]);
}


[DimitarParticipant]

Hello,

Robin Kluth, thank you for your feedback. We will take care of this oversight.

Mocchi253, by filtering your nested grid, only the rows which are appropriate are shown. You can find out more about filtering on Grid Filtering. In your project, the filter should be based on the Territory column.

Best Regards,
Dimitar

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

[mocchi253Member]

Hi Dimitar,

I tried the sample in grid filtering still won’t get the output correct, can you guide me how do it correctly
I change the value that’s same Territory would be output of each nested grid.

var initlevel2 = function (index, parentElement, gridElement) {
// var grid = $($.find('#grid' + index));

var record = $("#jqxgrid").jqxGrid('getrowdata', index);
var id = record.uid;
var grid = $($(parentElement).children()[0]);

var filtergroup = new $.jqx.filter();

var filtervalue = id;
var filtercondition = 'equal';

var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'Territory', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');

var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]['Territory']);
if (result)
ordersbyid.push(orders[m]);
}

var source2 = { datafields: [
{ name: 'Region'},
{ name: 'District'},
{ name: 'Territory'},
{ name: 'PSR'},
{ name: 'Cycle_Planned'},
],
url : 'customdata.php',
datatype : 'json',
}

if (grid != null) {
grid.jqxGrid({ source: source2, theme: 'classic', width: 600, height: 200,
filterable: true,
columns: [
{ text: 'Territory', datafield: 'Territory', width: 100 },
{ text: 'Region', datafield: 'Region', width: 100 },
{ text: 'District', datafield: 'District', width: 100 },
{ text: 'PSR', datafield: 'PSR', width: 200 },
{ text: 'Cycle_Planned', datafield: 'Cycle_Planned', width: 200 }
]
});
}
}


[mocchi253Member]

Already got the idea how to use the grid filtering and already work
but my problem now is gathering the data thru json


var detailsurl = 'customdata.php';
var source2 = { datafields: [
{ name: 'Territory'},
{ name: 'Region'},
{ name: 'District'},
{ name: 'PSR'},
{ name: 'Cycle_Planned'},
],
datatype: 'json',
url: detailsurl,
};

var ordersDataAdapter = new $.jqx.dataAdapter(source2, { autoBind: true });
orders = ordersDataAdapter.records;

var initlevel2 = function (index, parentElement, gridElement, record) {
// var grid = $($.find('#grid' + index));
var record = $("#jqxgrid").jqxGrid('getrowdata', index);
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);

var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = 'contains';

var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

// filtergroup.addfilter(filter_or_operator, filter1);
//----- when add this filter work
// add and apply the filters.
// $("#jqxgrid").jqxGrid('addfilter', 'Territory', filtergroup);
// $("#jqxgrid").jqxGrid('applyfilters');
//-------------------------------------------------------------------------------------------------------------------------------
// my problem is here how can I sure if this data evaluate this and passing data cause don't have return value in nested grid
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]['Territory']);
if (result)
ordersbyid.push(orders[m]);
}
//----------------------------------------------------------------------------------------------------------
var source2 = { datafields: [
{ name: 'Region'},
{ name: 'District'},
{ name: 'Territory'},
{ name: 'PSR'},
{ name: 'Cycle_Planned'},
],
// url: 'customdata.php',
// datatype: 'json',
localdata: ordersbyid,

}

if (grid != null) {
grid.jqxGrid({ source: source2, theme: 'classic', width: 600, height: 200,
// filterable: true,
columns: [
{ text: 'Territory', datafield: 'Territory', width: 100 },
{ text: 'Region', datafield: 'Region', width: 100 },
{ text: 'District', datafield: 'District', width: 100 },
{ text: 'PSR', datafield: 'PSR', width: 200 },
{ text: 'Cycle_Planned', datafield: 'Cycle_Planned', width: 200 }
]
});

}

}


[sspParticipant]

Hi,

I have to develop four nested grids using spring MVC, for which I am referring to your sample code “server_side_grid__with_nested_grids” in phpdemos and am able to get two nested grids and now trying to for the next level nested grid by modifying the same code…

please suggest me the method to link to the third nested grid using your sample code!!

In order to obtain the third level nested grid, I have added initrowdetails2 functionin the second grid as follows,
but I am very confused in binding(for setting row details) for the next level grid like you have done for two nested grids….
plz reply whether is it doable to modify your sample code for JSON data to obatin four level nested grids??

$(document).ready(function () {
var theme = getDemoTheme();

var sourceFirstGrid =
{
datatype: “json”,
datafields: [
{ name: ‘leadProjectNumber’, type: ‘string’ },
{ name: ‘projectNumber’, type: ‘string’ },
{ name: ‘pdxType’, type: ‘string’ }
],
id: ‘projectNumber’,
url: ‘getFirstGridForRevisionHistory.htm’,
root: “”,
cache: false,
};

var firstGridAdapter = new $.jqx.dataAdapter(sourceFirstGrid);

var initrowdetails = function (index, parentElement, gridElement) {
var row = index;
var id = $(“#jqxFirstgridHistory”).jqxGrid(‘getrowdata’, row)[‘projectNumber’];
var grid = $($(parentElement).children()[0]);

var initrowdetails2 = function (index, parentElement, gridElement) {
var row = index;
var id =grid.jqxGrid(‘getrowdata’, row)[‘projectNumber’];
var grid2 = $($(parentElement).children()[0]);

var sourceThirdGrid =
{
url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id,
dataType: ‘json’,
data: {projectnumber: id},
datatype: “json”,
cache: false,
datafields: [
{ name: ‘location’ },
{ name: ‘jobName’ },
{ name: ‘hours’ },
{ name: ‘hoursDifference’ },
{ name: ‘total’ },
{ name: ‘costDiff’ }
],
//root: “”,
};
var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);

// init Orders Grid
grid2.jqxGrid(
{
width : 890,
height : 530,
source : thirdGridAdapter,
theme : ‘classic’,
showstatusbar : true,
statusbarheight : 00,
showaggregates : true,
rendergridrows: function () {
return thirdGridAdapter.records;
},
selectionmode : ‘multiplecellsadvanced’,
columns: [
{ text: ‘Location’, datafield: ‘location’, cellsformat: ‘d’, width: 150 },
{ text: ‘Global Skill’, datafield: ‘jobName’, width: 150 },
{ text: ‘Hours’, datafield: ‘hours’, width: 100 },
{ text: ‘Hour Difference’, datafield: ‘hoursDifference’, width: 100 },
{ text: ‘Total Cost(KEuro)’, datafield: ‘total’, width: 100 },
{ text: ‘Cost Difference’, datafield: ‘costDiff’, width: 200 }
]
});
};
grid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “$(parentElement).children()[1]”) {
grid.jqxGrid(‘beginupdate’);

var datainformation =grid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
grid.jqxGrid(‘setrowdetails’, i, “

“, 220, true);
}
grid.jqxGrid(‘resumeupdate’);
}
});

var sourceSecondGrid =
{
url: ‘getSecondGridForRevisionHistory.htm?projectNumber=’+id,
dataType: ‘json’,
data: {projectnumber: id},
datatype: “json”,
cache: false,
datafields: [
{ name: ‘modifiedDate’ },
{ name: ‘modifiedBy’ },
{ name: ‘projectNumber’ },
{ name: ‘leadProjectNumber’ },
{ name: ‘status’ },
{ name: ‘checkinComments’ },
{ name: ‘remarks’ }
],
root: “”,
};
var secondGridAdapter = new $.jqx.dataAdapter(sourceSecondGrid);

// init Orders Grid
grid.jqxGrid(
{
width : 990,
height : 630,
source : secondGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initrowdetails2,
showstatusbar : true,
statusbarheight : 00,
showaggregates : true,
rendergridrows: function () {
return secondGridAdapter.records;
},
selectionmode : ‘multiplecellsadvanced’,
columns: [
{ text: ‘Modified Date & Time’, datafield: ‘modifiedDate’, cellsformat: ‘d’, width: 150 },
{ text: ‘Modified By’, datafield: ‘modifiedBy’, width: 150 },
{ text: ‘Project Number’, datafield: ‘projectNumber’, width: 100 },
{ text: ‘LeadProjectNumber’, datafield: ‘leadProjectNumber’, width: 100 },
{ text: ‘status’, datafield: ‘status’, width: 100 },
{ text: ‘Version Comments’, datafield: ‘checkinComments’, width: 200 },
{ text: ‘Status Remarks’, datafield: ‘remarks’, width: 200 }
]
});

};

// set rows details.
$(“#jqxFirstgridHistory”).bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxFirstgridHistory”) {
$(“#jqxFirstgridHistory”).jqxGrid(‘beginupdate’);

var datainformation = $(“#jqxFirstgridHistory”).jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
$(“#jqxFirstgridHistory”).jqxGrid(‘setrowdetails’, i, “

“, 220, true);
}
$(“#jqxFirstgridHistory”).jqxGrid(‘resumeupdate’);
}
});

$(“#jqxFirstgridHistory”).jqxGrid(
{
width : 1140,
height : 727,
source : firstGridAdapter,
theme : ‘classic’,
editable : true,
showstatusbar : true,
statusbarheight : 00,
showaggregates : true,
rowdetails: true,
initrowdetails: initrowdetails,
rendergridrows: function () {
return firstGridAdapter.records;
},
selectionmode : ‘multiplecellsadvanced’,
columns: [
{ text: ‘LeadProjectNumber’, datafield: ‘leadProjectNumber’, width: 150},
{ text: ‘Project Number’, datafield: ‘projectNumber’, width: 150 },
{ text: ‘PDx Type’, datafield: ‘pdxType’, width: 80 }
]
});
});

[sspParticipant]

Hi,

I am referring to the below link for nested grid and it helped me a lot, but I am stuck with one query!!
http://www.jqwidgets.com/assembling-n-nested-jquery-grid/#comment-8464

I am using JSON data and successfully getting two grids along with able to link to third grid, but when I pass the URL to the third grid, I have to pass a column value(unique value) from the second grid along with the URL to the third grid,

In the first ten lines of below snippet, I am trying to retrieve the values as (id1,id2,id3) from level two grid to pass along with the third URL to display the third level grid based upon the unique values (id1,id2,id3), but the problem is the index value of var secGrid = $($.find(‘#jqxSecGrid’ + index)); which shouldn’t be taken from the var initlevel3 = function (index),
plz suggest me a way to retrieve the secGrid in the initlevel3 function without taking the index from initlevel3, whereas the secGrid should have the index initlevel2 itself??

var initlevel3 = function (index) {
var secGrid = $($.find(‘#jqxSecGrid’ + index));
alert(“index:” +index);
var id3 = secGrid.jqxGrid(‘getrowdata’, row)[‘projectNumber’];
alert(“projectNumber:” +id3);
var id1 = secGrid.jqxGrid(‘getrowdata’, row)[‘projectRevisionId’];
alert(“projectRevisionId:” +id1);
var id2 = secGrid.jqxGrid(‘getrowdata’, row)[‘location’];
alert(“location:” +id2);

var thirdGrid = $($.find(‘#jqxThirdGrid’ + index));

if (thirdGrid != null) {

var sourceThirdGrid =
{
url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id3 +’&projectRevisionId=’+id1+’&location=’+id2,
dataType: ‘json’,
//data: {ProjectRevisionid: id1},
datatype: “json”,
cache: false,
datafields: [
{ name: ‘projectNumber’ },
{name: ‘projectRevisionId’},
{ name: ‘location’ },
{ name: ‘jobName’ },
{ name: ‘hours’ },
{ name: ‘hoursDifference’ },
{ name: ‘total’ },
{ name: ‘costDiff’ }
],
//root: “”,
};
var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);

Thanks & Regards,
Sandhya S P

[Author]

Posts