[sspParticipant]

In order to obtain the third level nested grid, I have adding 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 }
]
});
});

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!!

Thanks & Regards,

Sandhya S P

[sspParticipant]

I am able to get data in both the grids now, thing is i removed root: ‘Rows’, not sure even though! but the same data is getting repeated in every row, and whether I can use the same method to get four nested grids???

$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CustomerID’, type: ‘string’},
{ name: ‘CompanyName’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘ContactTitle’, type: ‘string’},
{ name: ‘Address’, type: ‘string’},
{ name: ‘City’, type: ‘string’}
],
id: ‘CustomerID’,
url: ‘data.php’,
// root: ‘Rows’,
cache: false,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},
sort: function()
{
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

Thanks & Regards,

Sandhya S P

[sspParticipant]

I am referring to your sample code “server_side_grid__with_nested_grids” in phpdemos,

data[] and TotalRows are defined in “data file” of your code,

but my query is how r they linked/defined in the “index file”??

please explain, as this may be the reason I am unable to display data in both the grids

because even though I am able display the data in the console

strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

strJsonRevisionHistoryGrid:{“firstGridForHistory”:null,”secondGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.11111″,”location”:null,”statusId”:0,”status”:”Proposal”,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:”18-JUL-2013 02:49 PM”,”costDiff”:0.0,”modifiedBy”:”Madhu Kumar KS”,”leadProjectNumber”:”04.11111″,”checkinComments”:”Distributed from GPDX”,”crNumber”:null,”pdxType”:null,”remarks”:”-“},

[sspParticipant]

I am referring to your sample code “server_side_grid__with_nested_grids” in phpdemos,

data[] and TotalRows are defined in “data file” of your code,

but my query is how r they linked/defined in the “index file”??

please explain, as this may be the reason I am unable to display data in both the grids

because even though I am able display the data in the console

strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

strJsonRevisionHistoryGrid:{“firstGridForHistory”:null,”secondGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.11111″,”location”:null,”statusId”:0,”status”:”Proposal”,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:”18-JUL-2013 02:49 PM”,”costDiff”:0.0,”modifiedBy”:”Madhu Kumar KS”,”leadProjectNumber”:”04.11111″,”checkinComments”:”Distributed from GPDX”,”crNumber”:null,”pdxType”:null,”remarks”:”-“},

[sspParticipant]

Hi,
After using your sample code for JSON data now I am able to link into the URL of the nested grid!

but I am not able to display the values in the grid other than the column names of both the grid..
I able to implement everything from your sample php code in my java except the below lines:-

beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

I am returning the entire JSON data as “return strJsonRevisionHistoryGrid” from the controller which contains the below data,
strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

Please explain if data[0].TotalRows is the reason for the data being not displayed in the grid and how should I modify the below in my case:
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi Peter,

After using your sample code for JSON data now I am able to link into the URL of the nested grid!

but I am not able to display the values in the grid other than the column names of both the grid..
I able to implement everything from your sample php code in my java except the below lines:-

beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

I am returning the entire JSON data as “return strJsonRevisionHistoryGrid” from the controller which contains the below data,
strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

Please explain if data[0].TotalRows is the reason for the data being not displayed in the grid and how should I modify the below in my case:
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi Peter,

Thanks for the reply, after using your sample code for JSON data now I am able to link into the URL of the nested grid!

but I am not able to display the values in the grid other than the column names of both the grid..
I able to implement everything from your sample php code in my java except the below lines:-

beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

I am returning the entire JSON data as “return strJsonRevisionHistoryGrid” from the controller which contains the below data,
strJsonRevisionHistoryGrid:{“firstGridForHistory”:[{“projectRevisionId”:0,”projectNumber”:”04.45555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},{“projectRevisionId”:0,”projectNumber”:”04.35555″,”location”:null,”statusId”:0,”status”:null,”jobId”:0,”jobCodeId”:0,”jobName”:null,”jobCodeName”:null,”hours”:0.0,”hoursDifference”:0.0,”total”:0.0,”author”:null,”modifiedDate”:null,”costDiff”:0.0,”modifiedBy”:null,”leadProjectNumber”:”04.45555″,”checkinComments”:null,”crNumber”:null,”pdxType”:”PD2″,”remarks”:null},

Please explain what I should have as data[0].TotalRows,

[sspParticipant]

Hi,

I am referring to your Nested Grid sample code, which works when I test your sample code using xml data,

but in my case, I am using JSON data and am able to get the resultsets for both the parent and the child grid( found on debugging), but am able to display only the parent grid data and nested grid is displayed blank( without grid),

It is not linking with the second URL( url: ‘getSecondGridForRevisionHistory.htm’ ), thus displaying only the parent grid…

What should be the main criteria to link the child grid with the parent grid?

Should there be a common ID field in both the grids? please explain!!

$(document).ready(function () {
var theme = getDemoTheme();
var sourceFirstGrid =
{
datatype: “json”,
datafields: [
{ name: ‘leadProjectNumber’ },
{ name: ‘projectNumber’ },
{ name: ‘pdxType’ }

],
id: ‘projectNumber’,
cache: false,
url: ‘getFirstGridForRevisionHistory.htm’
};

var firstGridAdapter = new $.jqx.dataAdapter(sourceFirstGrid);
var sourceSecondGrid =
{
datatype: “json”,
datafields: [
// { name: ‘projectNumber’ },
{ name: ‘modifiedDate’ },
{ name: ‘modifiedBy’ },
{ name: ‘projectNumber’ },
{ name: ‘leadProjectNumber’ },
{ name: ‘status’ },
{ name: ‘checkinComments’ },
{ name: ‘remarks’ }
],

cache: false,
url: ‘getSecondGridForRevisionHistory.htm’
};
var secondGridAdapter = new $.jqx.dataAdapter(sourceSecondGrid);

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi,

I am referring to your Nested Grid sample code, which works when I test your sample code using xml data,

but in my case, I am using JSON data and am able to get the resultsets for both the  parent and the child  grids( found on debugging),  but only the parent grid data is displayed and nested grid is displayed blank( without grid),

It is not linking with the second URL(  url: ‘getSecondGridForRevisionHistory.htm’  ), thus displaying only the parent grid…

What should be the main criteria to link the child grid with the parent grid?

Should there be a common ID field in both the grids? please explain!!

$(document).ready(function () {
var theme = getDemoTheme();
var sourceFirstGrid =
{
datatype: “json”,
datafields: [
{ name: ‘leadProjectNumber’ },
{ name: ‘projectNumber’ },
{ name: ‘pdxType’ }

],
  id: ‘projectNumber’,
cache: false,
url: ‘getFirstGridForRevisionHistory.htm’
//     url:’getSummaryGridData.htm’
};

var firstGridAdapter = new $.jqx.dataAdapter(sourceFirstGrid);
var sourceSecondGrid =
{
datatype: “json”,
datafields: [
//  { name: ‘projectNumber’ },
{ name: ‘modifiedDate’ },
{ name: ‘modifiedBy’ },
{ name: ‘projectNumber’ },
{ name: ‘leadProjectNumber’ },
{ name: ‘status’ },
{ name: ‘checkinComments’ },
{ name: ‘remarks’ }
],

cache: false,
   url: ‘getSecondGridForRevisionHistory.htm’
};
var secondGridAdapter = new $.jqx.dataAdapter(sourceSecondGrid);

 

Thanks & Regards,

Sandhya S P

[sspParticipant]

Hi Peter,

Thanx for the reply and it helped!

Now, my requirement is to have four nested grids for a parent grid…
Do I have to use the following code with respect to every nested grid?

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);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]["EmployeeID"]);
if (result)
ordersbyid.push(orders[m]);
}

[sspParticipant]

Peter,

I upgraded the version to 2.9.2, but the condition hasn’t changed,
i.e I get timestamp values appending the date in IE9, whereas in GOOGLE CHROME only ‘MMM yyyy’ is displayed properly!!

[sspParticipant]

Hi Peter,

The jqWidgets version I am using currently is 2.7.0.
The same code which i posted earlier, when I test in GOOGLE CHROME, the date is being displayed in the required format which I want, without timestamp such as ‘Jul 2013’. But the same snippet is not working in IE9. So, I guess this is browser issue. I want the same format ‘Jul 2013’ to be displayed in IE9 as well.

[sspParticipant]

Hi Peter,
Thanks for the reply!
I am using the version ‘jquery-1.7.2.min.js’, and the browser which I am currently using is IE9.

The sample of my snippet goes as follows:

var milestone =
{
datatype: “json”,
datafields: [
{ name: ‘milestoneType’, type: ‘string’},
{ name: ‘phase’, type: ‘string’},
{ name: ‘phaseDescription’, type: ‘string’},
{ name: ‘customPhase’, type: ‘string’},
{ name: ‘startDate’, type: ‘date’},
{ name: ‘endDate’, type: ‘date’}

],
cache: false,
url: ‘milestoneJCI.htm’
};

var dataAdapter = new $.jqx.dataAdapter(milestone);
$(“#milestoneGridForJCI”).jqxGrid(
{
width : 900,
height : 227,
source : dataAdapter,
theme : theme,
editable : true,
showstatusbar : true,
statusbarheight : 00,
showaggregates : true,
selectionmode : ‘multiplecellsadvanced’,
columns : { text: ‘Start Date’, datafield: ‘startDate’, columntype: ‘datetimeinput’, width: 150, cellsalign: ‘center’, cellsformat: ‘MMM yyyy’,
validation: function (cell, value) {
var flag = dateValidation(cell,value,”Start Date”);
return flag;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxDateTimeInput(‘setDate’, new Date());

}

},]

[sspParticipant]

Hi,

If the width size of the grid cell is reduced, those timestamp wont be shown,

but I am supposed to truncate those timestamp values without changing the width size from 150!

How can it be done??

Thanks & Regards,

ssp

[Author]

Posts