Unbound Mode
In an Unbound Mode, TreeView is not bound to any data source and can be populated manually. To create nodes, use the MVCxTreeViewNodeCollection.Add methods.
The example below demonstrates how to create a simple TreeView in unbound mode.
View code (ASPX):
<%
Html.DevExpress().TreeView(
settings => {
settings.Name = "MyTreeView";
settings.Nodes.Add("Home", "HomePage", "~/Content/Images/Home.png");
settings.Nodes.Add(
node => {
node.Text = "News";
node.Name = "NewsPage";
node.Image.Url = "~/Content/Images/News.png";
node.Nodes.Add("Subscriptions", "SubscriptionsPage", "~/Content/Images/Subscriptions.png");
});
settings.Nodes.Add(
node => {
node.Text = "Products";
node.Name = "ProductsPage";
node.Image.Url = "~/Content/Images/Products.png";
node.Nodes.Add("Downloads", "DownloadsPage", "~/Content/Images/Downloads.png");
node.Nodes.Add("Support", "SupportPage", "~/Content/Images/Support.png");
node.Nodes.Add("Order", "OrderPage", "~/Content/Images/Order.png");
});
settings.Nodes.Add("Client Center", "ClientPage", "~/Content/Images/Client Center.png");
}).Render();
%>
View code (Razor):
@Html.DevExpress().TreeView(
settings => {
settings.Name = "MyTreeView";
settings.Nodes.Add("Home", "HomePage", "~/Content/Images/Home.png");
settings.Nodes.Add(
node => {
node.Text = "News";
node.Name = "NewsPage";
node.Image.Url = "~/Content/Images/News.png";
node.Nodes.Add("Subscriptions", "SubscriptionsPage", "~/Content/Images/Subscriptions.png");
});
settings.Nodes.Add(
node => {
node.Text = "Products";
node.Name = "ProductsPage";
node.Image.Url = "~/Content/Images/Products.png";
node.Nodes.Add("Downloads", "DownloadsPage", "~/Content/Images/Downloads.png");
node.Nodes.Add("Support", "SupportPage", "~/Content/Images/Support.png");
node.Nodes.Add("Order", "OrderPage", "~/Content/Images/Order.png");
});
settings.Nodes.Add("Client Center", "ClientPage", "~/Content/Images/Client Center.png");
}).GetHtml()
The image below illustrates the result.
