JQuery and ASP.NET MVC json output for kendo treeview

Question

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:

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

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

Answer 1

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

JQuery and ASP.NET MVC json output for kendo treeview

Question

1 answers

solution1
1 ACCPTED 2021-04-20 19:15:26

JQuery and ASP.NET MVC json output for kendo treeview

Question

1 answers

solution1 1 ACCPTED 2021-04-20 19:15:26

solution1
1 ACCPTED 2021-04-20 19:15:26