I have a standard edit page in my application that has in it an igTree.
This tree has a total of 1500 nodes and on load I need to change the checkstate to checked all of the checkboxes that meet a certain criteria that is returned from a dataset loaded via an ajax call.
What I'm currently doing is finding the nodes that need to be checked against the entire collection. This works fine and work as expected.
Where I'm having a problem is the actual performance of checking the checkboxes. I'm hoping there's a better way of doing this. Currently I'm iterating over the collection of nodes that need to be checked and telling igTree to check them.
var t1 = new Date();
var theTree = $("#tree");
for (var i = 0; i < allMatchedNodes.length; i++) {
theTree.igTree("toggleCheckstate", allMatchedNodes[i].element);
}
var t2 = new Date();
var dif = t1.getTime() - t2.getTime();
var Seconds_from_T1_to_T2 = dif / 1000;
var Seconds_Between_Dates = Math.abs(Seconds_from_T1_to_T2);
In the example above, allMatchedNodes has a total of 36 entries and they typically have a child collection which may have another child collection (3 levels).
The problem is this takes a dreadfully long time to complete under IE8, so long in fact that you get the long running script error multiple times.
In the test cases I've run so far, the above reports 65 seconds as the running time. Am I doing something wrong attempting to check the checkboxes in this fashion?Can I remove the child collection from each top level node?
Will igTree be intelligent enough to check all children for me or does it need the children collection to check them? I'm guessing the internal toggleCheckState call is recursively iterating through the children which in this case there are up to three more levels to go through.
Your help is appreciated.
Thank You
Hi there,
First of all the igTree has a checkstate that would recursively check nodes (triState) and one that keeps the checked nodes independent of each other (biState). If your issue is with the triState, meaning the recursion for the checking takes too long, then you can enable loadOnDemand. In the case of all of your data being already loaded and enabling loadOnDemand, you would actually utilize render on demand, meaning DOM elements would be created upon a node being expanded. The nodes would be rendered checked in the case of a triState checkbox mode and a checked parent. Try this out and let me know how it works!
If you have additional questions feel free to ask!
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