So finden Sie einen verschachtelten Knoten in einer Kendo-Baumansicht, in der Daten über eine Web-API 'lazely' geliefert werden

Question

Ich kenne die genaue Route, um einen verschachtelten Knoten in einer Kendo-Baumansicht zu finden. Daher möchte ich alle Knoten entlang dieser Route erweitern, um dorthin zu gelangen. Ich weiß, wie man einen Knoten findet und Kendo diesen Knoten erweitern lässt.

Mein Treeview verwendet eine Web-API für seine Daten und alles funktioniert gut. Das Schema ist wie folgt definiert:

  schema: { 
       model: { 
        id: "CodeList", 
        hasChildren: "HasKids" 
       } 
      } 

Was ich erreichen will, ist der Baum automatisch zu einer verschachtelten Ebene zu erweitern. Angenommen, ich weiß, dass der Pfad zu einem Knoten 'Level1CodeA | Level2CodeA | Level3CodeA' ist, also möchte ich zuerst den Code 'Level1CodeA' finden, den ich ausführen kann.
Ich möchte dann diesen Knoten erweitern (intern ruft er die Daten unter diesem Knoten und es erweitert ok), nach dem ich "Level2CodeA" finden möchte, wiederholen Sie den Vorgang, so auch finden und wählen Sie Level3CodeA.

Wie würde ich darüber gehen? Ich suchte nach einem "AfterExpanded" -Ereignis, das ich verwenden könnte, um den nächsten Such- und Erweiterungsvorgang zu starten, aber ich kann kein Ereignis finden, das ich verwenden kann. Ich versuchte das 'ändern' Ereignis auf meiner Datenquelle, aber das wird viele Male gefeuert und ich kann nicht scheinen, um es auf den richtigen Artikel einzugrenzen.

Vielen Dank.

EDIT: mehr Code

<script id="treeII-template" type="text/kendo-ui-template"> 
    <img id="explorerItemImg" src="#: item.Image #" /> 
    <span id="explorerItemCode">#: item.Code #</span> - 
    <span id="explorerItemFullName">#: item.FullName #</span> 
    # if (item.Level < (item.Levels - 1)) { # 
     [<span id="explorerItemLCount">#: item.LCount #</span>] 
    # } # 
    # if (item.HasKids) { # 
     [<span id="explorerItemPCount">#: item.PCount #</span>] 
    # } # 

</script> 

Der Code der HierarchicalDataSource und Zuordnung dieser zur Baum-Ansicht zu erstellen:

// ----------------- 
    // set the datasource for the bottom explorer... 
    // ----------------- 
    var loadDataForExplorerGroup = function (context, groupid, groupsequence) { 

     // hang on to this context/groupid 
     sessionStorage.setItem(context + "_explorer_groupId", groupid); 
     sessionStorage.setItem(context + "_explorer_groupSequence", groupsequence); 

     // define the datasource and attach it to the explorer-tree 
     explorerGroupData = new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: { 
        url: "/api/explorerapi/GetExplorerData?", 
        data: { 
         context: "portfolio", 
         groupid: groupid, 
         groupsequence: groupsequence, 
         userid: sessionStorage.getItem("symUserID") 
        } 
       } 
      }, 
      schema: { 
       model: { 
        id: "CodeList", 
        hasChildren: "HasKids" 
       } 
      } 
     }); 

     // simply assign the data source again to the tree 
     $("#idExplBottomTree").data("kendoTreeView").setDataSource(explorerGroupData); 

    }; 

Answer 1

Das AfterExpanded Ereignis könnte dataBound sein. Was würde ich vorschlagen, wird die folgende TreeView Definition gegeben:

var tree = $("#treeview").kendoTreeView({ 
    dataSource : data, 
    dataTextField: "text", 
    dataBound : function (e) { 
     treeNavigateNext(); 
    } 
}).data("kendoTreeView"); 

I dataBound Handler hinzugefügt haben, die treeNavigate definiert ruft:

function treeNavigateNext() { 
    if (search.length > 0) { 
     var first = tree.findByText(search[0]); 
     if (first) { 
      search.shift(); 
      tree.expand(first); 
     } 
    } 
} 

Wo search ein Array dataTextField jedes Knotens enthalten ist, die wir wollen navigieren.

Beispiel:

search = []; 
search.push("t_3"); 
search.push("t_32"); 
search.push("t_321"); 
search.push("t_3214"); 

Legt fest, dass wir expand einen Knoten gesichert werden sollen, den Text t_3 ist, dann t_32, neben t_321 und schließlich t_3214.

So treeNavigateNext überprüft, dass es noch nicht abgeschlossen ist etwas (search.length > 0) und wenn ja, durch seine das Element finden text (var first = tree.findByText(search[0]);), entfernt das Element aus search (search.shift();) und schließlich expand der Knoten (tree.expand(first)). Dies bewirkt, dass die nächste Ebene geladen wird, und wenn das Ereignis dataBound ausgelöst wird, gehe ich zur nächsten Ebene.

anzeigen läuft here

EDIT: Wenn anstelle von Text zu suchen, das Sie bevorzugen von id dann in den search Array die id der verschiedenen Knoten und verwenden Sie die folgende treeNavigateNext Funktion stattdessen navigieren:

function treeNavigateNext() { 
    if (search.length > 0) { 
     var first = tree.dataSource.get(search[0]); 
     if (first) { 
      search.shift(); 
      var elem = tree.findByUid(first.uid); 
      tree.expand(elem); 
     } 
    } 
} 

New laufenden Beispiel here