VirtualMode

[mskerbitzParticipant]

I was able to successfully create a tree to work with the following data structure but realized I needed a treeGrid because of the number of rows. When the treegrid loads it is super slow and rather than just returning the root level of data first (using virtual mode) it returns all of the data.

Data:
SPCSpaceID SpaceText ParentSPCSpaceID
8095 Test Space 5
8096 Test Complex 8095
8097 Test Dorm1 8096
8098 Test Room1 8097
8099 Test Room2 8097
8103 Test Dorm2 8096
8104 Test Wing1 8103
8106 Test Room7 8104
8107 Test Room8 8104

Code

var source =
{
dataType: “json”,
async: false,
dataFields: [
{ name: ‘SPCSpaceID’, type: ‘number’ },
{ name: ‘ParentSPCSpaceID’, type: ‘number’ },
{ name: ‘SpaceText’, type: ‘string’ },
],
heirarchy:
{
keyDataField: { name: ‘SPCSpaceID’ },
parentDataField: { name: ‘ParentSPCSpaceID’ }
},
id: ‘SPCSpaceID’,
root: ‘value’,
url: ‘/project/Search/GetSpace’
};

$(“#treeGrid”).jqxTreeGrid(
{
width: 200,
virtualModeCreateRecords: function (expandedRecord, done) {

var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
if (expandedRecord == null) {
data.$filter = “(ParentSPCSpaceID eq null)”
}
else {
data.$filter = “(ParentSPCSpaceID eq ” + expandedRecord.SPCSpaceID + “)”
}
return data;
},
loadComplete: function()
{
done(dataAdapter.records);
}
,
loadError: function (xhr, status, error) {
done(false);
alert(“error”);
}
});

dataAdapter.dataBind();
},
virtualModeRecordCreating: function (record) {
// record is creating.
},
columns: [
{ text: ‘SpaceText’, dataField: ‘SpaceText’},
]
});
};

[HristoParticipant]

Hello mskerbitz,

You could load many items in TreeGrid, but need to set pageable: true, property. This approach will boost the speed, could you try that.
If you need to create the Tree Grid elements on demand than use virtual mode.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mskerbitzParticipant]

I am using virtual mode. The tree loads all of the data at the root level ignoring the hierarchy.

[mskerbitzParticipant]

I’m not sure how paging would help as the root level only has 11 items and the most any level would have would be about 20. Can anyone be of further assistance? As you can see in my posting I am using virtual mode but when I run this all of the records show at the top level even though they should be subitems as designated by their ParentSpaceID. The ParentSpaceId value for the top level is null in the db.

[Peter StoevKeymaster]

Hi mskerbitz,

As my colleague suggested, pageable: true should be set if you want to load multiple records in the TreeGrid. I don’t see a reason to use virtual mode in your case, but if you wish to use virtual mode, we have two online demos from which you can learn how to use the feature. In terms of performance, paging should be enabled in any case when you want to load a large data set in jqxTreeGrid. This is also shown in the demos. For example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-virtual-mode.htm?arctic, with 10 000+ records.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mskerbitzParticipant]

Thanks Peter but pagaeable gained me nothing-the behavior is still the same. I want to use virtual mode because there are 7500 records total and I only want to load a subitem when the parent item is expanded. I tried with the code in both of the virtual mode demos and both load ALL of the records at the root level and lock up the page. Following is my code….

var source =
{
dataType: “json”,
dataFields: [
{ name: ‘SPCSpaceID’, type: ‘number’ },
{ name: ‘ParentSPCSpaceID’, type: ‘number’ },
{ name: ‘SpaceText’, type: ‘string’ },
],
heirarchy:
{
keyDataField: { name: ‘SPCSpaceID’ },
parentDataField: { name: ‘ParentSPCSpaceID’ }
},
id: ‘SPCSpaceID’,
pageable: true,
root: ‘value’,
url: ‘/project/Search/GetSpace’
};

$(“#treeGrid”).jqxTreeGrid(
{
width: 200,
virtualModeCreateRecords: function (expandedRecord, done) {

var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
if (expandedRecord == null) {
data.$filter = “(ParentSPCSpaceID eq null)”
}
else {
data.$filter = “(ParentSPCSpaceID eq ” + expandedRecord.SPCSpaceID + “)”
}
return data;
},
loadComplete: function()
{
done(dataAdapter.records);
},
loadError: function (xhr, status, error) {
done(false);

}
});
dataAdapter.dataBind();
},
virtualModeRecordCreating: function (record) {
},
columns: [
{ text: ‘SpaceText’, dataField: ‘SpaceText’},
]
});
};

[mskerbitzParticipant]

Could it be something with the structure of the data? As I stated before this same data structure worked with a regular tree widget it was just too slow because of the number of records.

[Peter StoevKeymaster]

Hi mskerbitz,

pagaeable should be used when you load such amount of data. You complain about performance, the performance in our demos with more records is perfect when pageable is set to true. The reason is simple – jqxTreeGrid creates HTML Elements for the records visible on the current page, otherwise, it will have to create HTML Elements for all records which in case of thousands will be thousands HTML Elements which of course will slow down your web page and that is something normal. No, it is not related to your data when paging is turned on. If you wish, provide jqwidgets/jseditor example and we will tell you what is wrong there.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mskerbitzParticipant]

I provided my example above and pageable didn’t make any difference. My bigger problem is that it loads all records as root elements. So instead of loading only the root records (of which there are only 11) and then loading the next level on expanding that it loads all 7500 records on the current page as root records.

[Peter StoevKeymaster]

Hi mskerbitz,

It would be good if you looked at our demos and documentation about TreeGrid. pageable is a property of jqxTreeGrid, not a property of the dataAdapter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mskerbitzParticipant]

Thank you Peter, I moved the pageable to the tree grid and it is loading quickly but I’m still not seeing the expected behavior. It loads the root level and when I click on the expand arrow I get an error– “check whether you add records with unique id/key”. If I click on the next page arrow it shows all children for all elements of the root level. The behavior I’m looking for is when the expand is clicked at the root level it shows the children for only that root element which is the behavior I see on your grids but doesn’t seem to be working for me.

[Peter StoevKeymaster]

Hi mskerbitz,

Records should be with unique id/key. If they are not, then you should check your data binding code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mskerbitzParticipant]

They are unique. SPCSpaceID is a primary key.

[Peter StoevKeymaster]

Hi mskerbitz,

The error is raised on purpose by the TreeGrid when someone tries to add records with the same ID so I suggest you to check your binding code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mskerbitzParticipant]

I don’t think there is anything wrong with the data-I can use this exact data in your tree widget and it works fine. It looks like the problem is still as I stated earlier although I didn’t notice at first because I have to scroll down and that is that it’s loading ALL records at the root level. So, of course, when you try to expand it doesn’t see the child record as unique since it is already loaded.

[Author]

Posts