Use addTo method to add items with children

[fabianMember]

I need to create a tree with all of the worldwide regions. Because of the amount of regions (>800) , I want to load only the root items and when expanded, I want to load the sub-items of that region via AJAX. I used the sample on http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/ajaxloading.htm and this works nice if I only want to add regions without any childregions. But when a region has childregions, the whole markup is messed up. It seems like the addTo method cannot add items with childitems, is that correct?

[Peter StoevKeymaster]

Hi fabian,

Thanks for the feedback.

The ‘addTo’ method adds a simple set of items. If you want to add additional items as children to the first set, you will need to call the method for any of the already added items. We’ll enhance that behavior in the future versions so you will be able to add a whole sub-tree as an item.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fabianMember]

Hi Peter,

Thanks for your reply. Somehow I can’t seem to get a reference to the newly added item. I modified the code in the demo, now it looks like this:

                        $('#jqxTree').bind('expand', function (event) {
                            var $element = $(event.args.element);
                            var loader = false;
                            var loaderItem = null;
                            var children = $element.find('li');
                            $.each(children, function () {
                                var item = $('#jqxTree').jqxTree('getItem', this);
                                if(item == null) {
                                    alert ('item is null');
                                    return false;
                                }
                                if (item.label == 'Loading...') {
                                    loaderItem = item;
                                    loader = true;
                                    return false
                                };
                            });
                            if (loader) {
                                $.ajax({
                                    url: loaderItem.value,
                                    success: function (data, status, xhr) {
                                        var items = jQuery.parseJSON(data);
                                        $.each(items, function() {
                                            var newItem = { label: this.label, value: this.value };
                                            newItem.expanded = false;
                                            
                                            $('#jqxTree').jqxTree('addTo', newItem, $element[0]);                                            
                                            
                                            var loadingItem = { label: "Loading..." };
                                            
                                            $('#jqxTree').jqxTree('addTo', loadingItem, newItem.element);
                                                                                        
                                        });
                                        
                                        $('#jqxTree').jqxTree('removeItem', loaderItem.element);
                                    }
                                });
                            }
                        }); 

A new item is added, but on the root level at the bottom of the tree. Can you please tell me what I’m doing wrong here?

[fabianMember]

I got this working using the following code:

                        $('#jqxTree').bind('expand', function (event) {
                            var $element = $(event.args.element);
                            var loader = false;
                            var loaderItem = null;
                            var children = $element.find('li');
                            $.each(children, function () {
                                
                                var item = $('#jqxTree').jqxTree('getItem', this);
                                if(item == null) {
                                    alert ('item is null');
                                    return false;
                                }
                                if (item.label == 'Loading...') {
                                    loaderItem = item;
                                    loader = true;
                                    return false
                                };
                            });
                            if (loader) {
                                $.ajax({
                                    url: loaderItem.value,
                                    success: function (data, status, xhr) {
                                        
                                        $('#jqxTree').jqxTree('removeItem', loaderItem.element);
                                        
                                        var items = jQuery.parseJSON(data);
                                        $.each(items, function() {
                                            var newItem = { label: this.label, value: this.value };
                                            newItem.expanded = false;
                                            
                                            $('#jqxTree').jqxTree('addTo', newItem, $element[0]);                                            
                                            
                                        });
                                                      
                                        $('> ul > li', $element[0]).each(function(i, obj) {
                                            var parentItem = $('#jqxTree').jqxTree('getItem', obj);
                                            var loadingItem = { label : 'Loading...', value: '/Regions/getSubItems/' + parentItem.value };
                                            $('#jqxTree').jqxTree('addTo', loadingItem, obj);
                                        });
                                    }
                                });
                            }
                        });   

[MaklaParticipant]

Has these feature been implemented.
I get:

Uncaught TypeError: Cannot set property ‘level’ of undefined jqx-all.js:7
a.extend._refreshMapping jqx-all.js:7
a.extend.addTo.e jqx-all.js:7
a.extend.addTo jqx-all.js:7
a.jqx.invoke jqx-all.js:7
a.jqx.jqxWidgetProxy jqx-all.js:7
a.jqx.jqxWidget.a.fn.(anonymous function) jqx-all.js:7
b.extend.each jquery-1.9.1.min.js:3
b.fn.b.each jquery-1.9.1.min.js:3
a.jqx.jqxWidget.a.fn.(anonymous function) jqx-all.js:7

when trying this:
ColumnsTreePluses.jqxTree(‘addTo’, {label: ‘Hi’, value: ‘v1’, items: [{label: “Loading…”, “test_value”]}, element[0]);

[Author]

Posts