剑道调度器嵌入在剑道移动标签条

我有一个部分视图中定义的剑道调度器。这个局部视图在一个kendo移动标签栏中呈现。剑道调度器嵌入在剑道移动标签条

问题是调度程序似乎显示在某个空容器的后面。正如我在手机（iPhone 5）上试用时看到的只是调度程序标题的一小部分。我可以看到“移动”版本被渲染（我使用谷歌Chrome浏览器开发工具来模拟手机上的显示），当我在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)); 
}

来源

2015-12-22 Fid

与同事的控制器，我们终于找到了答案。这个问题似乎在kendo-mobile本身。如果我在移动标签页之外使用调度程序，则没有布局问题。问题只发生在tabstrib。

它似乎来自调度程序和tabsrip都添加容器“.km-content”的事实。当使用萤火虫进行调试时，我们发现tabtrip视图的第一个“.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(); 
    } 
}

来源

2016-02-11 13:36:36 Fid

剑道调度器嵌入在剑道移动标签条

回答

相关问题