Kendo Treeview Espansione del grande albero problema

Question

Ho creato un controllo albero utilizzando kendo TreeView.it ha più di 10.000 nodi e ho usato loadOnDemand false durante la creazione di Tree. Sto fornendo una funzionalità per espandere l'albero per il suo livello, per questo ho creato un metodo che prende il parametro "livello" come numero ed espanderlo di conseguenza e l'utente può inserire 15 (livello massimo) nel metodo, funziona bene con da 500 a 600 nodi per tutti i livelli, ma quando l'albero ha più di 5000 nodi rispetto a se l'utente sta tentando di espandersi oltre i nodi di 2 ° livello, il browser si blocca e mostra errori di risposta.

metodo che ho creato per espandere la struttura è: -

function ExapandByLevel(level, currentLevel) { 
    if (!currentLevel) { 
    currentLevel = 0; 
    } 
    if (level != currentLevel) { 
    var collapsedItems = $("#treeView").find(".k-plus:visible"); 
    if (collapsedItems.length > 0) { 
     setTimeout(function() { 
      currentLevel++; 

      var $tree = $("#treeView"); 
      var treeView = $tree.data("kendoTreeView"); 

      var collapsedItemsLength = collapsedItems.length; 
      for (var i = 0; i < collapsedItemsLength; i++) { 
       treeView.expand($(collapsedItems[i]).closest(".k-item")); 
      } 
      ExapandByLevel(level, currentLevel); 
     }, 100); 
    } 
    else { 
     //console.timeEnd("ExapandByLevel"); 
     hideLoading(); 
    } 
    } 
    if (level == currentLevel) { 

    hideLoading(); 
    } 
} 

chiamata metodo sopra dato risultati simili: -

ExapandByLevel(15); 

qui 15 è il livello di espandersi in albero.

quando l'albero ha più di 5000 nodi rispetto a se l'utente sta tentando di espandersi sopra i nodi di 2 ° livello, quindi il browser si blocca e mostra errori di risposta. per favore suggerisci un modo per farlo, quello che voglio è espandere l'albero che può contenere più di 5000 nodi.

Answer 1

Ho avuto un problema simile con TreeView di kendo, quando volevo caricare un albero con 30.000 nodi. Il browser si bloccava a lungo per caricare questo numero di nodi anche se loadOnDemand era impostato su true.

Così abbiamo deciso di implementare la funzionalità lato server per espandere i nodi, ed è quello che dovresti fare. Devi avere 2 modifiche nel codice esistente.

1. Cambia il tuo albero usa lato server Espandi metodo.
2. Quando si chiama expand, è necessario assicurarsi che il nodo sia espanso.

Queste due fasi verranno illustrate di seguito. La cosa che dovresti sapere è che in questo modo il tuo browser non si blocca affatto, ma potrebbe volerci del tempo per completare l'operazione, perché ci saranno così tante chiamate al server sul webservice.

1. Cambia il vostro albero di utilizzare lato server metodo Espandi:
   Si prega di vedere la demo di Kendo UI per Binding per Remote Data in this link. Si noti che loadOnDemand deve essere impostato su true. Inoltre, è necessario implementare anche il servizio Web Espandi lato server.

2. Quando si chiama espande, è necessario assicurarsi che il nodo si espande:
   Per fare questo, ci dovrebbe essere un evento come Expanded definito nel Kendo UI TreeView, ma purtroppo non c'è nessuno, tranne Expanding evento. L'utilizzo di setTimeout in questo caso non è affidabile, in quanto la rete non è affidabile. Quindi abbiamo finito per usare una dichiarazione while per verificare che i figli del nodo siano creati o meno. Potrebbe esserci una soluzione migliore per questo, tuttavia questo soddisfa il nostro attuale requisito.Ecco il cambiamento si dovrebbe fare in caso di ampliamento nodi:

   if (collapsedItems.length > 0) { 
       currentLevel++; 
   
       var $tree = $("#treeView"); 
       var treeView = $tree.data("kendoTreeView"); 
   
       var collapsedItemsLength = collapsedItems.length; 
       for (var i = 0; i < collapsedItemsLength; i++) { 
        var node = $(collapsedItems[i]).closest(".k-item") 
        if (!node.hasChildren) 
         continue; // do not expand if the node does not have children 
        treeView.expand(node); 
        // wait until the node is expanded 
        while (!node.Children || node.Children.length == 0); 
       } 
       ExapandByLevel(level, currentLevel); 
   } 
   

È inoltre possibile effettuare le chiamate espandere in modo parallelo al fine di diminuire i tempi di caricamento, ma allora si dovrebbe cambiare il modo di controllare se tutto i nodi sono espansi o meno. Ho appena scritto un codice di esempio che dovrebbe funzionare correttamente.

Spero che questo aiuti.

Answer 2

La soluzione al tuo problema è piuttosto semplice: aggiorna la versione dell'interfaccia utente di Kendo che utilizzi poiché hanno ottimizzato (uno loooooooooot) il codice per HierarchicalDataSource e per TreeView.

Controllare questo: http://jsfiddle.net/OnaBai/GHdwR/135/

Questo è il tuo codice in cui ho cambiare la versione di kendoui.all.min.js a v2014.1.318. Non ho nemmeno cambiato il CSS (nonostante tu debba). Vedrai che l'apertura di quei 5000 nodi è abbastanza veloce.

Tuttavia, se si passa a 10000 elementi molto probabilmente lo si considera lento, ma ci scusiamo per sfidarlo: pensi davvero che l'albero di 10000 nodi sia facile da usare? Un albero è il modo corretto di presentare una quantità così grande di dati?