Kendo Tree View не загружается должным образом

Question

Я хочу создать kendo ui tree view с удаленным источником данных в Asp.net mvc4. У меня проблема с знаниями о кендо. Я пробовал эти примеры в kendo website.

Но я даже не мог получить эти изображения в treeView.

О проекте: Этот проект предназначен для создания меню TreeView для загрузки веб-форм. Каждая веб-форма может быть взята как formObject. Это объектов имеет следующие атрибуты

1. имя
2. идентификатор
3. Список дочерних объектов (Список порожденных)

Вот мои коды на контроллере

public class HomeController : Controller 
{ 
    ObjectService service = new ObjectService(); 
    private int cky = 11; 
    private int usrky=28; 

    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult GetAllMenu(int prntKy = 1)// initially the parent key is = 1 
    { 
     List<ObjectModel> objects = new List<ObjectModel>(); 
     objects = service.GetObjectsByPrntKy(prntKy, cky, usrky);//get all parent nodes 

     List<TreeViewModel> tree = new List<TreeViewModel>(); 

     if (objects != null) 
     { 
      foreach (ObjectModel model in objects)//for each parent node 
      { 
       TreeViewModel treeObj = new TreeViewModel(); 

       treeObj.id = model.ObjKy; 
       treeObj.name = model.ObjNm; 
       treeObj.childrens = GetChileByPrntObjKy(model.ObjKy); 
       tree.Add(treeObj); 
      } 
     } 


     return Json(tree, JsonRequestBehavior.AllowGet); 

    } 

    private List<TreeViewModel> GetChileByPrntObjKy(int prntKy)// method to get child nodes 
    { 
     List<TreeViewModel> tree = new List<TreeViewModel>(); 

     List<ObjectModel> Objects = new List<ObjectModel>(); 

     Objects = service.GetAllObjects(); 

     foreach (ObjectModel model in Objects) 
     { 

      TreeViewModel treeObj = new TreeViewModel(); 

      if (model.PrntObjKy == prntKy) 
      { 
       treeObj.id = model.ObjKy; 
       treeObj.name = model.ObjNm; 
       treeObj.childrens = GetChileByPrntObjKy(model.ObjKy); 
       tree.Add(treeObj); 
      } 

     } 
     return tree; 
    } 

} 

Вот модель

public class TreeViewModel 
{ 
    public int pid { get; set; } 
    public int id { get; set; } 
    public string name { get; set; } 
    public List<TreeViewModel> childrens { get; set; } 
} 

    public class ObjectModel 
{ 
    public long UsrObjPrmsnKy { get; set; } 
    public long UsrKy { get; set; } 
    public int ObjKy { get; set; } 
    public string ObjCd { get; set; } 
    public string ObjNm { get; set; } 
    public string ObjCaptn { get; set; } 
    public bool isPrntObj { get; set; } 
    public Nullable<int> PrntObjKy { get; set; } 
    public int CallObjKy { get; set; } 
    public string ObjPath { get; set; } 
    public bool isAlwAcs { get; set; } 
    public bool isAlwAdd { get; set; } 
    public bool isAlwUpdate { get; set; } 
    public bool isAlwDel { get; set; } 
    public bool isAlwApr { get; set; } 
} 

и вот Посмотреть

 <div id="treeview"> 
    </div> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      LoadTreeView(1); 
     }); 

     function LoadTreeView(prntKy) 
     { 
      var key = prntKy; 
      homogeneous = new kendo.data.HierarchicalDataSource({ 
       transport: { 
        read: { 
         url: '@Url.Content("~/Home/GetAllMenu")', 
         data:{'prntKy':key}, 
        dataType: "json" 
       } 
      }, 
       schema: { 
        model: { 
         id: "id", 
         hasChildren: "childrens", 
         name: "name" 
        } 
       } 
      }); 

     $("#treeview").kendoTreeView({ 
      dataSource: homogeneous, 
      select: onSelectTree, 
      dataTextField: "name", 
      dataValueField: "id", 
     }); 
     } 

     function onSelectTree(e) { 
      var data = $('#treeview').data('kendoTreeView').dataItem(e.node); 
      alert(data.id); 
      LoadTreeView(data.id); 
     } 
    </script> 

Я загрузил результаты изображения тоже. Пожалуйста, помогите мне.

Answer 1

Ваше древовидное изображение настроено неправильно. Кажется, вы повторно инициализируете его каждый раз, когда выбран узел, который является избыточным. Я предлагаю вам проверить remote binding demo, который реализует очень похожий случай с вашим. Вот как выглядит декларация TreeView:

var serviceRoot = "http://demos.kendoui.com/service"; 
    homogeneous = new kendo.data.HierarchicalDataSource({ 
     transport: { 
      read: { 
      url: serviceRoot + "/Employees", 
      dataType: "jsonp" // you don't need "json" for your case 
      } 
     }, 
     schema: { 
      model: { 
      id: "EmployeeId", 
      hasChildren: "HasEmployees" 
      } 
     } 
    }); 

$("#treeview").kendoTreeView({ 
    dataSource: homogeneous, 
    dataTextField: "FullName" 
}); 

В этой демке TreeView спросит источник данных, чтобы загрузить новый уровень узлов, когда родительский узел расширяются. Например, когда пользователь расширяет корневой узел в этой демонстрационной версии, источник данных делает запрос http://demos.kendoui.com/service/Employees?EmployeeId=2, что означает «вернуть дочерние узлы, чей EmployeeID равен 2». Почему «EmployeeId»? Поскольку это «идентификатор» модели источника данных:

schema: { 
    model: { 
     id: "EmployeeId", 
     hasChildren: "HasEmployees" 
    } 
    }