jqxGrid with large data(AJAX)

[sspParticipant]

Oh I am able to export the grid now!!
Thanks a lot!!

[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]

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

• This reply was modified 10 years, 2 months ago by  ssp.

[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

[robfParticipant]

Hi,

I am using the jquery version of jqxGrid. I use ajax to query a node backend which then queries a mongo db. That portion of the process takes anywhere from 100ms-10000ms. When the ajax callback is completed I load the jqxgrid, For ~6000 rows I did a performance check using chrome tools and it sometimes show almost 20-30seconds to finally finish the load and rendering. A VERY long time for only 6000 rows of data.

I see some of your demos where you load tens of thousands of record (generated locally) and with very little, if any, rendering.

I’m trying to understand how I could performance tune that 20-30 secs for final load of table.

What options might I try? I read about virtual mode but am not really sure of its purpose.

Any guidance on performance tuning this is a huge help. Let me know if you need anything else from me.
Thanks.
Rob

• This reply was modified 8 months ago by  robf.

[svetoslav_borislavovParticipant]

Hi,

The purpose of the virtualmode is to load the data on demand.
In the rendergridrows callback which accepts params, you should get the data and return it.
Can you please share your settings, so I can reproduce your problem?

Also here is our demo of the virutalmode:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/virtualdata.htm
http://jsfiddle.net/jqwidgets/j8JUh/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi,
Thanks for your reply. I created an updated fiddle based on your. http://jsfiddle.net/rfossella/grL894jz/53/

I added several render method for columns and I set the data amount to 10,000.

Note: I set pageable to false. When I load the data (with or without renderers) it takes about 8-10 seconds to load. This is the type of performance I am seeing, but worse for larger datasets. Do you have another example of loading larger dataset without paging or am I forced to use paging?

Also, not sure why sort does not work.

Thanks for you help!
Rob

[ivanpeevskiParticipant]

Hi Rob,

If you don’t wish to use paging, another alternative is to set autoheight: false and height:400(or any other number). When the height of the Grid is fixed, you can scroll through the rows with a scrollbar and the Grid will load only the visible rows, this should drastically increase the performance.

When the Grid is in virtualmode, sorting and filtering should be implemented as additional functions in the dataAdapter, since the idea of the virtual mode is that the Grid only loads data on demand and doesn’t have access to the entire dataset and therefore doesn’t know which rows should come first.
We have guide on how to achieve this here:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-paging-and-sorting.htm?search=

Best regards,
Ivan Peevski

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi Ivan
That was very helpful. Thanks for your assistance!
Rob

[Author]

Posts