Kendo Scheduler embedded in kendo mobile tabstrip

Question

I have a kendo scheduler defined in partial view. This partial view is rendered in a kendo mobile tabstrip.

The problem is that the scheduler seems to be displayed behind some empty container. As I see only a small part of the scheduler header when I try it on a mobile phone (iPhone 5).

When I hook the Databound event in javascript and I set a "debugger" break point, I can see that the "mobile" version is rendered (I used google chrome developper tools to simulate the display on a mobile phone), but right after the execution of the event, some div or other container partially cover my scheduler.

If I don't specify the ".Mobile()" attribute in the definition of the scheduler, it is displayed accordingly on my phone. But it's not the mobile version that it's rendered and I want it to be the mobile version.

I tried to display an empty scheduler and it's not working either.

Any ideas of what I'm doing wrong?

If there's any missing information to help you, feel free to ask for it.

Thank you.

The partial view :

@model List<ISchedulerEvent>
@using System.Web.UI.WebControls
@using System.Linq;
@using Kendo.Mvc.UI

<section>
<br class="clear"/>
@(Html.Kendo().Scheduler<ISchedulerEvent>()
  .Name("scheduler")
  .WorkDayStart(8,0,0)
  .WorkDayEnd(18,0,0)
  .AllDaySlot(false)
  .ShowWorkHours(true)
  .Editable(false)  
  .Mobile()    
  .Views(v =>
         {
             v.DayView();
             v.WeekView();
             v.MonthView(monthView => monthView.Selected(true));
             v.AgendaView();
         })
  .DataSource(source => source
      .Read("GetEntries", "Calendar")))    
</section>

The tabstrip definition :

@using Kendo.Mvc.UI
@using T3.Web.Application.Infrastructure.Helpers

<style>
    .km-entry:after,
    .km-entry:before
    {
        content: "\e08d";
    }

    .km-summary:after,
    .km-summary:before
    {
        content: "\e04b";
    }

    .km-calendar:after,
    .km-calendar:before
    {
        content: "\e089";
    }
</style>

<div data-role="view" id="entry" data-title="Entrée de temps" data-layout="mobile-tabstrip"></div>
<div data-role="view" id="calendar" data-title="Calendrier" data-layout="mobile-tabstrip">@Html.Action("Index", "Calendar")</div>
<div data-role="view" id="summary" data-title="Sommaire" data-layout="mobile-tabstrip"></div>
<div data-role="view" id="profile" data-title="Profil utilisateur" data-layout="mobile-tabstrip" ></div>

<div id="maintabstrip" data-role="layout" data-id="mobile-tabstrip">
  <p>TabStrip</p>
  <div data-role="footer">
    <div id="tabstrip" data-role="tabstrip">
        <a href="#entry" data-icon="entry">Entrée de temps</a>
        <a href="#calendar" data-icon="calendar">Calendrier</a>
        <a href="#summary" data-icon="summary">Sommaire</a>
        <a href="#profile" data-icon="contacts">Utilisateur</a>
    </div>
  </div>
</div>

<script>
    var app = new kendo.mobile.Application($(document.body), { skin: "flat", useNativeScrolling: true });
</script>

The Controller for the partial view

[HttpGet]
public ActionResult Index()
{
   return this.PartialView("_Calendar");
}

The controller that returns the data for the scheduler

public ActionResult GetEntries([DataSourceRequest]DataSourceRequest request)
{
   var entries = _presenter.GetEntries(base.GetUserAccount().Id);
   return Json(entries.ToDataSourceResult(request));
}

Answer 1

With a colleague, we finally found the answer. The problem seems to be within kendo-mobile itself. If I used the scheduler outside the mobile tabstrip, there was no layout problem. The problem occured only with the tabstrib.

It seems to come from the fact that both the scheduler and the tabsrip add a container ".km-content". When debugging using firebug we found that the first ".km-content" of the tabstrip view, was not resized accordingly.

We found a way to manage it manually using javascript. To achieve this we calculate the size between the header and footer of the tabstrip then we assigned it the to first ".km-content" of the tabstrip view. When it's done, we force the scheduler to update it's own size to fit the new available height.

function resizeView() {

    var windowHeight = $(window).height();
    var tabstripFooterHeight = $(".km-footer").height();
    var tabstripHeaderHeight = $(".km-header").height();

    var padding = (tabstripFooterHeight + tabstripHeaderHeight + 5);

    var contentHeight = windowHeight - padding;
    $(".km-view:visible").children(".km-content").first().height((contentHeight));

    tryResizeScheduler(contentHeight);
}

function tryResizeScheduler(contentHeight) {

    /* Is the calendar tab */
    if (_app.view().id === "/") {
        var schedulerHeight = contentHeight - 1;

        var scheduler = $("#entryScheduler").data("kendoScheduler");
        scheduler.wrapper.height(schedulerHeight);
        scheduler.resize();
    }
}