Post
Ask Question

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.


Similar Articles