Hello CharGuilette,

Thank you for your reply.

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

Thanks for the quick followup.

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

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?

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 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!