Setting Kendo Tabstrip inside the template of Kendo Scheduler

Question

When double click on "editable" enabled Kendo Scheduler, a preset template window pops up. I am wondering if there is any way that I can add a Kendo TabStrip control to that window.

Answer 1

You need to do couple of things to achieve that:

1. Create a custom template

   <div id="scheduler"></div>
   <script id="customEditorTemplate" type="text/x-kendo-template">
       <div id="tabstrip">
           <ul>
               <li id="tab1">Tab 1</li>
               <li>Tab 2</li>
           </ul>
           <div>Content 1</div>
           <div>Content 2</div>
       </div>
   </script>
   

2. Configure custom template in editable section

3. Attach the tab strip component in edit section

   <script>
       $("#scheduler").kendoScheduler({
           date: new Date("2013/6/6"),
           dataSource: [
               {
                   start: new Date("2013/6/6 08:00 AM"),
                   end: new Date("2013/6/6 09:00 AM"),
                   title: "Breakfast"
               }
           ],
           editable: {
               template: $("#customEditorTemplate").html()
           },
           edit: function (e) {
               $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab($("#tab1"));
           }
       });
   </script>
   

Sample code: http://runner.telerik.io/fullscreen/ofuHU

Hope that helps.