TabStrip and TreeView creation 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.