Search code examples
javascriptjqueryasp.net-mvckendo-uikendo-treeview

JQuery and ASP.NET MVC json output for kendo treeview

Hey all I am having an issue with Kendo UI for ASP.net MVC with a mix of jQuery thrown in there for data retrieval.

My current treeview looks like this:

enter image description here

However, I am wanting it to look more like this:

enter image description here

My JSON structure that I have to work with looks like this:

{
"meta": {
    "total_results": 193,
    "offset": 0,
    "total_pages": 1
},
"object_list": [{
        "Name": "facebook",
        "Description": null,
        "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    }, {
        "Name": "twitter",
        "Description": null,
        "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    },  {
        "Name": "Google",
        "Description": null,
        "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Search Engines"
    }, {
    ...ETC...

Which looks like it needs to be formatted to look like this:

$("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },

     check: onCheck,

     dataSource: [{
         id: 1, text: "Categories", expanded: true, spriteCssClass: "rootfolder", items: 
         [{
             id: 2, text: "Social Networks", expanded: true, spriteCssClass: "folder", 
             items: [
                { id: 3, text: "facebook", spriteCssClass: "html" },
                { id: 4, text: "twitter", spriteCssClass: "html" },
                { id: 5, text: "WhatsApp", spriteCssClass: "image" },
                { id: 6, text: "instagram", spriteCssClass: "image" },
                { id: 7, text: "wechat", spriteCssClass: "image" }
             ]}, {
             id: 8, text: "Search Engines", expanded: true, spriteCssClass: "folder", 
              items: [
                 { id: 9, text: "Google", spriteCssClass: "image" },
                 { id: 10, text: "Yahoo!", spriteCssClass: "pdf" }
              ]}
        ]
    }]
});

So my question - how do I get it into the correct treeview structure format like above since I am unable to modify the JSON that's being sent to me? Ether soluction (JQuery or ASP.net MVC) will be fine.

Any help would be great!

update

enter image description here

Solution

  • Good news is that you actually CAN change the Api data using dataSource.schema.parse event:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script></head>
<body>
  <div id="treeview"></div>
  <script>
    let apiData = {
    "meta": {
        "total_results": 193,
        "offset": 0,
        "total_pages": 1
    },
    "object_list": [{
            "Name": "facebook",
            "Description": null,
            "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        }, {
            "Name": "twitter",
            "Description": null,
            "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        },  {
            "Name": "Google",
            "Description": null,
            "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Search Engines"
        }]
    };
      
    $("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },
     dataSource: {
       data: apiData,
       schema: {
         model: {
           children: 'items'
         },
         parse: (data) => {
           // The new data array to be used by treeview
           let newData = [];
           
           data.object_list.forEach(item => {
             // Look for an already created parent for that categoty
             let parent = newData.find(parentItem => parentItem.text === item.Cat);
             
             // If not found...
             if (!parent) {
               // ... create a new one...
               parent = {
                 id: 2,
                 text: item.Cat,
                 expanded: true,
                 items: [],
                 spriteCssClass: "folder"
               };
               
               // ... and add it to the final data array.
               newData.push(parent);
             }
             
             // Add the new item to the parent
             parent.items.push({
               id: 3,
               text: item.Name, 
               spriteCssClass: "image"
             });
           });
           
           // Return the root object with its new child items
           return [{
             id: 1, 
             text: 'Categories', 
             expanded: true,
             spriteCssClass: "rootfolder",
             items: newData
           }];
         }
       }
     }
  });
  </script>
</body>
</html>

    Dojo