'addTo' Doesn't Assign an ID

[tapickensMember]

Hello,

I’m trying to dynamically add items to a tree, and it seems that when you use the addTo function to add items to tree, no ID is assigned, meaning I can’t select the subitem by ID.

Here is an example:

            var tree = $('#jqxTree');
            var source = [
				{ label: "Root Folder 1", items: [{ label: 'Loading...'}] },
				{ label: "Root Folder 2", items: [{ label: 'Loading...'}] }
            ];
            tree.jqxTree({ theme: theme, width: 200 });
			
			var file = { 
				label: "Root Folder 1", items: [{ label: 'Loading...'}]
			};
			tree.jqxTree('addTo', file);
			var file = { 
				label: "Root Folder 2", items: [{ label: 'Loading...'}]
			};
			tree.jqxTree('addTo', file);

            tree.bind('expand', function (event) {
                if (tree.jqxTree('getItem', event.args.element).label == "Root")
                    return;
                var element = $(event.args.element);
                var loader = false;
                var loaderItem = null;
                var children = element.find('li');
                $.each(children, function () {
                    var item = tree.jqxTree('getItem', this);
                    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);
                            tree.jqxTree('addTo', items, element[0]);
                            tree.jqxTree('removeItem', loaderItem.element);
                        }
                    });
                }

When I do this and debug when expand is clicked, item is null on Root Folder 3 and 4, but not on Root Folder 1 and 2. After investigating more, it seems that the “Loading…” subelements under 3 and 4 don’t have ID’s, while Root Folder 1 and 2 do. Any idea why this is and if there is a way to work around it?

What I’m trying to do is load a folder structure. So at first, only the root folders will show, then when one is expanded, an AJAX request is sent which retrieves the direct subfolders of the selected folder, and so on.

[tapickensMember]

It also seems that using ‘getItems’ on a tree where items are added with ‘addTo’ only returns the last added element instead of an array of all of them.

[Peter StoevKeymaster]

Hi tapickens,

getItems returns all items displayed in jqxTree and yes, there’s no ID assigned to the new items which are loaded on demand. We’ll consider adding such functionality in future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[tapickensMember]

Thanks for the response,

What I’m saying is that if you use addTo, getItems does not return all items. It only returns the last item that was added. I’m trying to figure out how to remove items from the tree, which I can’t do if I’m unable to select them by the element (because they don’t have an ID), and I can’t select all items from the tree (which I can’t do because only the last item added is returned).

[tapickensMember]

Also, is it possible to do something similar to ‘beginupdate’ and ‘endupdate’ (like on the jqxgrid) for jqxTree? I’m adding 300+ items to the tree dynamically, and it is taking quite a long time. I imagine if the tree was only updated once at the end of adding all of them, it would be much faster.

[Peter StoevKeymaster]

Hi tapickens,

The addTo method allows you to add one or multiple items at the same time. However, these items shouldn’t have sub items. Sub items should be added with additional calls of the addTo method. You can select all elements in jqxTree by using jQuery’s find method and the selector is ‘li’. Adding beginUpdate, endUpdate is not in our plans. jqxTree items are represented by DOM elements and it should be used for scenarios where users want to provide tree-menu navigation with small amount of items. The widget does not have built-in UI virtualization for working with hundrends of items and we don’t have plans to add such in this widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts