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

Gold

Platinum

Table

Steps

Add a Controller

Add controller

Add a View to the Controller.

Index Action Method - Right click and Add View.

Add view

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

Right Click Model Folder and Add Class.

Add class

Model class

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace KenCloudClient.Models
  7. {
  8. public class ClsSchemeViewModel
  9. {
  10. public int SchemeId
  11. {
  12. set;
  13. get;
  14. }
  16. public string SchemeName
  17. {
  18. set;
  19. get;
  20. }
  22. public decimal DiscPercentage
  23. {
  24. set;
  25. get;
  26. }
  28. public string SchemeDetails
  29. {
  30. set;
  31. get;
  32. }
  33. }
  34. }
Design the View Page for Index Action
  1. @model KenCloudClient.Models.ClsSchemeViewModel
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  7. <h2>Scheme Details</h2>
  9. <div class="container">
  10. <div class="row">
  11. @(Html.Kendo().TabStrip()
  12. .Name("tabstrip")
  13. .HtmlAttributes(new { style="heigh:300px;width=800px;"})
  14. .Items(tabstrip =>
  15. {
  16. tabstrip.Add().Text("Gold")
  17. .Selected(true)
  18. .Content(@<text>
  19. <div class="col-lg-11" style="float:left;">
  20. @Html.Action("Gold")
  21. </div>
  23. </text>);
  25. tabstrip.Add().Text("Platinum")
  26. .Content(@<text>
  27. <div class="row">
  28. @Html.Action("Platinum")
  29. </div>
  31. </text>);
  33. tabstrip.Add().Text("Enterprise")
  34. .Content(@<text>
  35. <div class="row">
  36. @Html.Action("Enterprise")
  37. </div>
  39. </text>);
  40. })
  41. )
  42. </div>
  43. </div>
  45. <style type="text/css">
  46. #forecast {
  47. width: 360px;
  48. height: 337px;
  49. margin: 30px auto;
  50. padding: 80px 15px 0 15px;
  51. background: url('@Url.Content("~/Content/web/tabstrip/forecast.png")') transparent no-repeat 0 0;
  52. }
  54. .sunny, .cloudy, .rainy {
  55. display: inline-block;
  56. margin: 20px 0 20px 10px;
  57. width: 128px;
  58. height: 128px;
  59. background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;
  60. }
  62. .cloudy{
  63. background-position: -128px 0;
  64. }
  66. .rainy{
  67. background-position: -256px 0;
  68. }
  70. .weather {
  71. width: 800px;
  72. padding: 40px 0 0 0;
  73. float:left;
  74. }
  76. #forecast h2 {
  77. font-weight: lighter;
  78. font-size: 5em;
  79. padding: 0;
  80. margin: 0;
  81. }
  83. #forecast h2 span {
  84. background: none;
  85. padding-left: 5px;
  86. font-size: .5em;
  87. vertical-align: top;
  88. }
  90. #forecast p {
  91. margin: 0;
  92. padding: 0;
  93. }
  94. </style>
Explanation to the View Page

View Page

At The Controller

Declare ActionResult for Tab Item like Gold, Platinum, and Enterprise.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using KenCloudClient.Models;
  8. namespace KenCloudClient.Controllers
  9. {
  10. public class SchemeController : Controller
  11. {
  12. ClsSchemeBusiness ClsBusiness = new ClsSchemeBusiness();
  14. // GET: Scheme
  15. public ActionResult Index()
  16. {
  17. return View();
  18. }
  20. public ActionResult Gold()
  21. {
  22. #region -- Action Method for Gold --
  24. var data = ClsBusiness.GetGoldScheme().ToList();
  26. ViewBag.GoldData = data;
  28. return View();
  30. #endregion
  31. }
  32. public ActionResult Platinum()
  33. {
  34. #region -- Action Method For Platinum --
  36. var data = ClsBusiness.GetPlatinumScheme().ToList();
  38. ViewBag.PlatinumData = data;
  40. return View();
  42. #endregion
  43. }
  44. public ActionResult EnterPrise()
  45. {
  46. #region -- Action Method For EnterPrise --
  48. var data = ClsBusiness.GetEnterPriseScheme().ToList();
  50. ViewBag.EnterPriseData = data;
  52. return View();
  54. #endregion
  55. }
  57. }
  58. }
Add three different view pages for the TabPages.

These Views will display inside each TabPages.

