Кендо Treeview Expand Node

Question

У меня есть этот TreeView может которым иметь переменное число детей (некоторые узлы могут иметь до 3-х поколений детей, некоторые из них могут иметь только один и т.д.)

То, что я пытаюсь сделать, это развернуть определенный узел при загрузке дерева. И у меня есть 2 проблемы: 1) Я не могу найти событие/обратный вызов, так что я знаю, когда TreeView готов 2) расширить функции не всегда работает (я объясню)

Это мое дерево:

function InitializeTreeview() { 

var Children_Merchants = { 
    transport: { 
     read: { 
      url: function (options) { 
       return kendo.format(websiteRootUrl + '/Merchants/Merchants/?hasParents={0}', hasParent); 
      } 
     } 
    }, 
    schema: { 
     model: { 
      model: { 
      id: "ID", 
      hasChildren: true, 
      children: Children_Merchants 
     } 
     } 
    } 
}; 

var Brandowners = new kendo.data.HierarchicalDataSource({ 
    transport: { 
     read: { 
      url: kendo.format(websiteRootUrl + '/Merchants/GetBrandowners?databaseID={0}',  selectedDatabaseID) 
     } 
    }, 
    //change: ExpandNode, - if I call expand node like this, it works. 
    schema: { 
     model: { 
      id: "ID", 
      hasChildren: true, 
      children: Children_Merchants 
     } 
    } 
}); 


$('#treeview').kendoTreeView({ 
    dataSource: Brandowners, 
    animation: { 
     collapse: { 
      duration: 200, 
      effects: "fadeOut" 
     }, 
     expand: { 
      duration: 200, 
      effects: "fadeIn" 
     } 

    }, 
    dataTextField: "Name", 
    complete: function() { alert('ok'); }, 
    //dataBound : ExpandNode, 
    select: OnSelect, 
    expand: CheckIfHasParent 
}).data('kendoTreeView'); 
} 

function ExpandNode() { 
    var treeview; 
    treeview = $("#treeview").data("kendoTreeView"); 
    var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter 
    treeview.expand(nodeToExpand); 
} 

Данная работа работает нормально, мои контроллеры вызываются, все в порядке. Так что я попытался подключить функцию ExpandNode одним нажатием кнопки. Функция вызывается, но ничего не происходит. НО, если я подключу его к событию изменения родительского источника данных, он работает. Еще одна интересная вещь: выбор работает так, если я заменю treeview.expand (...) на treeview.select (...), он работает на клике.

Так что мои вопросы:

1) Какое событие следует использовать для loadEnd (или то вроде этого) - так что я не должен связать функцию кнопки мыши (она по-прежнему хорошо, но я preffer на груз закончился) - PS Я пробовал все, что я нашел на форумах кендо, например: change, requestEnd, success, dataBound, и они не работают. Я попытался отправить JSON с «расширенным» свойством в TRUE для рассматриваемого узла, но это только изменяет стрелку, чтобы показать, как она открыта, но она не вызывает контроллер и не загружает детей.

2) Знаете ли вы, почему ExpandNode работает только при привязке к событию изменения? - самый важный вопрос для меня.

3) Если у вас есть предложения или я сделал что-то неправильно в инициализации древовидной структуры, скажите, пожалуйста.

Answer 1

Я скопировал свой код с некоторыми свободных интерпретаций и ответить на ваши вопросы есть:

1. Какое событие следует использовать для loadEnd => DataBound
2. Вы знаете, почему ExpandNode работы только при привязке к событию изменения? => Нет, он работает без привязки к change событиям. Если это не так, в вашем коде есть что-то еще.
3. Предложения => Существует некоторая информация о вашем коде, которая может повлиять на то, что я реализовал.
4. Что такое CheckIfHasParent? => Я реализовал его как функцию, которая на самом деле ничего не делает.
5. Что такое hasParent? => Я проигнорировал это.

код, как я пишу это:

