0

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

问题是调度程序似乎显示在某个空容器后面。当我在手机（iPhone 5）上尝试时，我只看到调度程序标题的一小部分。

当我在javascript中挂钩Databound事件并设置“调试器”断点时，我可以看到“移动”版本被渲染（我使用谷歌浏览器开发人员工具模拟手机上的显示），但在之后事件的执行，一些 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));
}
4

1 回答 1

0

和同事一起，我们终于找到了答案。问题似乎出在剑道移动本身。如果我在移动标签条之外使用调度程序，则没有布局问题。该问题仅出现在 tabstrib 中。

这似乎是因为调度程序和 tabsrip 都添加了一个容器“.km-content”。使用 firebug 进行调试时，我们发现 tabstrip 视图的第一个“.km-content”没有相应地调整大小。

我们找到了一种使用 javascript 手动管理它的方法。为了实现这一点，我们计算了 tabstrip 的页眉和页脚之间的大小，然后我们将其分配给 tabstrip 视图的第一个“.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();
    }
}
于 2016-02-11T13:36:36.057 回答