jQuery UI Widgets Forums Navigation Tree Use addTo method to add items with children

Tagged: , ,

This topic contains 4 replies, has 3 voices, and was last updated by  Makla 10 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Use addTo method to add items with children #8015

    fabian
    Member

    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?

    Use addTo method to add items with children #8036

    Peter Stoev
    Keymaster

    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

    Use addTo method to add items with children #8047

    fabian
    Member

    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?

    Use addTo method to add items with children #8053

    fabian
    Member

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

    Makla
    Participant

    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]);

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

You must be logged in to reply to this topic.