Gold.cshtml
  1. @{
  2. Layout = "";
  3. }
  5. <h2>Gold</h2>
  7. <div class="col-lg-7" style=" float:left;">
  8. @{
  9. if (ViewBag.GoldData != null)
  10. {
  11. // Specify the type of the grid
  12. @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.GoldData)
  13. .Name("GoldGrid")
  14. .Columns(columns =>
  15. {
  16. columns.Bound(p => p.SchemeId).Visible(false);
  17. columns.Bound(p => p.SchemeName).Width(200);
  18. columns.Bound(p => p.DiscPercentage).Width(200);
  19. columns.Bound(p => p.SchemeDetails).Width(300);
  20. })
  21. .Pageable()
  22. .Selectable(X => X.Mode(GridSelectionMode.Single))
  23. .Filterable()
  24. .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
  25. .Events(ev => ev.Change("onchange"))
  26. )
  27. }
  28. }
  30. </div>
Platinum.cshtml
  1. @{
  2. Layout = "";
  3. }
  5. <h2>Platinum</h2>
  7. <div class="col-lg-7" style=" float:left;">
  8. @{
  9. if (ViewBag.PlatinumData != null)
  10. {
  11. // Specify the type of the grid
  12. @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.PlatinumData)
  13. .Name("PlatinumGrid")
  14. .Columns(columns =>
  15. {
  16. columns.Bound(p => p.SchemeId);
  17. columns.Bound(p => p.SchemeName);
  18. columns.Bound(p => p.DiscPercentage);
  19. columns.Bound(p => p.SchemeDetails);
  20. })
  21. .Pageable()
  22. .Selectable(X => X.Mode(GridSelectionMode.Single))
  23. .Filterable()
  24. .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
  25. .Events(ev => ev.Change("onchange"))
  26. )
  27. }
  28. }
  30. </div>
Enterprise.cshtml
  1. @{
  2. Layout = "";
  3. }
  5. <h2>EnterPrise</h2>
  8. <div class="col-lg-7" style=" float:left;">
  9. @{
  10. if (ViewBag.EnterPriseData != null)
  11. {
  12. // Specify the type of the grid
  13. @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.EnterPriseData)
  14. .Name("EnterPriseGrid")
  15. .Columns(columns =>
  16. {
  17. columns.Bound(p => p.SchemeId);
  18. columns.Bound(p => p.SchemeName);
  19. columns.Bound(p => p.DiscPercentage);
  20. columns.Bound(p => p.SchemeDetails);
  21. })
  22. .Pageable()
  23. .Selectable(X => X.Mode(GridSelectionMode.Single))
  24. .Filterable()
  25. .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
  26. .Events(ev => ev.Change("onchange"))
  27. )
  28. }
  29. }
  31. </div>
Business Logic Code at ClsSchemeBusiness.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using KenCloudClient.Models;
  6. namespace KenCloudClient.Models
  7. {
  8. public class ClsSchemeBusiness
  9. {
  10. internal List < ClsSchemeViewModel > GetGoldScheme()
  11. {
  12. using(KenClientModel ObjContext = new KenClientModel())
  13. {
  14. var SchemeData = ObjContext.SysSchemes.ToList();
  15. var Temp = (from A in SchemeData where A.SchemeName == "Gold"
  16. select new ClsSchemeViewModel
  17. {
  18. SchemeId = A.SchemeId,
  19. SchemeName = A.SchemeName,
  20. DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
  21. SchemeDetails = A.SchemeDetails
  22. }).ToList();
  23. return Temp;
  24. }
  25. }
  26. internal List < ClsSchemeViewModel > GetPlatinumScheme()
  27. {
  28. using(KenClientModel ObjContext = new KenClientModel())
  29. {
  30. var SchemeData = ObjContext.SysSchemes.ToList();
  31. var Temp = (from A in SchemeData where A.SchemeName == "Platinum "
  32. select new ClsSchemeViewModel
  33. {
  34. SchemeId = A.SchemeId,
  35. SchemeName = A.SchemeName,
  36. DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
  37. SchemeDetails = A.SchemeDetails
  38. }).ToList();
  39. return Temp;
  40. }
  41. }
  42. internal List < ClsSchemeViewModel > GetEnterPriseScheme()
  43. {
  44. using(KenClientModel ObjContext = new KenClientModel())
  45. {
  46. var SchemeData = ObjContext.SysSchemes.ToList();
  47. var Temp = (from A in SchemeData where A.SchemeName == "EnterPrise "
  48. select new ClsSchemeViewModel
  49. {
  50. SchemeId = A.SchemeId,
  51. SchemeName = A.SchemeName,
  52. DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
  53. SchemeDetails = A.SchemeDetails
  54. }).ToList();
  55. return Temp;
  56. }
  57. }
  58. }
  59. }
That is all!
Thank you.