TabStrip In Kendo UI For ASP.NET MVC

This is a sample program to show TabStrip in Kendo UI.

Gold

Platinum

Table

Steps

We need one Controller.
We need one Index Action.
Three different Action and Views to call inside the Index Action view.

Add a Controller

Add controller

Add a View to the Controller.

Index Action Method - Right click and Add View.

Before designing the Index view add a View Model to the Project named ClsSchemeViewModel.

Right Click Model Folder and Add Class.

Model class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace KenCloudClient.Models
{
public class ClsSchemeViewModel
{
public int SchemeId
{
set;
get;
}
public string SchemeName
{
set;
get;
}
public decimal DiscPercentage
{
set;
get;
}
public string SchemeDetails
{
set;
get;
}
}
}

Design the View Page for Index Action

@model KenCloudClient.Models.ClsSchemeViewModel
@{
ViewBag.Title = "Index";
}
<h2>Scheme Details</h2>
<div class="container">
<div class="row">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.HtmlAttributes(new { style="heigh:300px;width=800px;"})
.Items(tabstrip =>
{
tabstrip.Add().Text("Gold")
.Selected(true)
.Content(@<text>
<div class="col-lg-11" style="float:left;">
@Html.Action("Gold")
</div>
</text>);
tabstrip.Add().Text("Platinum")
.Content(@<text>
<div class="row">
@Html.Action("Platinum")
</div>
</text>);
tabstrip.Add().Text("Enterprise")
.Content(@<text>
<div class="row">
@Html.Action("Enterprise")
</div>
</text>);
})
)
</div>
</div>
<style type="text/css">
#forecast {
width: 360px;
height: 337px;
margin: 30px auto;
padding: 80px 15px 0 15px;
background: url('@Url.Content("~/Content/web/tabstrip/forecast.png")') transparent no-repeat 0 0;
}
.sunny, .cloudy, .rainy {
display: inline-block;
margin: 20px 0 20px 10px;
width: 128px;
height: 128px;
background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;
}
.cloudy{
background-position: -128px 0;
}
.rainy{
background-position: -256px 0;
}
.weather {
width: 800px;
padding: 40px 0 0 0;
float:left;
}
#forecast h2 {
font-weight: lighter;
font-size: 5em;
padding: 0;
margin: 0;
}
#forecast h2 span {
background: none;
padding-left: 5px;
font-size: .5em;
vertical-align: top;
}
#forecast p {
margin: 0;
padding: 0;
}
</style>

Explanation to the View Page

At The Controller

Declare ActionResult for Tab Item like Gold, Platinum, and Enterprise.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KenCloudClient.Models;
namespace KenCloudClient.Controllers
{
public class SchemeController : Controller
{
ClsSchemeBusiness ClsBusiness = new ClsSchemeBusiness();
// GET: Scheme
public ActionResult Index()
{
return View();
}
public ActionResult Gold()
{
#region -- Action Method for Gold --
var data = ClsBusiness.GetGoldScheme().ToList();
ViewBag.GoldData = data;
return View();
#endregion
}
public ActionResult Platinum()
{
#region -- Action Method For Platinum --
var data = ClsBusiness.GetPlatinumScheme().ToList();
ViewBag.PlatinumData = data;
return View();
#endregion
}
public ActionResult EnterPrise()
{
#region -- Action Method For EnterPrise --
var data = ClsBusiness.GetEnterPriseScheme().ToList();
ViewBag.EnterPriseData = data;
return View();
#endregion
}
}
}

Add three different view pages for the TabPages.

These Views will display inside each TabPages.

Gold.cshtml

