Kendo Tabstrip with dynamic content in a Partial View

Question

I am new to ASP.NET MVC. I am facing one or other issues to design the layout for below scenario. Could you someone help me with a solution and I will definitely appreciate your help.

The requirement is:

This is an existing application. While loading view there is a Master View and inside few partial views already defined.

In one of the Partial view, I need to have a same layout multiple times on demand. It is depends on the user how many required. may be 1 or 2 or more. We are using Telerik Kendo controls extensively in our UI and in existing View we strongly typed Model object with View.

I would like to go with Kendo Tabstrips control and add Tab dynamically when required by the user. Also, the layout is exactly same, So, would like to design (Html table with many controls like textbox, dropdown etc.) each tab layout as Partial View so that I can reuse the design. Please let me know whether this approach is best or any better approach is available.

I need to get the entire data when the user Submit the master view . Each main partial View contains and the parent of the Tabstrips Partial view also contains a but not defined for each tabstrip partial view as I need data as collection of objects in one of the property in Parent Partial View Model Object.

Can you please let me know how to design model object for each tabs(Partial View) as well as Parent Partial View. it could be good, if you could show a small example code.

The below are the issues faced during designing this

1. Unable to add inside another as getting below error

Inline markup blocks (@

Content

) cannot be nested. Only one level of inline markup is allowed.

@(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb =>    pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(@<text>
<form id="frm_@(panelName)" onsubmit="DisableEvent(event)">
<div style="width:100%; height:auto;">
    <button class="k-button">Add new PCG</button>
    @(Html.Kendo().TabStrip()
    .Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
   .Items(items =>
   {
       items.Add()
           .Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
           .Encoded(false)
           .Selected(true)
           .HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
           //.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
           .Content(@<text>@(Html.Partial("_PCGTab"))</text>);
   })
    )
</div>
</form>
</text>)))

2.Then Changed the design as shown below. defined partial view in Parent View

@helper RenderPCGTab()
{

<div style="width:100%; height:auto;">
    <button class="k-button">Add new PCG</button>
    @(Html.Kendo().TabStrip()
    .Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
   .Items(items =>
   {
       items.Add()
           .Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
           .Encoded(false)
           .Selected(true)
           .HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
           //.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
           .Content(@<text>@(Html.Partial("_PCGTab"))</text>);
   })
    )
</div>

}

and designed Kendo panel as shown below the Parent Partial View

@(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(@<text>
 <form id="frm_@(panelName)" onsubmit="DisableEvent(event)">
 @RenderPCGTab()
</form>
</text>)))

Answer 1

Since you use a strongly typed View, I would recommend using a Tuple as the model. The Item1 would hold the required model details, while Item2 would hold the required number of tabs (it holds the names of the tabs).

@model Tuple<[Model],List<string>>

Now create a Kendo Tabstrip control, with dynamic items (based on model's Item2)

 @(Html.Kendo().TabStrip()
      .Name("KendoTabStrip")                //You need to dynamically change the name by appending a unique parameter in case you need multiple Tabstrips
      .Animation(animation =>
          animation.Open(effect =>
              effect.Fade(FadeDirection.In)))
      .Items(tabstrip =>
      {
          var TabItemIndex = 0;
          foreach (var TabItem in Model.Item2)
          {
              tabstrip.Add().Text(TabItem)
             .Selected(false)
             .HtmlAttributes(new { id = "TabStripButton" + TabItem + "_" + TabItemIndex, title = TabItem})    //Generate a dynamic ID for each Tab
             .Content(" ");
              TabItemIndex++;
          }
      })
        )

Once you have created the structure of the Tabstrip, you need to populate each tab with its corresponding content

In the View (Parent Partial View) itself, create a Ready function for the tabstrip and serialize the object using JSON

$(("KendoTabStrip")).ready(function () {
    _TBSModelName = @Html.Raw(JsonConvert.SerializeObject(this.Model.Item1))
    TabStripUserControl();
});

Note: This is in case you need the Model Data in your child partial view.

Create a javascript file and place the function TabStripUserControl() in it. This function will create your content and place it into the tab.

function TabStripUserControl()
{
var _LocalTBSModel = _TBSModelName
var items = "#KendoTabStrip" + " .k-tabstrip-items";
$(items).click(function (z) {

}
);
}

Inside the function (click function), create a div and provide a dynamic ID for the same before placing it inside the tab using Javascript/JQuery.

var div = $("<div/>");

Use Ajax call to call your controller, which in turn will call your Child Partial View (which contains HTML controls) and render the partial view inside the above created div on Ajax call's success.

            $.ajax({
                url: 'Controller/ActionMethod',
                data: JSON.stringify({ Value: "SomeValue" }),
                type: 'POST',
                contentType: 'application/json;',
                async: false,
                success: function (data) {
                    div = data;
                }
            });

Hope this helps.