Kendo 调度程序嵌入在 kendo 移动标签栏中

Question

我在部分视图中定义了一个 kendo 调度程序。此部分视图呈现在 kendo 移动选项卡中。

问题是调度程序似乎显示在某个空容器后面。当我在移动设备上尝试时，我只看到调度程序 header 的一小部分 phone (iPhone 5).

当我在 javascript 中挂接 Databound 事件并设置 "debugger" 断点时，我可以看到呈现 "mobile" 版本（我使用 google chrome 用于模拟移动设备上显示的开发人员工具 phone)，但在事件执行后，一些 div 或其他容器部分覆盖了我的调度程序。

如果我没有在调度程序的定义中指定“.Mobile()”属性，它会相应地显示在我的 phone 上。但它不是呈现的移动版本，我希望它是移动版本。

我试图显示一个空的调度程序，但它也不起作用。

对我做错了什么有什么想法吗？

如果有任何遗漏的信息可以帮助您，请随时提出要求。

谢谢。

部分观点：

@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");
}

控制器returns调度程序的数据

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

Kendo 调度程序嵌入在 kendo 移动标签栏中

Kendo Scheduler embedded in kendo mobile tabstrip

kendo-ui

kendo-mobile

kendo-scheduler

kendo-tabstrip