ARTICLE
TabStrip and TreeView creation using Telerik in ASP.NET MVC
Today, we will see how to create a Tabstrip and Treeview using telerik in ASP.NET MVC.
Today, we will see how to create a Tabstrip and
Treeview using telerik in MVC. Let's First begin by creating some basic class as
Tab.cs. The Complete Source Code for Tab.cs looks like this:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using System.Web;
namespace
TelerikMvcApp_Tab.Models
{
public class Tab
{
public string
Text { get; set;
}
public string
link { get; set;
}
}
}
We will now initialize some values to the properties specified, so we will be
creating a simple class called TabData.cs. The Complete Source Code for TabData.cs
looks like this:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
TelerikMvcApp_Tab.Models
{
public static class TabData
{
public static List<Tab> GetData()
{
return new List<Tab>
{
new Tab
{
Text="Microsoft",
link="http://www.microsoft.com/en-us/default.aspx"
},
new Tab
{
Text="Facebook",
link="https://www.facebook.com/"
},
new Tab
{
Text="StackOverFlow",
link="http://stackoverflow.com/"
},
new Tab
{
Text="C-SharpCorner",
link="http://www.c-sharpcorner.com/"
}
};
}
}
}
It's time for us to go and code in HomeController. We will be calling the GetData
Method of the TabData Class to ViewData attribute of Index Action. The Complete Code
of HomeController.cs looks like this:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
TelerikMvcApp_Tab.Models;
namespace
TelerikMvcApp_Tab.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData.Model = TabData.GetData();
return View();
}
public ActionResult About()
{
return View();
}
}
}
Now, we will create a Index View where will use Telerik Extension for TabStrip
an TreeView Creation. So the Complete Source Code for this looks like:
@model IEnumerable<TelerikMvcApp_Tab.Models.Tab>
@{ Html.Telerik().TabStrip()
.Name("TabStrip1")
.BindTo(Model,
(item, navigationData) =>
{
item.Text = navigationData.Text;
item.Url = navigationData.link;
})
.Render();
}
<div>
@{ Html.Telerik().TabStrip()
.Name("TabStrip2")
.Items(p =>
{
p.Add().Text("Model-View-Controller").Content(@<p>This is a Model View
Controller</p>);
p.Add().Text("WPF").Content(@<p>This is a XAML Code</p>);
})
.Effects(f => f.Expand().Opacity().OpenDuration(300).CloseDuration(300)).Render();
}
<br />
<br />
@( Html.Telerik().TreeView()
.Name("Treeview1")
.Items(p =>
{
p.Add().Text("MVC").Expanded(true)
.Items(r =>
{
r.Add().Text("Model");
r.Add().Text("View");
r.Add().Text("Controller");
});
p.Add().Text("WPF")
.Expanded(true)
.Items(r =>
{
r.Add().Text("XAML");
});
p.Add().Text("Telerik").Expanded(true).Items(o =>
{
o.Add().Text("NumericTextBox");
o.Add().Text("Menu");
o.Add().Text("Grid");
o.Add().Text("Editor");
o.Add().Text("Tab");
o.Add().Text("DropDown");
});
})
)
</div>
The Output for this application looks like this:
TabStrip and TreeView.png
I hope this article is useful for you. I look forward for your comments and
feedback.Thanks Vijay Prativadi.