[sspParticipant]

Hi,

I have set the height and width of my N-level nested grid, now if I have few rows of data, the remaining empty rows are displayed like in excel sheet except in the first grid,
I have to display the rows only the data, is it possible to avoid the empty rows??

  $("#jqxFirstgridHistory").jqxGrid('setrowdetails', i, "<div id='jqxSecGrid" + i + "' style='margin: 10px;'></div>", 350, true);
secGrid.jqxGrid(
		{
		   	 width : 1170,
	   		height : '80%', 

Thanks & Regards,
Sandhya S P

[sspParticipant]

Hi,

Is there an option for me to change the icon which expands the nested grids, inorder to maintain the uniformity of icons used throughout my project??

I have to change it to ‘+’ sign, plz let me know if your functionality supports the option to change the icon for grids expansion?

Thanks & Regards,
Sandhya S P

[sspParticipant]

ssp

Hi,

I am facing an weird issue in one scenario, plz suggest if you could rectify my mistake!

Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
grid21 has subgrid grid31 and
grid22 has subgrid grid32 at initlevel3,

If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

In my following code, after the alert messages are displayed, it is calling the URL twice!!
I am Not able to rectify the problem behind this..
plz suggest if its gridElement responsible for causing this issue?

// create third nested grid.
var initlevel3 = function (index,parentElement, gridElement, datarecord) {
var row3 = index;
alert(“index:” +index);
var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)['projectNumber'];
alert(“projectNumber:” +id1);
var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)['projectRevisionId'];
alert(“projectRevisionId:” +id2);
var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)['location'];
alert(“location:” +id3);
thirdGrid = $($.find(‘#jqxThirdGrid’ + index));
thirdGrid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxThirdGrid” + index) {
thirdGrid.jqxGrid(‘beginupdate’);
var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
thirdGrid.jqxGrid('setrowdetails', i, "
“, 220, hidden);
}
thirdGrid.jqxGrid(‘endupdate’);
}
});
if (thirdGrid != null) {
var sourceThirdGrid =
{
//data: {ProjectRevisionid: id1},
datatype: “json”,
cache: false,
datafields: [
{ name: 'projectNumber' },
{name: 'projectRevisionId'},
{ name: 'location' },
{ name: 'jobName' },
{ name: 'hours' },
{ name: 'hoursDifference' },
{ name: 'total' },
{ name: 'costDiff' },
{ name: 'jobId'}
],
cache: false,
url: ‘getThirdGridForRevisionHistory.htm?projectNumber=’+id1 +’&projectRevisionId=’+id2+’&location=’+id3
};
var thirdGridAdapter = new $.jqx.dataAdapter(sourceThirdGrid);
// init Orders Grid
thirdGrid.jqxGrid(
{
width : 859,
height : 235,
source : thirdGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initlevel4,
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: 100 },
{ text: 'ProjectRevisionId', datafield: 'projectRevisionId', width: 150 }
]
});
}
};

Thanks & Regards,

Sandhya S P

[sspParticipant]

Is it possible to implement search toolbar in nested grids?
In the below code I am trying to use getfilterinformation to bind and set row details to the nested grid, but it doesn’t work,

Will the getfilterinformation help to obatin the filtered data and bind it to the nested grid??

