2

我正在使用KendoUI PagekendoTabStrip上显示的内容。就我而言，在每个 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));

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

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 回答