如何使用Kendo UI TreeView基於遠程數據生成樹視圖？

Question

我一直在閱讀關於此的所有文檔，我仍然無法使其工作。

我有一個Web API提供了一個JSON對象。這是一個22件事情的清單。只有22行文字。

我想採取這些並形成一個TreeView。這22個字符串中的每一個都有它們下面的項目，但我只想讓第一部分工作。

我的第一個問題是，我如何從API中提取數據並使用它填充treeView？

在我的主網頁，我有這樣的：

<div id="treeView"></div> 

在我的JavaScript文件我有這樣的：

$("#treeView").kendoTreeView({ 
    checkboxes: true, 
    dataSource: { 
     transport: { 
      read: { 
       url: "http://...", 
       dataType: "json" 
      } 
     } 
    } 
}); 

當我嘗試運行頁面，我得到「請求失敗。」 [重試]

如果我打開一個瀏覽器並轉到此URL，數據將作爲JSON對象正常返回。

我在這裏做錯了什麼？

編輯 -

代碼，返回JSON：

public List<string> getNotificationByUser(int id) 
{ 
     List<string> notificationTitles = new List<string>(); 

     foreach (var notification in notifications) 
     { 
      notificationTitles.Add(notification.ToString()); 
     } 
     return notificationTitles; 
} 

Answer 1

我想通了，我所有的答案：

function CreateNotificationTree(userId) 
{ 
    debugger; 
    var data = new kendo.data.HierarchicalDataSource({ 
     transport: { 
      read: { 
       url: "../api/notifications/byuserid/" + userId, 
       contentType: "application/json" 
      } 
     }, 
     schema: { 
      model: { 
       children: "notifications" 
      } 
     } 
    }); 

    $("#treeview").kendoTreeView({ 
     dataSource: data, 
     loadOnDemand: true, 
     dataUrlField: "LinksTo", 
     checkboxes: { 
      checkChildren: true 
     }, 
     dataTextField: ["notificationType", "NotificationDesc"], 
     select: treeviewSelect 
    }); 

    function treeviewSelect(e) 
    { 
     var node = this.dataItem(e.node); 
     window.open(node.NotificationLink, "_self"); 
    } 
} 

[HttpGet] 
public List<Node> getNotifications(int id) 
{ 
    var bo = new HomeBO(); 
    var list = bo.GetNotificationsForUser(id); 
    var notificationTreeNodes = (from GBLNotifications n in list 
           where n.NotificationCount != 0 
           select new NotificationTreeNode(n)).ToList(); 
    var li = notificationTreeNodes.Select(no => new Node 
    { 
      notificationType = no.NotificationNode.NotificationType + " " + "(" + no.NotificationNode.NotificationCount + ")", notifications = bo.GetNotificationsForUser(id, no.NotificationNode.NotificationTypeId).Cast<GBLNotifications>().Select(item => new Notification 
      { 
        ID = item.NotificationId, NotificationDesc = item.NotificationDescription, Params = new List<NotificationParam> 
        { 
          new NotificationParam 
          { 
            ParamName = item.Param1, ParamVal = item.ParamValue1 
          }, 
          new NotificationParam 
          { 
            ParamName = item.Param2, ParamVal = item.ParamValue2 
          }, 
          new NotificationParam 
          { 
            ParamName = item.Param3, ParamVal = item.ParamValue3 
          }, 
          new NotificationParam 
          { 
            ParamName = item.Param4, ParamVal = item.ParamValue4 
          }, 
          new NotificationParam 
          { 
            ParamName = item.Param5, ParamVal = item.ParamValue5 
          }, 
        }, 
        ActionPageName = item.ActionPageName 
      }).ToList() 
    }).ToList(); 
    li.ForEach(i => i.notifications.ForEach(x => x.SetNotificationLink())); 
    return li; 
} 

Answer 2

好！我已經能夠重現你的錯誤。問題是22行文字不是有效的JSON。

返回類似：

This 
is 
a 
test 

是不是一個有效的JSON。

但是一個有效的JSON是不夠的，你應該返回是這樣的：

[ 
    { "text": "This" }, 
    { "text": "is" }, 
    { "text": "a" }, 
    { "text": "test" } 
] 

即：結果應該是對象的數組，每個對象都有一個text場。

注意我知道它不必被稱爲text，但爲了簡單起見，我使用它，因爲它是默認值。