2

KendoUI PagekendoTabStripに示されているとおりに使用しています。私の場合、各 div で部分ビューをレンダリングしました。私の部分的なビューのいくつかでは、追加があります。kendoGrid

問題

任意のタブでページをリロードして、kendoGridそれを含むタブに移動すると、正しく機能しません。例:タブ #0 を使用していて、ページネーションを含むタブ #3 に移動するとkendoGrid、ページネーションは表示されません。しかし、リロードすると、ページネーションは正常に機能します。

Grids中の作品はどうすればいいTabStripですか？

どんな助けでも大歓迎です。

アップデート

私の実装tabstrip

    $("#tabStrip").kendoTabStrip({
        animation: { open: { effects: false} },
        select: function (e) {
            document.location.hash = 'tab-' + $(e.item).index();
        }
    });

    var tabStrip = $('#tabStrip').data('kendoTabStrip');
    var tabId = 0;
    var scheduledId = 0;
    if (document.location.hash.match(/tab-/) == 'tab-') {
        tabId = document.location.hash.substr(5);
    }
    if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
        tabId = 1;
        scheduledId = document.location.hash.substr(11);
        editSchedule('/admin/Course/Scheduled/' + scheduledId +  '/Edit/' );

    }
    tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));

そのため、コントローラーからいくつかの書き換えを行う必要があります。

4

2 に答える 2

2

この問題を解決するには、次のように変更する必要があります。

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    }
});

為に：

$("#tabStrip").kendoTabStrip({
    animation: { open: { effects: false} },
    select: function (e) {
        document.location.hash = 'tab-' + $(e.item).index();
    },
    activate: function(e) {
        $(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
            $(this).data("kendoGrid").refresh();
        });                
    }
});

イベントactivateは「タブが表示された直後で、アニメーションの終了前にトリガーされます」です。したがって、グリッドを更新する必要があります。これjsは、非表示の要素の幅を間違ってカウントするためです。

于 2012-09-19T11:19:28.870 に答える
1

TabStrip 内で動作するグリッドの例をまとめました: http://jsfiddle.net/dpeaep/SJ85S/。たぶん、あなたの質問であなたが求めていることの一部が欠けています。その場合は、jsfiddle を変更して問題を明確にすることができます。

HTML

<div id="tabstrip">
  <ul>
    <li>Grid 1</li>
    <li>Grid 2</li>
    <li>Grid 3</li>
  </ul>
  <div><div id="grid1"></div></div>
  <div><div id="grid2"></div></div>
  <div><div id="grid3"></div></div>
</div>

Javascript

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);

$("#grid1").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Joe", LastName: "Smith" },
      { FirstName: "Jane", LastName: "Smith" }
    ]
  }
});

$("#grid2").kendoGrid({
  columns: [
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" }
  ],
  dataSource: {
    data: [
      { FirstName: "Betty", LastName: "Lakna" },
      { FirstName: "Fumitaka", LastName: "Yamamoto" },
      { FirstName: "Fred", LastName: "Stevenson" }
    ]
  }
});

$("#grid3").kendoGrid({
  columns: [
    { field: "Title", title: "Title" },
    { field: "Year", title: "Year" }
  ],
  dataSource: {
    data: [
      { Title: "Lost in Domtar", Year: "2012" },
      { Title: "Evergreen", Year: "2012" },
      { Title: "Fields of Yellow", Year: "2010" },
      { Title: "Where the Whistle Blows", Year: "2008" }
    ]
  }
});
于 2012-08-22T13:15:27.587 に答える