0

设置
我有一个 Telerik Kendo UI TabStrip，在 UpdatePanel 中有多个选项卡...

<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
     <ul>
         <li>Attendance</li>
         <li>Grades</li>
         <li>Gradebook</li>
         <li>PFT</li>
         <li>Scheduling</li>
         <li>Miscellaneous</li>
         <li>Parent Data Changing</li>
     </ul>
 </div>
 </asp:UpdatePanel>

...然后我稍后用 javascript 连接起来...

var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
     animation: {
         open: {
             effects: "fadeIn"
         }
     },
     select: onMainTabSelect
}).data("kendoTabStrip");

场景
用户将点击各个选项卡，每个选项卡内部都是我们门户的设置。当他们在选项卡中并对设置进行更改时，期望他们将单击“保存”按钮，这将通过 ajax 执行回发到服务器，因为它位于更新面板中。

当前行为
在回发发生并且ul内容返回后，我重新应用 kendoTabStrip 设置函数调用，这使得没有选择任何选项卡。这对用户来说就像页面现在是空的，当它只有内容时。

期望的结果
我想要做的是，在部分回发发生并且 UpdatePanel 发回之后 ul，我想重新选择用户之前选择的选项卡。

已经
有效的方法我已经有办法保留用户单击的选项卡：

var onMainTabSelect = function (e) {
        tabToSelect = e.item;
        console.log("onTabSelect --> ", e.item.textContent);
}

以及在调用时重置所选选项卡的功能：

function setMainTab() {
    if (!jQuery.isEmptyObject(tabToSelect)) {
        var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
        console.log("Attempt to set tab to ", tabToSelect.textContent);
        tabStrip.select(tabToSelect);
    } else {
        console.log("tabToSelect was empty");
    }
}

什么不起作用 我的假设是，当我setMainTab在回发后调用时，Kendo TabStrip 会说：“嘿，该选项卡已被选中”：

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    BindControlEvents();
    setMainTab();
});

...因此，不会设置我的标签。如果我点击选项卡，然后点击噗，我所有的内容都像我期望的那样在那里。

有什么想法我可能做错了吗？

4

1 回答 1

1

我最终将onMainTabSelect方法更改为：

var onMainTabSelect = function (e) {
   tabToSelect = $(e.item).data("tabindex");
}

这让我获得了li我的ul. 我无法从剑道获得标签索引，所以我必须自己扮演角色。获得该值后，我就可以通过索引而不是选项卡对象引用本身来设置选定的选项卡。

于 2013-06-04T22:24:25.590 回答