$ (документ) .ready (функция() { функция InitializeTreeview() { вар Children_Merchants = { транспорт: { чтения: функция (ор) { var id = op.data.Я БЫ; var data = []; для (var i = 0; i < 10; i ++) { var aux = id * 100 + i; data.push ({Name: "Name-" + aux, ID: aux}); } op.success (данные); }} , схемы: { модель: { модель: { ID: "ID", HasChildren: правда, дети: Children_Merchants }} } };

 var Brandowners = new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: function (op) { 
        op.success([ 
         {"Name": "Adam", "ID": 1}, 
         {"Name": "Benjamin", "ID": 2}, 
         {"Name": "Caleb", "ID": 3}, 
         {"Name": "Daniel", "ID": 4}, 
         {"Name": "Ephraim", "ID": 5}, 
         {"Name": "Frank", "ID": 6}, 
         {"Name": "Gideon", "ID": 7} 
        ]) 
       } 
      }, 
      //change: ExpandNode, - if I call expand node like this, it works. 
      schema : { 
       model: { 
        id   : "ID", 
        hasChildren: true, 
        children : Children_Merchants 
       } 
      } 
     }); 

     $('#treeview').kendoTreeView({ 
      dataSource : Brandowners, 
      animation : { 
       collapse: { 
        duration: 200, 
        effects : "fadeOut" 
       }, 
       expand : { 
        duration: 200, 
        effects : "fadeIn" 
       } 

      }, 
      dataTextField: "Name", 
      dataBound : ExpandNode, 
      expand  : CheckIfHasParent 
     }).data('kendoTreeView'); 
    } 

    function ExpandNode() { 
     var treeview; 
     treeview = $("#treeview").data("kendoTreeView"); 
     var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter 
     treeview.expand(nodeToExpand); 
    } 

    function CheckIfHasParent(e) { 
    } 

    InitializeTreeview(); 

}); 

и вы можете играть с ним здесь: http://jsfiddle.net/OnaBai/dSt2h/

Answer 2

Для тех, кто может быть заинтересован:

function ExpandNode() { 

    var treeview; 
    var node1; 

    treeview = $("#treeview").data("kendoTreeView"); 
    var node2; 
    var myURL = kendo.format(websiteRootUrl + '/Merchants/GetPathForSelectedNode?databaseID={0}&merchantID={1}&brandownerID={2}', selectedDatabaseID,MerID,BowID); 

     node1 = treeview.dataSource.get(BowID); 
     node = treeview.findByUid(node1.uid); 
     var uid = node1.uid; 
     node.find('span:first-child').trigger('click'); //expand 1st level 

    $.ajax({ 
          url: myURL, 
          dataType: "json", 
          contentType: 'application/json; charset=utf-8', 
          success: function(result) 
           { 

            var length = result.length; 

            var lastVal = 1; 
            for (var i = 1; i < length-1; i++) { 
             $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function 
             () { 
               i = lastVal; // have to reinitialize i because waitUntilExist's callback will find the i incermented, over the needed value 
               lastVal++; 
               node2 = node1.children.get(result[i]); 
               node = treeview.findByUid(node2.uid); 
               uid = node2.uid; 
               node1 = node2; 
               if(lastVal <= length-1) 
                node.find('span:first-child').trigger('click'); // keep expanding 
               else 
               { 
                treeview.select(node); // just select last node 
                currentSelectedNode = node; 
               } 

             }); 
            } 
            if(length == 2) //select 1st child 
            { 
             $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function 
             () { 
               node2 = node1.children.get(result[i]); 
               node = treeview.findByUid(node2.uid); 
               uid = node2.uid; 
               node1 = node2; 
               treeview.select(node); // just select last node 
               currentSelectedNode = node; 
             }); 
            } 
           } 
          }); 

}

Это мой метод. Цикл for начинается с 1, потому что 1-й элемент в моем массиве - это идентификатор 1-го узла, который я уже расширил. .waitUntilExists - метод Райана Лестера (я добавил ссылку в комментарии выше). Большое спасибо моему коллеге, вам OnaBai и курсу, Райан Лестер. Я надеюсь, что это помогает кому-то. Приветствия

Answer 3

певец можно легко найти TreeView готов к расширению, следуя код, расширяются все TreeView узлов вы также можете найти его путем проверки perticular идентификатора или текст hopw, Следующим пример поможет вам

Ex:

$("#treeview").kendoTreeView({ 
       animation: { 
        expand: true 
       }, 

       dataSource: dataSource, 
       dataBound: function (e) {     
        var tv = $("#treeview").data("kendoTreeView"); 
        if (tv != null) { 
         tv.expand(".k-item"); 
        } 
       }, 

       dataTextField: "test", 
       dataValueField: "id"     
      }); 

Answer 4

$("#treeview").kendoTreeView({ 
    animation: { 
     expand: true 
    }, 

    dataSource: dataSource, 
    dataBound: function (e) {     
     var tv = $("#treeview").data("kendoTreeView"); 
     if (tv != null) { 
      tv.expand(".k-item"); 
     } 
    }, 

    dataTextField: "test", 
    dataValueField: "id"     
});