$("#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++) {	               
	                      $(&quot;#jqxFirstgridHistory&quot;).jqxGrid('setrowdetails', i, &quot;<div style='margin: 10px'>", 220,    true);	  
	                  }
	 	                  $("#jqxFirstgridHistory").jqxGrid('endupdate');
	              	              
	           <strong>   $("#jqxFirstgridHistory").bind('filter', function (event) {  
	            	  $("#jqxFirstgridHistory").jqxGrid('beginupdate'); 
	             	  var filterInfo = $("#jqxFirstgridHistory").jqxGrid('getfilterinformation');              
	                   for (var j = 0; j &lt; filterInfo.length; j++) {  
	                 	 
                 alert(getfilterinformation);
                      $(&quot;#jqxFirstgridHistory&quot;).jqxGrid('setrowdetails', i, &quot;<div style='margin: 10px'>", 220, true);	  
	               }
	                   $("#jqxFirstgridHistory").jqxGrid('endupdate');  
      });</div></strong>
	              }	              
 });     
 var firstGridAdapter = new $.jqx.dataAdapter(sourceFirstGrid);	             	
			
			$("#jqxFirstgridHistory").jqxGrid(
          {
              source: firstGridAdapter,             
              rowdetails: true,
              selectionmode: 'multiplecellsadvanced',
              initrowdetails: initlevel2,
             <strong> showfilterrow: true,
              filterable: true,	</strong>	 </div>

[sspParticipant]

ssp

Hi,

I have to add filter textbox(search toolbar) in every column of the nested grids,
The filter row operation is working fine in every column,
but the problem I am facing is, after filtering, the icon for expanding the nested grid disappears!
this is happening bcz after the filterable is set to true, it is not calling binding event used for the nested grid.

How will I implement filter textboxes in nested grids??

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

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

$(“#jqxFirstgridHistory”).jqxGrid(
{
width: ’100%’,
source: firstGridAdapter,
theme: theme,
autoheight: true,
editable: false,
columnsresize: true,
rowdetails: true,
selectionmode: ‘multiplecellsadvanced’,
showstatusbar : true,
statusbarheight : 00,
initrowdetails: initlevel2,
showfilterrow: true,
filterable: true,
/* rendergridrows: function () {
return firstGridAdapter.records;
}, */
columns: [
{ text: ‘LeadProjectNumber’,columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, datafield: ‘leadProjectNumber’, align: ‘center’,width: 150},
{ text: ‘Project Number’, datafield: ‘projectNumber’,align: ‘center’, width: 150 },
{ text: ‘PDx Type’, datafield: ‘pdxType’,align: ‘center’, width: 150 },
{ text: ‘CR ProjectId’, datafield: ‘crProjectId’,align: ‘center’, width: 150 }
]
});
// set rows details.
$(“#jqxFirstgridHistory”).bind(‘bindingcomplete’, function (event) {
alert(“bindingcompletye”);
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(‘endupdate’);
}

});
});

Thanks & Regards,
Sandhya S P

[sspParticipant]

Hi,

I got the solution posted in http://www.jqwidgets.com/community/topic/filter-n-tier-nested-grid/#post-26101

But right now my issue is, in initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

Do you see anything wrong with the code?

[sspParticipant]

Hi,

In initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

Do you see anything wrong with the above code?

[sspParticipant]

Hi,

I got the solution but right now my issue is, in initlevel3, the URL is being called twice when I expand the third nested grid and I am getting two sets of the same resultset displayed in the console and grid will be blank, I am stuck here!

Do you see anything wrong with the code?

[sspParticipant]

Hi,

In my following code, after the alert messages are displayed, it is calling the URL twice!!
I am Not able to rectify the problem behind this..
plz suggest if its gridElement responsible for causing this issue?

// create third nested grid.
var initlevel3 = function (index,parentElement, gridElement, datarecord) {
var row3 = index;
alert(“index:” +index);

var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
alert(“projectNumber:” +id1);
var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
alert(“projectRevisionId:” +id2);
var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
alert(“location:” +id3);

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

thirdGrid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxThirdGrid” + index) {
thirdGrid.jqxGrid(‘beginupdate’);
var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
thirdGrid.jqxGrid('setrowdetails', i, "
“, 220, hidden);
}
thirdGrid.jqxGrid(‘endupdate’);
}
});

if (thirdGrid != null) {

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

// init Orders Grid
thirdGrid.jqxGrid(
{
width : 859,
height : 235,
source : thirdGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initlevel4,
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: 100 },
{ text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

]
});
}
};

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi Peter,

I was facing the same issue posted in http://www.jqwidgets.com/community/topic/filter-n-tier-nested-grid/#post-25956 and glad the working solution was posted which helped me a lot!!!

Perhaps, now I am facing an weird issue in one scenario, plz suggest if you could rectify my mistake!

Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
grid21 has subgrid grid31 and
grid22 has subgrid grid32 at initlevel3,

