This has been solved.
I have made the following changes and it now works. here are the changes:
// change from:
mainTabs.select(
'#'
+ mainTabActive);
themeTabs.select(
'#'
+ themeTabActive );
mainTabs.reload(
'#'
+ mainTabActive );
// to this:
mainTabs.select(mainTabs.tabGroup.children(
'#'
+ mainTabActive));
themeTabs.select(themeTabs.tabGroup.children(
'#'
+ themeTabActive ));
Below is my code.
I have a tab within a tab.
When I click on a tab I save the index to the local storage (thanks HTML5). Then when I reload I want to set the tabs back to what they were. I can set either tab OK, but if I try to set both I get redraw issues.
Here is the code.
$jQ = jQuery.noConflict();
$jQ(document).ready(
function
($) {
/* TABS SECTION */
var
mainTabs =$(
'#tabs'
).kendoTabStrip().data(
"kendoTabStrip"
);
var
themeTabs = $(
'#theme-tabs'
).kendoTabStrip().data(
"kendoTabStrip"
);
var
mainTabActive = $.jStorage.get(
"mainTab"
);
var
themeTabActive = $.jStorage.get(
"themeTab"
);
mainTabs.select(
'#'
+ mainTabActive);
themeTabs.select(
'#'
+ themeTabActive );
mainTabs.reload(
'#'
+ mainTabActive );
//MainTab
$(
'#tabs'
).click(
function
(e) {
var
selectedTab = e.currentTarget.id;
$.jStorage.set(
"mainTab"
, selectedTab);
});
//theme tabs
$(
'#theme-tabs'
).click(
function
(e) {
var
selectedTab = e.currentTarget.id;
$.jStorage.set(
"themeTab"
, selectedTab);
});
});