[Solved] Progamatically adding Tab

[StevenDale]

2012.Q1

I am trying to programatically add tabs to my tabstrip. It is creating all of my tabs, however it appears to be adding the content for the last tab to all of the other tabs. Here is my example code. The content on every tab is always the last value of the variable "i". Is it possible to do this?

Thanks

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<HealthRiskAnalyzer.Models.UserQuestionairreModel>" %>

 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    QuestionairreViewer

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

     

    <% Html.Telerik().TabStrip().Name("UserQuestionairre").Items(tabstrip =>

       {
               int i = 1;


           foreach (HealthRiskAnalyzer.Models.QuestionairreCategoryModel category in Model.Categories)

           {               

               tabstrip.Add().Text(category.Name).Content(() =>

               {%>

                <ul>

                    <li><%= i.ToString() %></li>                   

                </ul>

             <%});

               i++;

           }

       }).SelectedIndex(0).Render();%>

</asp:Content>

[Daniel]

Hello Billy,

This is expected since the actions defined for the Tabs' content are executed later when rendering the Component. To avoid this behavior you should increment the parameter inside the action e.g.

Html.Telerik().TabStrip().Name("UserQuestionairre").Items(tabstrip =>
{
   int i = 1;
   foreach (HealthRiskAnalyzer.Models.QuestionairreCategoryModel category in Model.Categories)
   {
       tabstrip.Add().Text(category.Name).Content(() =>
       {%>
        <ul>
            <li><%= i++.ToString() %></li>
        </ul>
     <%});
   }
}).SelectedIndex(0).Render();

Greetings,
Daniel
the Telerik team

[StevenDale]

Your simple example works but I want to do something more complicated. I want to do something like the following but it always uses the last category in the foreach loop for all partial views:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<HealthRiskAnalyzer.Models.UserQuestionairreModel>" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.Telerik().TabStrip().Name("UserQuestionairre").Items(tabstrip =>
       {
           int i = 1;
           foreach (HealthRiskAnalyzer.Models.QuestionairreCategoryModel category in Model.Categories)
           {
               tabstrip.Add().Text(category.Name).Content(() =>
               {%>
                    <% Html.RenderPartial("MultipleChoiceQuestionView", category); %>
                <%});
           }
       }).SelectedIndex(0).Render();
     %>
</asp:Content>

Partial View (This is much more simple than what I will eventually do but it gives you the idea. Is this possible?

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HealthRiskAnalyzer.Models.QuestionairreCategoryModel>" %>
<%=Model.Name %>

[Daniel]

Hello again Billy,

In that case, I can suggest the following approaches to pass the correct Category to the partial view:

• Use the BindTo instead of the Items method to populate the tabs:
  

  <% Html.Telerik().TabStrip().Name("UserQuestionairre")
      .BindTo(Model.Categories,(tab,category) =>
           {
               tab.Text = category.Name;
               tab.Content = () => Html.RenderPartial("MultipleChoiceQuestionView", category);
           })
      .SelectedIndex(0).Render();
  %>

• Use the string overload of the Content method with the HTML Partial helper:
  

  <% Html.Telerik().TabStrip().Name("UserQuestionairre")
      .Items(tabstrip =>
     {
         foreach (HealthRiskAnalyzer.Models.QuestionairreCategoryModel category in Model.Categories)
         {
              tabstrip.Add().Text(category.Name).Content(
                     Html.Partial("MultipleChoiceQuestionView", category).ToHtmlString()
                 );
         }
     }).SelectedIndex(0).Render();
  %>

  
  

Kind regards,
Daniel
the Telerik team

[StevenDale]

The content does not appear correctly inside of the tab when I use the BindTo approach. I have attached a screenshot to demonstrate. And here is my markup: The second approach does seem to work though.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<HealthRiskAnalyzer.Models.UserQuestionairreModel>" %>

<%@ Import Namespace="HealthRiskAnalyzer.Models" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    QuestionairreViewer
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.Telerik().TabStrip().Name("UserQuestionairre")
    .BindTo(Model.Categories,(tab,category) =>
         {
             tab.Text = category.Name;
             tab.Content = () => Html.RenderPartial("QuestionsForCategoryView", category);
         })
    .SelectedIndex(0).Render();
%>
</asp:Content>

[Daniel]

Hello Billy,

There shouldn't be a difference between the two approaches when the Render method is used. The content can be positioned outside of the tab if it is floated, but in that case there won't be a difference. Could you provide the markup for the "QuestionsForCategoryView" partial view so I can check the exact setup?

Greetings,
Daniel
the Telerik team

[StevenDale]

Here are all of the views.

QuestionairreViewer

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<HealthRiskAnalyzer.Models.UserQuestionairreModel>" %>
<%@ Import Namespace="HealthRiskAnalyzer.Models" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    QuestionairreViewer
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <%= Html.Hidden("QuestionAirreId", Model.QuestionAirreId)%>
    <%using (var form = Html.BeginForm(new { Action = "SaveQuestionairre"}))
      {%>
    <% Html.Telerik().TabStrip().Name("UserQuestionairre").Items(tabstrip =>
       {
           foreach (QuestionairreCategoryModel category in Model.Categories)
           {
               tabstrip.Add().Text(category.Name).Content(Html.Partial("QuestionsForCategoryView", category).ToHtmlString());
           }
       }).SelectedIndex(1).Render();
    %>

    <input type="submit" value="Submit" />
    <%} %>
</asp:Content>

QuestionsForCategoryView

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HealthRiskAnalyzer.Models.QuestionairreCategoryModel>" %>
<%@ Import Namespace="HealthRiskAnalyzer.Models" %>

<%= Html.Hidden("UserQuestionairreModel.Categories[" + Model.Index + "].Id", Model.Id)%>
<%
    if (Model != null)
    {
        foreach (MultipleChoiceQuestionModel multipleChoiceQuestion in Model.MultipleChoiceQuestions)
            Html.RenderPartial("MultipleChoiceQuestionView", multipleChoiceQuestion);
    }
%>

MultipleChoiceQuestionView

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HealthRiskAnalyzer.Models.MultipleChoiceQuestionModel>" %>
<%@ Import Namespace="HealthRiskAnalyzer.Models" %>


<%= Html.Hidden("UserQuestionairreModel.Categories[" + Model.Category.Index + "].MultipleChoiceQuestions[" + Model.Index + "].QuestionId", Model.QuestionId)%>
<%=Model.Question %>
<ol>
    <%
        int i = 0;
        foreach(MultipleChoiceAnswerModel answer in Model.Answers)
        {%>
        <li><%--<%:  Html.RadioButtonFor(a => a.Answers[i].Selected, answer.AnswerId)%>--%>
            <%= Html.RadioButton("UserQuestionairreModel.Categories.MultipleChoiceQuestions[" + answer.QuestionIndex + "].Answers[0].AnswerId", answer.AnswerId)%>
            <%= answer.Answer%>
        </li>
        <% i++;
    }%>
</ol>

[Daniel]

Hello again Billy,

Unfortunately, I am still not able to reproduce the problem tab's content based on the provided information. I am attaching my test project. Could you check it and tell me if I am missing something?

Kind regards,
Daniel
the Telerik team