Cannot use tabstrip with SchedulerEditorTemplate

[Ruairi]

Hi,
We have an application which uses a kendo scheduler. When the user clicks on a calendar entry it brings up a popup window. We now require further information on this window and so need it to have tabs. We use kendo tabstrips elsewhere in the project successfully. However, when we use them in the ScheduleEditorTemplate we cannot add content to the tabs.
This code in ScheduleEditorTemplate works and produces empty tabs.

@using System.Web.Mvc.Html

@(Html.Kendo().TabStrip().Name("ts").Items(it =>
{
       it.Add().Text("t1").Selected(true).Content("");
       it.Add().Text("t2").Selected(false).Content("");

}))

However adding even very simple content does not work.

@using System.Web.Mvc.Html

@(Html.Kendo().TabStrip().Name("ts").Items(it =>
{
       it.Add().Text("t1").Selected(true).Content(@<text>apples</text>);
       it.Add().Text("t2").Selected(false).Content("");

}))
It brings up the following error:
kendo.all.min.js:9 Uncaught Error: Invalid template:'<div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="ts"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default"><span class="k-link">t2</span></li><li class="k-item k-state-default k-state-active"><a class="k-link" href="#ts-2">t1</a></li></ul><div class="k-content" id="ts-1"></div><div class="k-content k-state-active" id="ts-2" style="display:block"><p>just testing partial view</p></div></div></div><script>                jQuery(function(){jQuery("\#ts").kendoTabStrip({});});</script>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="ts"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default"><span class="k-link">t2</span></li><li class="k-item k-state-default k-state-active"><a class="k-link" href="';ts-2">t1</a></li></ul><div class="k-content" id="ts-1"></div><div class="k-content k-state-active" id="ts-2" style="display:block"><p>just testing partial view</p></div></div></div><script>                jQuery(function(){jQuery("#ts").kendoTabStrip({});});</script>;$kendoOutput+=;}return $kendoOutput;'
    at Object.compile (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:9:7347)
    at Object.s [as template] (http://localhost:57044/Scripts/jquery-1.8.3.min.js:2:15711)
    at o._buildEditTemplate (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:48:22217)
    at o.editEvent (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:48:28684)
    at init._createPopupEditor (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:49:19820)
    at init._editEvent (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:49:17342)
    at init.editEvent (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:49:17277)
    at o.t.options.editable.t._viewEditHandler (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:49:21566)
    at o.trigger (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:9:6374)
    at HTMLDivElement.<anonymous> (http://localhost:57044/Scripts/kendo/2015.1.429/kendo.all.min.js:45:7913)

I have been trying for quite a while to get this to work and would appreciate some help.
Best Regards,
Tyler

[Veselin Tsvetanov]

Hi Tyler,

As far as I can understand, you are trying to place Content in a TabStrip HTML helper, which is placed within a Scheduler Edit template. As you correctly noted, the <text> content of the TabStrip causes the Editor template to become invalid.

What I could suggest you to overcome this limitation is to initiate the TabStrip as a Kendo JavaScript widget in the Edit event of the Scheduler (instead of using HTML helper). To do that, you will have the Scheduler to point to a valid Template ID within your view:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
    .Editable(e => e.TemplateId("temp"))
    .Events(e => e.Edit("onEdit"))
    .Name("scheduler")
.................

and the Template:

<script id="temp" type="text/x-kendo-template">
    <div id="tabstrip">
        <ul>
            <li class="k-state-active">t1
            </li>
            <li>t2
            </li>
        </ul>
        <div>
            <p>apples</p>
        </div>
        <div>
            <p>oranges</p>
        </div>
    </div>
</script>

and the Edit event handler:

function onEdit(e) {
    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });
}

Regards,
Veselin Tsvetanov
Telerik by Progress