@{
Layout = "";
}
<h2>Gold</h2>
<div class="col-lg-7" style=" float:left;">
@{
if (ViewBag.GoldData != null)
{
// Specify the type of the grid
@(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.GoldData)
.Name("GoldGrid")
.Columns(columns =>
{
columns.Bound(p => p.SchemeId).Visible(false);
columns.Bound(p => p.SchemeName).Width(200);
columns.Bound(p => p.DiscPercentage).Width(200);
columns.Bound(p => p.SchemeDetails).Width(300);
})
.Pageable()
.Selectable(X => X.Mode(GridSelectionMode.Single))
.Filterable()
.DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
.Events(ev => ev.Change("onchange"))
)
}
}
</div>

Platinum.cshtml

@{
Layout = "";
}
<h2>Platinum</h2>
<div class="col-lg-7" style=" float:left;">
@{
if (ViewBag.PlatinumData != null)
{
// Specify the type of the grid
@(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.PlatinumData)
.Name("PlatinumGrid")
.Columns(columns =>
{
columns.Bound(p => p.SchemeId);
columns.Bound(p => p.SchemeName);
columns.Bound(p => p.DiscPercentage);
columns.Bound(p => p.SchemeDetails);
})
.Pageable()
.Selectable(X => X.Mode(GridSelectionMode.Single))
.Filterable()
.DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
.Events(ev => ev.Change("onchange"))
)
}
}
</div>

Enterprise.cshtml

@{
Layout = "";
}
<h2>EnterPrise</h2>
<div class="col-lg-7" style=" float:left;">
@{
if (ViewBag.EnterPriseData != null)
{
// Specify the type of the grid
@(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.EnterPriseData)
.Name("EnterPriseGrid")
.Columns(columns =>
{
columns.Bound(p => p.SchemeId);
columns.Bound(p => p.SchemeName);
columns.Bound(p => p.DiscPercentage);
columns.Bound(p => p.SchemeDetails);
})
.Pageable()
.Selectable(X => X.Mode(GridSelectionMode.Single))
.Filterable()
.DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
.Events(ev => ev.Change("onchange"))
)
}
}
</div>

Business Logic Code at ClsSchemeBusiness.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using KenCloudClient.Models;
namespace KenCloudClient.Models
{
public class ClsSchemeBusiness
{
internal List < ClsSchemeViewModel > GetGoldScheme()
{
using(KenClientModel ObjContext = new KenClientModel())
{
var SchemeData = ObjContext.SysSchemes.ToList();
var Temp = (from A in SchemeData where A.SchemeName == "Gold"
select new ClsSchemeViewModel
{
SchemeId = A.SchemeId,
SchemeName = A.SchemeName,
DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
SchemeDetails = A.SchemeDetails
}).ToList();
return Temp;
}
}
internal List < ClsSchemeViewModel > GetPlatinumScheme()
{
using(KenClientModel ObjContext = new KenClientModel())
{
var SchemeData = ObjContext.SysSchemes.ToList();
var Temp = (from A in SchemeData where A.SchemeName == "Platinum "
select new ClsSchemeViewModel
{
SchemeId = A.SchemeId,
SchemeName = A.SchemeName,
DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
SchemeDetails = A.SchemeDetails
}).ToList();
return Temp;
}
}
internal List < ClsSchemeViewModel > GetEnterPriseScheme()
{
using(KenClientModel ObjContext = new KenClientModel())
{
var SchemeData = ObjContext.SysSchemes.ToList();
var Temp = (from A in SchemeData where A.SchemeName == "EnterPrise "
select new ClsSchemeViewModel
{
SchemeId = A.SchemeId,
SchemeName = A.SchemeName,
DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
SchemeDetails = A.SchemeDetails
}).ToList();
return Temp;
}
}
}
}

That is all!
Thank you.

6 Comments

Join the conversation! Your thoughts help the community grow.

Nirali Bhatti9y ago
What is KenClientModel from ClsSchemeBusiness.cs
Priti Ranjan Dash10y ago
Thanks to all
Gowtham K10y ago
Good One, Thanks for sharing
Santhakumar Munuswamy10y ago
Thanks for good article. Keep it up
Karthikeyan K10y ago
Good one...
Raja T10y ago
Good, Thanks for sharing