Планировщик Kendo, встроенный в ленту для мобильных телефонов kendo

Question

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

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

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

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

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