Dynamically populated Treeview in kendo using MVC

In this article, we learn about how to dynamically populated Treeview in kendo using MVC with SQL Server database

Steps for implementing populated Treeview in kendo using MVC

1. Create a table in SQL server
2. Generate an Ado.Net entity data model
3. Implement the controller and View

Step 1: Create a table in SQL Server

create two tables(Country, State) by using the following given SQL queries and insert some dummy data like country-wise some states

CREATE TABLE [dbo].[Country](
	[PKCountryId] [int] IDENTITY(1,1) NOT NULL,
	[CountryName] [varchar](50) NOT NULL,
	[ZipCodeStart] [bigint] NOT NULL,
	[ZipCodeEnd] [bigint] NOT NULL,
	[IsActive] [bit] NOT NULL,

	)
CREATE TABLE [dbo].[State](
	[PKStateId] [int] IDENTITY(1,1) NOT NULL,
	[FKCountryId] [int] NOT NULL,
	[StateName] [varchar](20) NOT NULL,
	[IsActive] [bit] NOT NULL,
	)

Step 2:Generate an Ado.Net entity data Model

Right-click on your project Add Ado.net entity data Model

Step 3: implementing the controller and view

Go to the home controller Add given below snippet code

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public JsonResult Country_read(int? id)
        {
            using (var Context = new ContactsManagerDBEntities())
            {
                var countryQuery = Context.Countries.Select(c => new HierarchicalViewModel
                {
                    ID = c.PKCountryId,
                    Name = c.CountryName,
                    ParentID = null,
                    HasChildren = c.States.Any()
                })
                .Union(Context.States.Select(c => new HierarchicalViewModel
                {
                    ID = c.PKStateId,
                    Name = c.StateName,
                    ParentID = c.FKCountryId,
                    HasChildren = c.Addresses.Any()
                }));
                var result = countryQuery.ToList()
                 .Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
                 .Select(item => new
                 {
                     id = item.ID,
                     Name = item.Name,
                     expanded = item.Expanded,
                     hasChildren = item.HasChildren

                 });

                return Json(result, JsonRequestBehavior.AllowGet);
            }
        }
    }

Add a view for an Index action method following given HTML code

@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().Button()
    .Name("expandNode")
    .Content("Expand selected node")
    .Events(e => e.Click("onExpandClick"))
)

@(Html.Kendo().TreeView()
    .Name("treeview")            
    .DataTextField("Name")
    .DataSource(dataSource => dataSource        
        .Read(read => read                   
            .Action("Country_read", "Home")
        )
    )
)

<script>
    function onExpandClick(e) {
        var tree = $("#treeview").data("kendoTreeView"),
            selected = tree.select(),
            dataItem = tree.dataItem(selected);

        var load = function (item) {
            var that = this,
                chain = $.Deferred().resolve();

            chain = chain.then(function () {
                that.expand(that.findByUid(item.uid));
                return item.load();
            }).then(function () {
                if (item.hasChildren) {
                    var childrenChain = $.Deferred().resolve();

                    item.children.data().forEach(function (child) {
                        (function (child) {
                            childrenChain = childrenChain.then(function () {
                                return load.bind(that)(child);
                            })
                        })(child)
                    })

                    return childrenChain;
                }
            });
            return chain;
        }
        if (selected.length == 0) {
            alert("Select item first!");
            return;
        }
        load.bind(tree)(dataItem);
    }
</script>

• Author
• Recent Posts

DuttaluruVijayakumar

hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more

Latest posts by DuttaluruVijayakumar (see all)

• How to create dynamic form fields using jQuery - January 4, 2021
• What is CTS (Common Type System) in .Net - October 16, 2020
• What is main method in c# - October 13, 2020