Kendo Scheduler встроен в мобильную вкладку kendo

Question

У меня есть планировщик кендо, определенный в частичном представлении. Это частичное представление отображается на вкладке мобильного кендо.

Проблема в том, что планировщик, кажется, отображается за каким-то пустым контейнером. Как я вижу только небольшую часть заголовка планировщика, когда я пробую его на мобильном телефоне (iPhone 5).

Когда я перехватываю событие Databound в javascript и устанавливаю точку останова "отладчик", я вижу, что "мобильная" версия отображается (я использовал инструменты разработчика Google Chrome для имитации отображения на мобильном телефоне), но сразу после Выполнение события, некоторый div или другой контейнер частично покрывают мой планировщик.

Если я не укажу атрибут ".Mobile()" в определении планировщика, он будет отображаться соответствующим образом на моем телефоне. Но это не мобильная версия, которая отображается, и я хочу, чтобы это была мобильная версия.

Я попытался отобразить пустой планировщик, и он тоже не работает.

Есть идеи, что я делаю не так?

Если вам не хватает какой-либо информации, попросите об этом.

Спасибо.

Частичное представление:

@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>

Определение вкладки:

@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>

Контроллер для частичного просмотра

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

Контроллер, который возвращает данные для планировщика

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

Answer 1

С коллегой мы наконец-то нашли ответ. Кажется, проблема в самом кендо-мобиле. Если бы я использовал планировщик вне мобильной вкладки, проблем с макетом не было. Проблема возникла только с вкладкой.

Кажется, это происходит из-за того, что и планировщик, и вкладка табуляции добавляют контейнер ".km-content". При отладке с использованием firebug мы обнаружили, что первый ".km-content" представления tabstrip не был соответственно изменен.

Мы нашли способ управлять им вручную, используя JavaScript. Чтобы достичь этого, мы вычисляем размер между верхним и нижним колонтитулом вкладки, а затем присваиваем его первому ".km-content" представления вкладок. Когда это будет сделано, мы заставим планировщик обновить его собственный размер, чтобы соответствовать новой доступной высоте.

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();
    }
}