This is a migrated thread and some comments may be shown as answers.

Cannot use tabstrip with SchedulerEditorTemplate

1 Answer 45 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Ruairi
Top achievements
Rank 1
Ruairi asked on 07 Dec 2016, 10:59 AM

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

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 08 Dec 2016, 04:08 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Scheduler
Asked by
Ruairi
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or