Cannot use tabstrip with SchedulerEditorTemplate

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    49 posts
    Member since:
    Nov 2013

    Posted 07 Dec 2016 Link to this post

    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

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    483 posts

    Posted 08 Dec 2016 Link to this post

    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.
Back to Top