Question

我正在使用kendoTabStrip，如KendoUI Page所示。在我的每个div的情况下，我已经呈现了部分视图。在我的一些部分观点中，我有另外kendoGrid。

问题

当我在任何标签页中重新加载页面并转到包含kendoGrid的标签页时，它无法正常运行。 例如：我在标签＃0上并转到包含kendoGrid分页的标签＃3，然后不显示分页。但是当我重新加载它时，分页工作正常。

我可以对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));

所以我需要它来从控制器进行一些重写。

Answer 1

要解决此问题，我们必须更改：

$("#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计算隐藏元素的宽度错误。

Answer 2

我整理了一个在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" }
    ]
  }
});

KendoGrid在kendoTabStrip中不起作用

2 个答案: