This article demonstrates how to scaffold a Kendo UI TreeView for ASP.NET MVC by using the Kendo UI Scaffolder Visual Studio extension.
The Kendo UI Scaffolder will not include the required UI for ASP.NET MVC files to the project. To automatically achieve this, use the Telerik UI for ASP.NET MVC Visual Studio Extensions. To manually achieve this, refer to this article.
Below are listed the steps for you to follow when scaffolding the Kendo UI TreeView.
Create a new Telerik Application for ASP.NET MVC or create a standard ASP.NET MVC application and add Telerik UI for ASP.NET MVC. If you already have a working Telerik MVC application, move on to the next step.
Figure 1. Create a new Telerik MVC application
Include an Entity Framework Data Model. Follow the steps described in this article to do that.
- If you are using the Northwind dummy datasource as is the example on which this article is based, you might need to upgrade it to match a more recent version of your Visual Studio LocalDb definition. In such case, do that by using the Server Explorer. Visual Studio will require you to confirm whether you want to upgrade the database. Upon accepting it, you are ready to go.
- You must rebuild your project after adding the Entity Data Model.
Right-click the location where the TreeView Controller is to be generated. Select Add > New Scaffolded item... from the displayed menu. In this example, you generate it in the Controllers folder.
Figure 2. Add a new scaffolded item
Select Kendo UI Scaffolder from the list of available scaffolders. Next, select the UI for MVC TreeView widget.
You are now presented with the configuration options for the TreeView scaffolder.
Figure 3. Configure the TreeView Scaffolder
- Controller Name—The scaffolder will automatically generate the Action in this new Controller to initiate the query to the database.
- View Name—Defines the View, which will be created and added to a new corresponding folder. It will hold the mark-up definition of the TreeView widget.
- Model Class—Contains all model types from the active project. In this example, you build a tree which contains the employees depending on their hierarchical roles.
- Data Context Class—Selects the Entity Framework Data Model class to be used.
- Parent Field Name—Indicates the field, which the tree relations would be built upon.
- Has Children Field Name—Represents an enumerable collection to hint the widget about the children records. If not defined, the TreeView will display expand buttons for all of the items, even if they do not contain any child records.
Click the TreeView options item on the left. It will open the section for configuring the settings of the TreeView widget.
Figure 4. Pick TreeView options
- Animation—Checks to enable for expand or collapse action.
- DataTextField—Defines the field, which will be used to display the text of the items.
DataUrlField—If entered, defines the field, which will be used to automatically transform the text content of the items to links. These links point to a new site depending on the value—for example,
You are also able to add events. When finished with the TreeView configuration, click Add at the bottom. The TreeView Controller and the corresponding View are now generated and you are ready to run the site.
Figure 5. The result after running the generated view
- Overview of the TreeView HtmlHelper
- Live Samples
- Overview of Telerik UI for ASP.NET MVC
- Fundamentals of Telerik UI for ASP.NET MVC
- Scaffolding in Telerik UI for ASP.NET MVC
- Telerik UI for ASP.NET MVC API Reference Folder
- Telerik UI for ASP.NET MVC HtmlHelpers Folder
- Tutorials on Telerik UI for ASP.NET MVC
- Telerik UI for ASP.NET MVC Troubleshooting