So this leads to a bunch of other questions and comments but this seems to be the right track:

To give you some background here's what's happening on this page.

An initial AJAX call is made via JQuery that retrieves the "hierarchy" where our Hiearchy looks like 

Country -> Region -> District -> Store

This call gets the hierarchy data and builds out the treeview. This works and with loadOnDemand as expected it only generates the country nodes initially.

 A second AJAX call is made that retrieves all the countries/regions/districts/stores that should be checked in the treeview for the event we're working with. (This is the basic premise of the page. Give the user an easy screen to schedule events nationally/regionally/district level/at a store)

When this second call completes and is successful, we iterate over the selected collection and apply the checks to the treeview.

On to the questions/comments

1)  I definitely see load on demand only loading the requested level. In my scenario the top level visible nodes are just three countries: US, Canada, and Mexico. When I click to drill down the nodes are created as expected.

2) How do I programatically set a checkbox to be tri-state partial checked? In my example, the US needs to be a tri-state partial check. The toggleCheckState documentation doesn't seem to indicate that this can be done. It appears to be toggle on/toggle off. So, if I'm initially only loading the countriy level, I need a way to be able to programatically set the checkbox to tri-state checked. If I can't it means I have to load the lower levels immediately and I'm back to my initial problem.

3) How do you programatically retrieve a branch of the hierarchy? Since I need to be able to bind the checkbox states when the "branch" of the tree is requested how do you do this? Is this a "nodeBy" method scenario?

4) I need to get the checkboxes that are checked upon submission of the form. Isn't this just delaying the need for load? Basically, wouldn't I have to do a full load of the tree upon submission to retrieve all of the checkboxes anyway?

Or is there a way to load the tree and bind the checkboxes in one step where even if they aren't rendered until loadOnDemand that the state internally is still checked, just the DOM node isn't created?

Thanks

Yes. I'm playing with things a bit more. I have an idea I'm going to run with and I'll report back.

Hi again,

I tried to reproduce the performance issue. I made the following sample:

<div id="tree3"></div>

var ul = $('<ul></ul>').appendTo($('#tree3')), markup = '';
    for (var i = 0; i < 3; i++) {
     markup += '<li>Node Text<ul>';
     for (var j = 0; j < 50; j++) {
      markup += '<li>Node Text<ul>';
      for (var k = 0; k < 51; k++) {
       markup += '<li>Node Text</li>';
      }
      markup += '</ul></li>';
     }
     markup += '</ul></li>';
    }
    ul.html(markup);
    $('#tree3').igTree({ checkboxMode: 'triState' });

The checkboxes did not show any performance slowdown for me. I check them and they instantly cascade down. I tested this against IE9/Firefox13/Chrome 19/Maxthon 3.4.1.

Maybe you're using a different browser, if that's the case let me know which one. This sample actually has 7650 nodes.

Thank you for your patience!

The issue is not with manually checking the checkboxes on the UI. That works fine.

It is with programatically setting the checked boxes on page load.

We load the tree into our page and a set of checkboxes need to be checked based on user selection.

This is an Edit page where on the create page prior the user selected a set of checkboxes in the tree so on Edit we are loading their selections.

US => Region => District => Store

A common example for us is we have the entire US node selected except a half dozen checkboxes all the way down at the storelevel of the tree. This means that the top node should be a partial check, the second level (of which there are usually 20 entries) should all be full checked except one, the third level should all be full checked except one, and the store level is all checked except the six stores in quesiton.

Your example would have to be extended to next get a set of the nodes in your tree and check them upon page load. Mind you this also involves two server calls as well, one to get the tree, and another to get the selected items.

Also, the target browser in this case is IE8. Not my choice unfortunately. The logic I currently have works well enough in Chrome and Firefox. There's still a lag of perhaps 1-2 seconds but it's nothing major. IE 8 however throws the dreaded long running script error twice before completing.

I'm trying to move as much processing as possible to the server as I know IE8 javascript engine is, to be nice, horrific.

I hope this gives you a better idea of what we're attempting to do.

Thanks

Hi again,

I guess I see exactly what the issue is. Let's try and trick the JS engine of the IE8. Do the following after the tree is rendered:

    var tree = $('#treeID').data('igTree');
    var checkbox = $('#treeID').find('span[data-role=checkbox]');
    var checkIcon = checkbox.children('span');
    checkbox.attr('data-chk', 'on');
    checkIcon.removeClass(tree.css.checkboxOff).addClass(tree.css.checkboxOn);

This would change all the checkboxes to being checked. Then call toggleCheckstate only on the nodes you need unchecked.

Let me know if this improves performance or we still at hitting the wall?

Thanks for the quick followup.

I'll give this a go later today and post back the results.

Hello CharGuilette,

Thank you for your reply.

Please feel free to contact us with any updates and additional questions.