Question

我在局部视图中定义了一个kendo调度程序。此部分视图在kendo移动标签页中呈现。

问题是调度程序似乎显示在一些空容器后面。我在移动电话（iPhone 5）上尝试时只看到调度程序标题的一小部分。

当我在javascript中挂钩数据绑定事件时，我设置了一个＆＃34;调试器＆＃34;突破点，我可以看到＆＃34;移动＆＃34;渲染版本（我使用谷歌浏览器开发工具模拟手机上的显示），但在事件执行后，一些div或其他容器部分覆盖我的调度程序。

如果我没有指定＆＃34; .Mobile（）＆＃34;调度程序定义中的属性，它会相应地显示在我的手机上。但它不是它所呈现的移动版本，我希望它是移动版本。

我试图显示一个空的调度程序，但它也没有工作。

我做错了什么想法？

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

谢谢。

局部视图：

@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都添加了一个容器＆＃34; .km-content＆＃34;使用firebug进行调试时，我们发现第一个＆＃34; .km-content＆＃34;标签视图的视图未相应调整大小。

我们找到了一种使用javascript手动管理它的方法。为了达到这个目的，我们计算了tabtrip的页眉和页脚之间的大小，然后我们将它分配给第一个＆＃34; .km-content＆＃34;标签视图。完成后，我们强制调度程序更新自己的大小以适应新的可用高度。

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 Scheduler嵌入在kendo移动标签中

1 个答案: