Getting Started with TreeView for ASP.NET MVC and Core

Using TreeView

Use TreeView to display the headings in a document, the entries in an index, the files and directories on a disk, or any other kind of information that would be best displayed as a hierarchy. TreeView We'll use the following model class for most of this blog because it returns an array with hierarchical data:

 public class Property  
    {  
        public string Header { get; set; }  
        public string Image { get; set; }  
        public bool NewItem { get; set; }  
        public Property[] Items { get; set; }  

public static  Property[] GetData(string val)  
  {  
            return new Property[]  
            {  
                new Property  
                {  
                    Header = "Electronics",  
                    Image = "/Content/images/electronics.png",  
                    Items = new Property[]  
                    {  
                        new Property { Header="Trimmers/Shavers" },  
                        new Property { Header="Tablets" },  
                        new Property { Header="Phones",  
                            Image ="/Content/images/phones.png",  
                            Items = new Property[] {  
                                new Property { Header="Apple" },  
                                new Property { Header="Motorola", NewItem=true },  
                                new Property { Header="Nokia" },  
                                new Property { Header="Samsung" }}  
                        },  
                        new Property { Header="Speakers", NewItem=true },  
                        new Property { Header="Monitors" }  
                    }  
                },  
                new Property{  
                    Header = "Toys",  
                    Image = "/Content/images/toys.png",  
                    Items = new Property[]{  
                        new Property{ Header = "Shopkins" },  
                        new Property{ Header = "Train Sets" },  
                        new Property{ Header = "Science Kit", NewItem = true },  
                        new Property{ Header = "Play-Doh" },  
                        new Property{ Header = "Crayola" }  
                    }  
                },  
                new Property{  
                    Header = "Home",  
                    Image = "/Content/images/home.png",  
                    Items = new Property[] {  
                        new Property{ Header = "Coffeee Maker" },  
                        new Property{ Header = "Breadmaker", NewItem = true },  
                        new Property{ Header = "Solar Panel", NewItem = true },  
                        new Property{ Header = "Work Table" },  
                        new Property{ Header = "Propane Grill" }  
                    }  
                }  
            };  
        }  
    }  

Data Binding

Because the Bind property takes an IEnumerable source, you can data bind TreeView to create trees. Each item in the source collection has information about nodes and a collection of child nodes. The DisplayMemberPath property is set to the text to be displayed in the tree nodes. Set the ChildItemsPath property to the collection of child nodes with the following code:

@model IEnumerable  

@(Html.C1().TreeView().Id("tv").Bind(Model)  
        .DisplayMemberPath("Header")  
        .ChildItemsPath("Items"))  

Show Check Boxes

Displaying check boxes against each node is as simple as setting a property. Set the ShowCheckBoxes property to true to display check boxes. TreeView Check boxes

@(Html.C1().TreeView().Id("tv").Bind(Model)  
        .ShowCheckboxes(true)  
        .DisplayMemberPath("Name")  
      .ChildItemsPath("SubExployees"))  

Show Images

You can customize each node to display both images and text by setting the ImageMemberPath property to the image path. TreeView Images

Editing

Allow users to edit nodes by setting the IsReadOnly property to false. Edits made to a node's content are automatically propagated to the source collection for the field associated with DisplayMemberPath. To further control editing, use the client methods OnClientNodeEditStarting, OnClientNodeEditStarted, OnClientNodeEditEnding, and OnClientNodeEditEnded.

@(Html.C1().TreeView().Id("tv").Bind(Model)  
        .IsReadOnly(false)  
        .DisplayMemberPath("Header")  
        .ImageMemberPath("Image")  
        .ShowCheckboxes(true)  
        .AllowDragging(true)  
    .ChildItemsPath("Items"))  

Drag & Drop

Allow users to drag nodes to new positions within the treeview by setting the AllowDragging property to true. When dragging is allowed, users can drag any node to any position within the tree. You can customize this behavior by handling the TreeView drag/drop events.

@(Html.C1().TreeView().Id("tv").Bind(Model)  
        .DisplayMemberPath("Header")  
        .AllowDragging(true)  
    .ChildItemsPath("Items"))  

Load On Demand

Lazy loading is useful when you're dealing with large hierarchical data sources and want to avoid the delays involved in loading an entire data set at once. The TreeView control makes lazy-loading super easy. In the Bind property, set the second parameter to lazyLoadActionUrl and provide a URL to obtain the node's data on demand. If the child node has children, you can set an empty array to the field, and the field's name will be used for the ChildItemsPath property. Otherwise, you can let the field to be null. The following examples use the Northwind Employee class:

Controller:

 public class HomeController : Controller  
    {  
        public ActionResult Index()  
        {  
            return View(EmployeeEx.GetEmployees(null));  
        }  

        public ActionResult LazyLoading([C1JsonRequest]TreeNode node)  
        {  
            var leaderID = (int?)node.DataItem["EmployeeID"];  
            var list = EmployeeEx.GetEmployees(leaderID);  
            return Json(list);  
        }  
    }  

View:

@model IEnumerable  

@(Html.C1().TreeView().Id("tv").Bind(Model,Url.Action("LazyLoading"))  
        .IsReadOnly(false)  
        .DisplayMemberPath("Name")  
      .ChildItemsPath("SubExployees"))  

Important Client API

While working with TreeView, you would often need to work with the control's client APIs. You can use the client API similarly to ASP.NET MVC's other controls (read about it here). The full client API is included in the documentation. The simplest and most common use for the TreeView control is navigation. You can use the OnClientSelectedItemChanged or the OnClientItemClicked event for navigation. Their only difference is OnClientSelectedItemChanged occurs when the user moves the selection with the keyboard, while OnClientItemClicked occurs when the user clicks an item or presses the Enter key. Here's an example that uses the OnClientItemClicked event:

@model Property[]  


        function itemClicked(treeView) {  
            document.getElementById('tvNavItem').innerHTML = 'Navigating to ** *** ' + treeView.selectedItem.Header + ' *****';  
        }  



@(Html.C1().TreeView()  
    .Bind(Model)  
    .DisplayMemberPath("Header")  
    .ChildItemsPath("Items")  
    .OnClientItemClicked("itemClicked"))  

When check boxes are displayed, the treeview manages its hierarchy so that when a check box is checked or cleared, the new value is automatically applied to all child nodes and reflected on the parent nodes' state. When items are checked or unchecked, the checkedItemsChanged event is raised, and the checkedItems property is updated with a list of currently-checked items. You can customize the content of the TreeView nodes using the formatItem event. The event handler parameters include the element that represents the node and the data item being rendered. In the HTMLHelper, set the OnClientFormatItem and pass the name of the client function to it. Here's an example:

@model Property[]  



        function formatItem(treeview, args) {  
            if (args.dataItem.NewItem) {  
                args.element.innerHTML +=  
                    '';  
            }  
        }  



@(Html.C1().TreeView()  
    .Bind(Model)  
    .DisplayMemberPath("Header")  
    .ChildItemsPath("Items")  
    .OnClientFormatItem("formatItem"))  

Try TreeView for ASP.NET MVC>>