Tabstrip Editor within Tabstrip

2 posts, 0 answers
  1. Emily
    Emily avatar
    4 posts
    Member since:
    Feb 2015

    Posted 23 Jun 2015 Link to this post

    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">
    .Items(items =>
    @(Html.Kendo().Grid<BranchViewModel>().Name("Branches_#=InstitutionId#").Columns(column =>
    column.Bound(branch => branch.Address1);
    column.Command(command =>
    .DataSource(d => d
    .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
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupBranchEditor"))
    .Filterable(filterable => filterable
    .Operators(operators => operators
    .ForString(str => str.Clear()
    .IsEqualTo("Is equal to")
    .Pageable(pageable => pageable
    .PageSizes(new[] { 5, 10, 25, 50 })
    .ToolBar(toolbar => toolbar.Create())


    Here's the popup editor template with the Tabstrip:

                    .Items(tabstrip =>
                                        <div class="form-horizontal">
                                          <div class="form-group">
                                            @Html.LabelFor(model => model.Address1, new { @class = "col-sm-5 control-label" })
                                              @Html.EditorFor(model => model.Address1)


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

  2. Dimo
    Dimo avatar
    8318 posts

    Posted 25 Jun 2015 Link to this post

    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:

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
Back to Top