Telerik Extensions for ASP.NET MVC
Contents

This topic shows how to use Telerik TreeView for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the treeview).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

TreeView definition

The TreeView is made of TreeViewItem objects Here is how to define a simple Telerik TreeView for ASP.NET MVC with two items:

CopyView
<%= Html.Telerik().TreeView()
       .Name("TreeView")
       .Items(items =>
       {
           items.Add().Text("Item 1");
           items.Add().Text("Item 2");
       })
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the treeview which is later output as the id HTML attribute and used by Telerik UI. Setting the name is mandatory and exception would be thrown otherwise.
  • The Items(Action<(Of <<'(TreeViewItemFactory>)>>)) method is used to define the items of the treeview. The passed action sets the properties of the items.
  • The Add method adds new TreeView object to the treeview.
  • The Text method sets the text displayed by the TreeViewItem object.
  • The Content method is used to specify the content of the TreeViewItem object.
  • Finally the Render method outputs the HTML of the treeview.
    Important
    It is mandatory that the Render method is called. If not the component will not output any HTML.

See Also