Scheduler embedded in TabStrip - multiple All Day events issue

[Ruairi]

Im using .Net 4.5 MVC and Kendo UI release 2017.3.913 with the MVC wrappers.

I have a Kendo scheduler embedded in a Kendo TabStrip and it works fine so far with exception of displaying All Day events.

A single All Day event displays fine however when I create multiple all day events only the first is ever displayed in the All Day row of the scheduler. (see image Scheduler_InTabStrip)

When I moved the exact same Scheduler out of the TabStrip it displays the multiple All Day events fine (see image Scheduler_OutTabStrip). Im not doing anything fancy css wise in the TabStrip but Im  guessing the TabStrip style/css formatting is affecting the Scheduler somehow.

[Neli]

Hi Tyler,

The Scheduler should be initialized when the tab, in which it is nested is made visible. To achieve this, you could subscribe to the TabStrip activate event.

activate: onActivate,

In the event handler, you could check if the currently selected tab is the one in which the Scheduler is nested. To avoid duplicate initialization, you should check, if the Scheduler widget have been already initialized. 

var isInitialized = false;

function onActivate(e){
if(e.item.innerText == 'Scheduler Tab' && isInitialized === false){
isInitialized = true;
$("#scheduler").kendoScheduler({
   ...
   })

Described approach is used in the enclosed Dojo example. I hope you will find it helpful.

Regards,
Neli
Progress Telerik

[Ruairi]

Thanks Neli however I'm using the MVC Wrappers so Ive already initialised the scheduler.

Are you suggesting that I dont use the MVC wrapper and use HTML initialisation instead? 

[Ruairi]

Post from Neli on Teleriks Support to wort out problem with MBC wrappers.

If you prefer to use the MVC wrappers, then you could subscribe to the activate event of the TabStrip. 

@(Html.Kendo().TabStrip()
      .Name("tabstrip")
      .Events(e=>e.Activate("onActivate"))

The Scheduler widget will be already initialized and you could get a reference to it. Using the viewName method, you could check the name of the current view of the Scheduler. Then, the view could be explicitly set to the widget, by using the view method. This approach will refresh the view.

function onActivate(e){
 var scheduler = $("#scheduler").data("kendoScheduler");
 var view = scheduler.viewName();
 scheduler.view(view);
}

I hope you will find the enclosed Dojo example helpful.

I have copied this reply in the Forum thread concerning the same topic. I would suggest to keep the conversation in just one thread. This way we will avoid thread duplication.