If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

// create third nested grid.
var initlevel3 = function (index,parentElement, gridElement, datarecord) {
var row3 = index;
alert(“index:” +index);

var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
alert(“projectNumber:” +id1);
var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
alert(“projectRevisionId:” +id2);
var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
alert(“location:” +id3);

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

thirdGrid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxThirdGrid” + index) {
thirdGrid.jqxGrid(‘beginupdate’);
var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
thirdGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
thirdGrid.jqxGrid(‘endupdate’);
}
});

if (thirdGrid != null) {

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

// init Orders Grid
thirdGrid.jqxGrid(
{
width : 859,
height : 235,
source : thirdGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initlevel4,
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: 100 },
{ text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

]
});
}
};

var initlevel2 = function (index) {
var row2 = index;
alert(“index:” +index);
var id = $(“#jqxFirstgridHistory”).jqxGrid(‘getrowdata’, row2)[‘projectNumber’];
alert(“jqxprojectNumber:”+id);

secGrid = $($.find(‘#jqxSecGrid’ + index));

secGrid.bind(‘bindingcomplete’, function (event) {

if (event.target.id == “jqxSecGrid” + index) {
secGrid.jqxGrid(‘beginupdate’);
var datainformation = secGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
secGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
secGrid.jqxGrid(‘endupdate’);
}
});

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi!!

I was facing the same issue and glad you posted the working solution which helped me a lot!!!

Perhaps, now I am facing a weird issue in one scenario, plz suggest if you could rectify my mistake!

Assume I have two grids in initlevel2 – will represent here as grid21 & grid22,
grid21 has subgrid grid31 and
grid22 has subgrid grid32 at initlevel3,

If grid21 is expanded first and then grid22 is expanded, I will get proper grid31 and grid32,
but if I expand grid22 first, grid32 will be displayed correctly and then when I expand grid21, it will display blank grid31, on debug I can see it is hitting the third grid URL twice only in this scenario,

// create third nested grid.
var initlevel3 = function (index,parentElement, gridElement, datarecord) {
var row3 = index;
alert(“index:” +index);

var id1 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectNumber’];
alert(“projectNumber:” +id1);
var id2 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘projectRevisionId’];
alert(“projectRevisionId:” +id2);
var id3 = $(gridElement).jqxGrid(‘getrowdata’, row3)[‘location’];
alert(“location:” +id3);

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

thirdGrid.bind(‘bindingcomplete’, function (event) {
if (event.target.id == “jqxThirdGrid” + index) {
thirdGrid.jqxGrid(‘beginupdate’);
var datainformation = thirdGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
thirdGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
thirdGrid.jqxGrid(‘endupdate’);
}
});

if (thirdGrid != null) {

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

// init Orders Grid
thirdGrid.jqxGrid(
{
width : 859,
height : 235,
source : thirdGridAdapter,
theme : ‘classic’,
rowdetails: true,
initrowdetails: initlevel4,
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: 100 },
{ text: ‘ProjectRevisionId’, datafield: ‘projectRevisionId’, width: 150 }

]
});
}
};

var initlevel2 = function (index) {
var row2 = index;
alert(“index:” +index);
var id = $(“#jqxFirstgridHistory”).jqxGrid(‘getrowdata’, row2)[‘projectNumber’];
alert(“jqxprojectNumber:”+id);

secGrid = $($.find(‘#jqxSecGrid’ + index));

secGrid.bind(‘bindingcomplete’, function (event) {

if (event.target.id == “jqxSecGrid” + index) {
secGrid.jqxGrid(‘beginupdate’);
var datainformation = secGrid.jqxGrid(‘getdatainformation’);
for (var i = 0; i < datainformation.rowscount; i++) {
var hidden = true;
secGrid.jqxGrid('setrowdetails', i, "

“, 220, hidden);
}
secGrid.jqxGrid(‘endupdate’);
}
});

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi Peter,

Thanks & Regards,

Sandhya S P

[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

[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

[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 }
]
});
});

[Author]

Posts