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?