This is a migrated thread and some comments may be shown as answers.
Dynamically load a tabstrip header from database
9 Answers 57 Views
This is a migrated thread and some comments may be shown as answers.
Milen
Top achievements
Rank 1
Milen asked on 12 Jul 2018, 08:09 AM

     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, 

 

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 13 Jul 2018, 01:25 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Milen
Top achievements
Rank 1
answered on 16 Jul 2018, 09:34 AM

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()); ;         }                   }}

0
Milen
Top achievements
Rank 1
answered on 16 Jul 2018, 10:16 AM
I have find the error and its done. 
0
Milen
Top achievements
Rank 1
answered on 16 Jul 2018, 10:25 AM
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? 
 
0
Dimitar
Telerik team
answered on 17 Jul 2018, 09:57 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Milen
Top achievements
Rank 1
answered on 18 Jul 2018, 07:27 AM

Hi Dimitar, 

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

0
Dimitar
Telerik team
answered on 19 Jul 2018, 02:29 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Milen
Top achievements
Rank 1
answered on 20 Jul 2018, 11:21 AM

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

0
Ianko
Telerik team
answered on 24 Jul 2018, 10:34 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Milen
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Milen
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or