jQuery UI Widgets Forums TreeGrid VirtualMode

This topic contains 14 replies, has 3 voices, and was last updated by  mskerbitz 7 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    VirtualMode Posts
  • VirtualMode #81484

    mskerbitz
    Participant

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

    VirtualMode #81500

    Hristo
    Participant

    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

    VirtualMode #81523

    mskerbitz
    Participant

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

    VirtualMode #81534

    mskerbitz
    Participant

    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.

    VirtualMode #81548

    Peter Stoev
    Keymaster

    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

    VirtualMode #81563

    mskerbitz
    Participant

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

    VirtualMode #81564

    mskerbitz
    Participant

    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.

    VirtualMode #81600

    Peter Stoev
    Keymaster

    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

    VirtualMode #81688

    mskerbitz
    Participant

    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.

    VirtualMode #81702

    Peter Stoev
    Keymaster

    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

    VirtualMode #81737

    mskerbitz
    Participant

    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.

    VirtualMode #81755

    Peter Stoev
    Keymaster

    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

    VirtualMode #81924

    mskerbitz
    Participant

    They are unique. SPCSpaceID is a primary key.

    VirtualMode #81925

    Peter Stoev
    Keymaster

    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

    VirtualMode #81989

    mskerbitz
    Participant

    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.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.