एक केंडो ट्री व्यू में नेस्टेड नोड कैसे खोजें, जहां वेब 'एपीआई

Question

के माध्यम से डेटा' आलसी 'परोसा जाता है, मुझे एक केंडो ट्री व्यू में नेस्टेड नोड खोजने के लिए सही मार्ग पता है। तो मैं इस मार्ग के साथ जाने और वहां पहुंचने के लिए सभी नोड्स का विस्तार करना चाहता हूं। मुझे पता है कि नोड कैसे ढूंढें और केंडो को उस नोड का विस्तार करें।

मेरा ट्रीव्यूव अपने डेटा के लिए एक वेब-एपीआई का उपयोग करता है और सभी अच्छी तरह से काम करता है। स्कीमा को निम्नानुसार परिभाषित किया गया है:

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

जो मैं प्राप्त करना चाहता हूं वह पेड़ के लिए स्वचालित रूप से घोंसला वाले स्तर तक फैलाना है। कहें कि मुझे पता है कि नोड तक पहुंचने का मार्ग 'लेवल 1 कोडए | लेवल2Codeए | लेवल 3 कोड' है, इसलिए सबसे पहले मैं 'लेवल 1 कोड' कोड ढूंढना चाहता हूं जो मैं कर सकता हूं।
मैं फिर इस नोड का विस्तार करना चाहता हूं (आंतरिक रूप से यह इस नोड के नीचे डेटा को पुनर्प्राप्त करता है और यह ठीक फैलता है) जिसके बाद मैं 'लेवल2Codeए' ढूंढना चाहता हूं, प्रक्रिया को दोहराएं ताकि ढूंढें और फिर Level3CodeA का चयन करें।

मैं इसके बारे में कैसे जाऊं? मैं एक 'आफ्टर एक्सपेन्डेड' घटना की तलाश में था जिसे मैं अगली खोज शुरू करने और ऑपरेशन का विस्तार करने के लिए उपयोग कर सकता था लेकिन मुझे कोई भी ईवेंट नहीं मिल रहा है जिसका मैं उपयोग कर सकता हूं। मैंने अपने डेटासोर्स पर 'चेंज' इवेंट की कोशिश की लेकिन इसे कई बार निकाल दिया गया है और मैं इसे सही आइटम पर सीमित नहीं कर सकता ..

बहुत धन्यवाद।

संपादित करें: अधिक कोड

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

कोड HierarchicalDataSource बना सकते हैं और treeview को यह बताए करने के लिए:

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

AfterExpanded कि घटना dataBound हो सकता है।

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

मैं dataBound हैंडलर कि treeNavigate invokes जोड़ दिया है के रूप में परिभाषित:

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

कहाँ search प्रत्येक नोड है कि हम चाहते हैं की dataTextField युक्त एक सरणी है क्या मेरा प्रस्ताव हैं निम्नलिखित TreeView परिभाषा दी गई है नेविगेट करने के लिए।

उदाहरण:

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

को परिभाषित करता है कि हम expand एक नोड जो पाठ t_3, तो t_32, अगले t_321 और अंत में t_3214 है चाहता हूँ।

तो treeNavigateNext चेकों अभी भी कुछ लंबित (search.length > 0) और यदि ऐसा है कि वहाँ, अपने text (var first = tree.findByText(search[0]);) द्वारा तत्व मिल जाए, search (search.shift();) और अंत में expand से तत्व को हटा नोड (tree.expand(first))। इससे अगले स्तर को लोड किया जा सकता है और जब dataBound ईवेंट प्राप्त होता है तो मैं ट्रिगर होता हूं और मैं अगले स्तर पर जाऊंगा।

इसे चलाने देखें here

संपादित करें: बजाय पाठ से खोज आप id से नेविगेट करने के लिए पसंद करते हैं, तो search सरणी अलग नोड्स के id को जोड़ सकते हैं और निम्नलिखित treeNavigateNext बजाय समारोह का उपयोग करें:

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); 
     } 
    } 
} 

नया चल रहा उदाहरण here