Dynamically load a tabstrip header from database

[Milen]

     Hallo, 

i'm trying to load a tabstrip header from database. I mean, the change Paris, New York etc with data from database. I have read this demo https://docs.telerik.com/aspnet-mvc/helpers/tabstrip/overview#model-binding 
with the chapter "Model Binding". This is the source code 

@model IEnumerable<rcMDM.Data.MN_DEF_REITER>

@(Html.Kendo().TabStrip()

    .Name("reiterStrip")     

.BindTo(Model,(item,label)=>

    {       item.Text = label.RTR_LABEL;   })  )

I have seen that the admins from this forum are from Bulgaria or they understand bulgarian, so below i want to explain my problem on bulgarian too :) 
Здравейте, 

имам малък проблем с табчетата. Правя една апликация, която трябва да зарежда динамична информация. Една от желанията ми е да използвам табовете. Искам да зареждам само самите наименования на табовете. Съдържанието като грид успях да го свържа и се зарежда, но не успях да направя същото с табовете. Ще съм много благодарен за помощта  :) 

Best wishes, 

 

[Dimitar]

Hello Milen,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Binding view data to the TabStrip title).

To achieve the desired result, a simple collection of items is returned to the view (for the demo purpose), which is then bound to the TabStrip widget as follows:

@model IEnumerable<TelerikMvcAppTabStrip.Models.Category>

@(Html.Kendo().TabStrip()
.Name("reiterStrip")
.BindTo(Model, (item, category) =>
{
 item.Text = category.CategoryName;
  item.Template.Html = category.CategoryDescription;
})
)

With the above approach , each tab's text is displayed successfully. Could you test the solution and verify that everything is working correctly on your end? 

Regards,
Dimitar
Progress Telerik

[Milen]

Hi Dimitar, 

 

the exampel is working, but when i want to connect the tabs to the database column i have a error. Hier is the View and the Controller codes. I try  to connect the infors form  column from my database called RTR_LABEL, to the tabstrips header. 

@model IEnumerable<rcMDM.Data.MN_DEF_REITER>

@{     ViewBag.Title = "Index";}

@(Html.Kendo().TabStrip()        

 .Name("reiterTab")     

 .BindTo(Model, (item, reiter) =>  

  {item.Text = reiter.RTR_LABEL;      

 // item.Template.Html = reiter.REITER_LABEL;         }))

The controller: 

 public ActionResult Index()         {             TestEntities1 db = new TestEntities1();             var model = db.MN_DEF_REITER.Include(c => c.RTR_LABEL);             return View(model.ToList()); ;         }                   }}

[Milen]

I have find the error and its done. 

[Milen]

Hi Dimitar, i have more question. Is it possible to connect the nestertab from the database?
And now i want some information from the database in the tab to display. How i can display a differnt types of data for the different tabs? 
 

[Dimitar]

Hi Milen,

In the previously attached solution each tab of the TabStrip displays different content. To achieve this, I have added a field in the Category model as follows:

public class Category
{
  public int CategoryID { get; set; }

  public string CategoryName { get; set; }

  public string CategoryDescription { get; set; }
}

Then, a controller action method could be defined that retrieves the data from the database and then pass the model data to the view:

public ActionResult Index()
{
  ViewBag.Message = "Welcome to ASP.NET MVC!";

  var model = GetCategories();

  return View(model);
}

private IEnumerable<Category> GetCategories() {
  // hardcoded data
  var categories = Enumerable.Range(0, 50).Select(i => new Category
  {
    CategoryID = i,
    CategoryName = "Category" + i,
    CategoryDescription = "<p>asdasdasd</p>"
  });

  /*  var categories = db.Categories.ToList(); */

  return categories;
}

The model data is then displayed in the tab through the item.Template:

@(Html.Kendo().TabStrip()
  .Name("reiterStrip")
  .BindTo(Model, (item, category) =>
  {
    item.Text = category.CategoryName;
    item.Template.Html = category.CategoryDescription;
  })
)

Alternatively, you could configure the ContentUrl option for the item to specifiy the remote url from which the item content will be loaded.

Regards,
Dimitar
Progress Telerik

[Milen]

Hi Dimitar, 

thanks for the answer. But first of all i want to put ot one tabstrip some nestedtabs. How can i make that? 

[Dimitar]

Hi Milen,

A clean approach for rendering the nested TabStrip could be to use a helper method as follows:

@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
  {
    tabstrip.Add().Text("Paris")
      .Selected(true)
      .Content(@<text>
        @RenderTabStrip()
      </text>);
    })
)

@helper RenderTabStrip()
{
  @(Html.Kendo().TabStrip()
    .Name("nestedTabStrip")
      .Items(t =>
      {
         t.Add()
           .Text("Nested1")
           .Selected(true)
           .Content("asdasdas");
          })
      )
}

Regards,
Dimitar
Progress Telerik

[Milen]

Hi Dimitar, 

 

thanks for the answer. But my question was not clear. I have a Tabstrip, who get dynamic headers from Database column. I want now for this dynamic tabs a dynamic Nested Tabstrip. 

@(Html.Kendo().TabStrip()         .Name("reiterTab")     

    .BindTo(Model, (item, reiter) =>      

   {         item.Text = reiter.RTR_LABEL; 

     item.ContentUrl = ".....";                  }) )

I am new with Kendo and i cant understand, who to bind the Tabstrip and the Nestedtabstrip to the database columns. 
Thans in advance!

Best regards, 
Milen

[Ianko]

Hello Milen,

I am not sure whether you need to setup the ContentUrl field if you want to populate content from the model. However, mixing all the information provided by Dimitar can be used to have the nested tabstrip bound to a model's field. I am attaching an example project so that you can check that out. 

If, however, this still does not help you out with your particular scenario, make sure to update the project with the difficulties you have and attach it to your message so that we are able to properly understand the case you have. 

Regards,
Ianko
Progress Telerik