Планировщик кендо, встроенный в мобильную вкладку кендо

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

Проблема в том, что планировщик как бы отображается за каким-то пустым контейнером. Поскольку я вижу только небольшую часть заголовка планировщика, когда пробую его на мобильном телефоне (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));
}

kendo-ui kendo-scheduler kendo-mobile kendo-tabstrip
person Fid    schedule 22.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

Мы нашли способ управлять им вручную с помощью 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();
    }
}
person Fid    schedule 11.02.2016