Tabstrip Editor within Tabstrip

[Emily]

I have a Tabstrip within a Grid. When I'm under the "Branch" tab and I click on Add new record or Edit, I want a popup editor to show up with another Tabstrip inside it.

Right now, the popup editor only show up when the popup editor template "PopupBranchEditor" has only plain markup with no Tabstrip inside it. As soon as I add the Tabstrip in the popup editor template, I get the Invalid Template error when I click on Add new record or Edit.

 

Here's my code where I'm calling the popup editor template:

<script id="TabStripTemplate" type="text/kendo">
@(Html.Kendo().TabStrip()
.Name("TabStrip_#=InstitutionId#")
.SelectedIndex(0)
.Items(items =>
{

items.Add().Text("Branches")
.Content(@<text>
@(Html.Kendo().Grid<BranchViewModel>().Name("Branches_#=InstitutionId#").Columns(column =>
{
column.Bound(branch => branch.Address1);
column.Command(command =>
{
command.Edit();
command.Destroy();
})
.Width(275);
})
.DataSource(d => d
.Ajax().ServerOperation(false)
.Sort(sort => sort.Add("BranchCRD").Ascending())
.Read(read => read.Action("Read", "Branches", new { id = "#=InstitutionId#" }))
.Create(create => create.Action("Create", "Branches", new { id = "#=InstitutionId#" }))
.Update(update => update.Action("Update", "Branches"))
.Destroy(destroy => destroy.Action("Delete", "Branches"))
.Events(events => events.Sync("Sync"))
.Model(model =>
{
model.Id(branch => branch.BranchId);    // Specify the property which is the unique identifier of the model
model.Field(branch => branch.BranchId).Editable(false); // Make the ID property not editable
})
.PageSize(5)
)
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupBranchEditor"))
.Filterable(filterable => filterable
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.IsEqualTo("Is equal to")
)))
.Pageable(pageable => pageable
.PageSizes(new[] { 5, 10, 25, 50 })
.ButtonCount(10))
.Sortable()
.ToolBar(toolbar => toolbar.Create())
.ToClientTemplate()
)
</text>
);

})
.ToClientTemplate())
</script>

 

Here's the popup editor template with the Tabstrip:

@(Html.Kendo().TabStrip().Animation(false)
                .Name("tabstrip")
                .Items(tabstrip =>
                {

                  tabstrip.Add().Text("Contact")
                                  .Selected(true)
                                  .Content(@<text>
                                    <div class="form-horizontal">
                                      <div class="form-group">
                                        @Html.LabelFor(model => model.Address1, new { @class = "col-sm-5 control-label" })
                                        <div>
                                          @Html.EditorFor(model => model.Address1)
                                        </div>
                                      </div>
                                    </div>
                                  </text>);


        })
                                      .ToClientTemplate()
)

 

How do I get the Tabstrip to work in the popup editor template that's inside another Tabstrip?

[Dimo]

Hello Emily,

Please do not submit duplicate support tickets and forum threads, thank you.

===

Normally, you would need a ToClientTemplate() statement at the end of the TabStrip, which is inside the popup edit template. This takes care of escaping hash characters inside the TabStrip markup, initialization script, as well as escaping nested <script> tags.

However, the TabStrip is in a nested client template, and ToClientTemplate() is not aware of this. As a result, the hash characters will be unescaped one step too early, which will generate an "invalid template error".

A possible way to proceed in this case is to use a client-side TabStrip widget instead of an MVC wrapper, inside the popup editor template:

<div id="tabstrip"><ul><li class="k-state-active">tab 1</li><li>tab 2</li></ul><div>content 1</div><div>content 2</div></div><script>$(function(){$("\\#tabstrip").kendoTabStrip();});<\/script>

Note that there should be no new lines in the above HTML markup, because this snippet will be used inside a Javascript string variable.

More information about the TabStrip's Javascript configuration syntax is avaiable here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip

Regards,
Dimo
Telerik