CODEWITHSUNDEEP
kendo-uiupdatepanel
Nick DeVore
Nick DeVore

Reputation: 10166

How Do I Reselect A KendoUI TabStrip After AJAX Postback in UpdatePanel

Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an 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>

...which I then wire up in javascript later...

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

Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.

Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.

Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.

What Already Works
I already have a way to preserve the tab that the user clicked on:

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

and a function to reset the selected tab whenever it is called:

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");
    }
}

What Doesn't Work My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:

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

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

...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.

Any ideas what I may be doing wrong?

Upvotes: 0

Views: 965

Answers (1)

Nick DeVore
Nick DeVore

Reputation: 10166

I ended up changing the onMainTabSelect method to:

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

which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.

Upvotes: 1

Related Questions