Set Active Kendo Tab
May 9 |
There are two standard ways to activate a Kendo tab: 1) via Javascript, or 2) by appending the k-state-active class to the HTML list. Both approaches are useful. However, I have had trouble using a javascript function to set the active tab when I had a button open up a new Kendo window and then set the active tab based upon the URL variable that I sent along when opening up the Kendo window. For some odd reason, when I used the javascript method it would not process the scripts in the second tab. I could not figure out how, or even why, this method failed, but appending the k-state-active class to set the tab worked just fine. I will share both options below. Option 1, Use javascript and the select(tabIndex) method:
// Set the active tab if it was passed into the URL.
var tabName = <cfoutput>'#URL.tabName#'</cfoutput>
// Set the active tab if the tab argument is not a null string
if (tabName !=''){
// Set the tab
setContractDetailTab(tabName);
}
// function to select the appropriate detail tab.
function setContractDetailTab(tabName){
if (tabName == 'contractDetail'){
// Get the index. We are starting at 0, so the first tab will have a zero index.
var tabIndex = 0;
} else if (tabName == 'routing'){
var tabIndex = 1;
} else if (tabName == 'attachment'){
var tabIndex = 2;
}
// Don't perform any actions until the dom is loaded.
$(document).ready(function() {
// Get a reference to the tab.
var detailTabSrip = $("#detailTabSrip").kendoTabStrip().data("kendoTabStrip");
// Select the tab. Make sure to use a timeout otherwise an error will occur and the kendo dropdowns will not be instantiated.
setTimeout(function() {
detailTabSrip.select(tabIndex);
}, 500);
}); //document.ready
}
}
Option 2) Use the k-state-active Kendo class to select the active tab:
<div id="detailTabSrip" style="height:925px">
<!--- Tab names. --->
<ul>
<li id="contractDetail" <cfif not isDefined("URL.tabName") or URL.tabName eq "">class="k-state-active"</cfif>>
<p>Contract Detail</p>
</li>
<li id="routing" <cfif isDefined("URL.tabName") and URL.tabName eq 'routing'>class="k-state-active"</cfif>>
<p>Routing</p>
</li>
<li id="attachment" <cfif isDefined("URL.tabName") and URL.tabName eq 'attachment'>class="k-state-active"</cfif>
<p>Attachment</p>
</li>
</ul>
</div>
Tags
Kendo TabstripThis entry was posted on May 9, 2019 at 4:55 PM and has received 3191 views.