jQWidgets Forums

Tagged: getRecordsHierarchy ajaxloading

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 4 months ago.

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

Author

getRecordsHierarchy and ajaxloading Posts
January 4, 2015 at 1:03 pm getRecordsHierarchy and ajaxloading #64926

Peter Sloth
Participant

Hi

I am adopting the sample code using the getRecordsHierarchy method to populate the tree. But only to the first level of the hierarchy.
When expanding an item I would like to do a ajax callback which should populate the json data with the data needed for the children.
In the ajaxloading demo example the items loaded are added directly to the tree (addTo). Since my data contains a lot more data than just the label and icon for the tree items, I would rather use the getRecordsHierarchy approach all the way through. Is that possible?

thanks

Peter Sloth

January 4, 2015 at 2:58 pm getRecordsHierarchy and ajaxloading #64929

Peter Stoev
Keymaster

Hi Peter Sloth,

By using getRecordsHierarchy approach, the Tree is expected to load all data at once, not on demand. As far as I understand, you would like to load large amount of data, so I would suggest to use the newer TreeGrid widget instead. The Tree is more appropriate for simpler SEO friendly web pages.

Best regards,
Peter Stoev

January 5, 2015 at 1:01 pm getRecordsHierarchy and ajaxloading #64966
Peter Sloth
Participant
Hi Peter Stoev

Okay, thanks.
However, I have found another (and better) approach. The fact is that the tree widget should display node items for a given module. Each module would have about 50 items and there are 20 modules in total. So instead of having the tree widget showing all modules at the same time, I now have a dropdownlist with all the modules. When selecting a module, the tree should show all node items for this module.

My problem is: how do I refresh the dataadapter+tree widget when a new module is selected from the dropdownlist?

Thanks

Best regards
Peter
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>

            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = "";

                    // Dropdown
                    var dropdowndata = '[ {"ModuleName": "Module 1", "ModuleUrl": "url1.txt"}, {"ModuleName": "Module 2", "ModuleUrl": "url2.txt"}]';
                    var dropdownsource =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'ModuleName' },
                            { name: 'ModuleUrl' }
                        ],
                        localdata: dropdowndata
                    };
                    var dropdowndataAdapter = new $.jqx.dataAdapter(dropdownsource);
                    
                    $("#dropdown").jqxDropDownList({
                        selectedIndex: 0, source: dropdowndataAdapter, displayMember: "ModuleName", valueMember: "ModuleUrl", width: 200, height: 25, theme: theme
                    });

                    $('#dropdown').on('select', function (event) {
                        var args = event.args;
                        var item = $('#dropdown').jqxDropDownList('getItem', args.index);
                        if (item != null) {
                            source.url = item.value;
                            // Here I would like the tree widget to redraw using the source.url as data source
                        }
                    });

                    // Tree
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' },
                            { name: 'permission' },
                            { name: 'icon' }
                        ],
                        id: 'id',
                        //localdata: data
                        url: "url1.txt"
                    };

                    // create data adapter.
                    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                    // perform Data Binding.
                    dataAdapter.dataBind();
                    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                    // specifies the mapping between the 'text' and 'label' fields.  
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label', icon: 'icon' }]);
                    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });

                });
        </script>
</head>
<body>
    <div id='content'>

            <div style='margin-top: 20px' id='dropdown'></div>
            <br/>
            <div id='jqxWidget'>
            </div>
    </div>
</body>
</html>
```
url1.txt:
[
{
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”,
“value”: “$2.3”,
“permission”: “1”,
“icon”: “../../images/mailIcon.png”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage – MODULE 1”,
“id”: “1”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”,
“value”: “$2.3”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”,
“value”: “$2.3”
}]

url2.txt:

[
{
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate222”,
“value”: “$2.3”,
“permission”: “1”,
“icon”: “../../images/mailIcon.png”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage – MODULE 2”,
“id”: “1”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”,
“value”: “$2.3”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”,
“value”: “$2.3”
}]
January 5, 2015 at 3:38 pm getRecordsHierarchy and ajaxloading #64977

Peter Stoev
Keymaster

Hi Peter Sloth,

To refresh a Tree’s source, you have to set its “source” property again. To rebind a data adapter, call its “dataBind” method again so it will perform new Ajax call. Then call getRecordsHierarchy with the new records and set the Tree’s source.

Best regards,
Peter Stoev
Author

Posts

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

You must be logged in to reply to this topic.