Telerik RadTreeView et côté client Développer / Réduire

Question

je suis cette approche pour développer et réduire tous les nœuds client JavaScript: http://www.telerik.com/help/aspnet/treeview/tree_expand_client_side.html

Cependant, cela prend vraiment beaucoup de temps pour traiter cela, et après l'élargissement effondrement puis, je reçois l'erreur script « ne répond pas », donc je me demandais s'il y avait un moyen d'accélérer ce pour un arbre assez grand? Y at-il une meilleure façon de l'analyser? À l'heure actuelle, l'arbre est profond 4 niveaux.

Merci.

Answer 1

I got around the "script unresponsive" errors by expanding and collapsing the tree asynchronously. In addition, I expand from the bottom (so you can see the nodes expand) and collapse from the top, but only when it gets to the last node in each branch, so visually it's far more interesting to the user. They can actually see it happen, and if it's not fast (IE7 and before is particularly slow), it's at least entertaining while they wait.

var treeView, nodes;

function expandAllNodesAsynchronously() {
    if (<%= expandedLoaded.ToString().ToLower() %>) {
        treeView = $find("<%= tv.ClientID %>");
        nodes = treeView.get_allNodes();
        if (nodes.length > 1) {
            doTheWork(expandOneNode, nodes.length);
        }
        return false;
    } else
        return true;
}

function expandOneNode(whichNode) {
    var actualNode = nodes.length - whichNode;
    if (nodes[actualNode].get_nextNode() == null) {
        nodes[actualNode].get_parent().expand();
    }
}

function collapseAllNodesAsynchronously() {
    treeView = $find("<%= tv.ClientID %>");
    nodes = treeView.get_allNodes();
    if (nodes.length > 1) {
        doTheWork(collapseOneNode, nodes.length);
    }
}

function collapseOneNode(whichNode) {
    if (nodes[whichNode].get_nextNode() == null && nodes[whichNode].get_parent() != nodes[0]) {
        nodes[whichNode].get_parent().collapse();
    }
}

function doTheWork(operation, cycles) { //, callback
    var self = this, // in case you need it
        cyclesComplete = 1,
        batchSize = 10; // Larger batch sizes will be slightly quicker, but visually choppier

    var doOneBatch = function() {
        var c = 0;
        while(cyclesComplete < cycles) {
            operation(cyclesComplete);
            c++;
            if(c >= batchSize) {
                // may need to store interim results here
                break;
            }
            cyclesComplete++;
        }
        if (cyclesComplete < cycles) {
            setTimeout(doOneBatch, 1); // "1" is the length of the delay in milliseconds
        }
        else {
            // Not necessary to do anything when done
            //callback(); // maybe pass results here
        }
    };

    // kickoff
    doOneBatch();
    return null;
};

Answer 2

Start off getting your nodes with yourtreeViewInstance.get_nodes(), and then the child nodes as eachChildNode.get_nodes() and so on down the hierarchy.

Then you can expand each item by calling .set_expanded(true); on each node you want to expand.