ASP.NET Core

Kendo Tree View Remote Databinding

Introduction

This article tells you how to construct the kendo tree view with complex JSON object, which is the response of the REST API developed using ASP.NET Core Web API.

Content

  1. Creating a complex JSON object using ASP.NET CORE API.
  2. Construct the kendo tree view using the API.

Create a complex JSON object

Create a new ASP.NET CORE API project, as shown in below figures.

Open Visual Studio-> New->Project.   
 
 
Figure 1
 
   
Figure 2 

Once the project gets loaded, right click on Controller folder-> Add -> Controller to create a new empty API controller. In my case, I named it as AutomobilesController.

 
Figure 3 
 
AutomobilesController .cs 
  1. [Produces("application/json")]  
  2.    [Route("api/Automobiles")]  
  3.    public class AutomobilesController : Controller  
  4.    {  
  5.        [HttpGet]  
  6.        [Route("DataSource")]  
  7.        public JsonResult HierachyDataSource()  
  8.        {  
  9.            var obj = new []  
  10.            {  
  11.                new {  
  12.                name = "Automobiles",  
  13.                value = 1,  
  14.                items = new[] {  
  15.                new {  
  16.                    name = "Bus",  
  17.                    value = 2,  
  18.                    items = new dynamic [] {  
  19.                        new {  
  20.                            name = "Ford",  
  21.                            value=3  
  22.                        },  
  23.                            new {  
  24.                            name = "BMW",  
  25.                            value=4,  
  26.                        },  
  27.   
  28.                        },  
  29.                    },  
  30.   
  31.                new {  
  32.                    name = "Car",  
  33.                    value=5,  
  34.                    items = new dynamic [] {  
  35.                        new { name = "Honda", value=6},  
  36.                        new { name = "Ford",  value=7},  
  37.   
  38.                    }  
  39.                },  
  40.            },  
  41.                },  
  42.            };  
  43.            return Json(obj);  
  44.   
  45.        
  46.        }  
  47.    }  
The above action HierachyDataSource will return the complex JSON object.

Test the API Response in POST MAN

  • API - http://localhost:11207/api/Automobiles /DataSource
  • Type - GET.

Testing the APIs, using POSTMAN.

 
Figure 4 

Construct the Kendo Tree View using the API

Kendo Tree View

Kendo tree view is one of the major widgets from the Kendo products, which is used to display the hierarchy data in a more readable format

Create a new HTML page in the project. In my case, I named it  KendoTreeVIew.html.

KendoTreeView.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>   
  4.     <style>  
  5.         html {  
  6.             font-size: 14px;  
  7.             font-family: Arial, Helvetica, sans-serif;  
  8.         }  
  9.     </style>  
  10.     <title></title>  
  11.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />  
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />  
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />  
  14.   
  15.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>  
  16.     <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>  
  17. </head>  
  18. <body>  
  19.     <div id="example">  
  20.         <div class="demo-section k-content">  
  21.             <div class="k-content">  
  22.                 <h4> Kendo Tree View</h4>  
  23.   
  24.             </div>  
  25.   
  26.             <div id="treeview"></div>  
  27.         </div>  
  28.         <script>  
  29.                     homogeneous = new kendo.data.HierarchicalDataSource({  
  30.                         transport: {  
  31.                             read: {  
  32.                                 url: "http://localhost:11207/api/Automobiles/DataSource",  
  33.                                 dataType: "json"  
  34.                             }  
  35.                         },  
  36.                         schema: {  
  37.                             model: {  
  38.                                 id: "value",  
  39.                                 children: "items"  
  40.                             }  
  41.                         }  
  42.                     });  
  43.   
  44.                 $("#treeview").kendoTreeView({  
  45.                     dataSource: homogeneous,  
  46.                     dataTextField:["name"]  
  47.                 });  
  48.         </script>  
  49.     </div>  
  50. </body>  
  51. </html>  
  • dataSource - The datasource of the Kendo tree view should be a hierarchical data source and it is constructed based on our complex JSON object from API 
  • dataTextField - Specify the field from the JSON object which should be displayed in tree view.
  • Schema - In the schema of the data source we need to mention the id and children attribute of the data source.
Result
 
 
Figure 5
 
After expanding  

Figure 6  

Conclusion

We have seen how to construct the Kendo tree view with complex JSON object, we will see more about the Kendo tree view templates in my future articles.

The above mentioned API is deployed and available for use here.

Download the source code from Github.

Reference

https://demos.telerik.com/kendo-ui/treeview/remote-data-binding

I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs