0

部分ビューで定義された剣道スケジューラーがあります。この部分的なビューは、剣道モバイル タブストリップに表示されます。

問題は、スケジューラーが空のコンテナーの背後に表示されているように見えることです。携帯電話（iPhone 5）で試してみると、スケジューラーヘッダーのごく一部しか表示されないためです。

JavaScript で Databound イベントをフックし、「デバッガー」ブレーク ポイントを設定すると、「モバイル」バージョンがレンダリングされていることがわかります (携帯電話での表示をシミュレートするために 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));
}
4

1 に答える 1

0

同僚と一緒に、私たちはついに答えを見つけました。問題は kendo-mobile 自体にあるようです。モバイル タブストリップの外でスケジューラを使用した場合、レイアウトの問題はありませんでした。タブストリブでのみ問題が発生しました。

スケジューラとタブリップの両方がコンテナ「.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();
    }
}
于 2016-02-11T13:36:36.057 に答える