[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);
                                        });
                                    }
                                });
                            }
                        });   

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

[Author]

Posts