Gregory's Blog

Set active kendo tab

There are two standard ways to activate a Kendo tab: 1) via Javascript, or 2) appending the k-state-active class to the HTML list. Both approaches are useful. However, I have had troubles 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 to tab worked just fine. I will share both options below.

Option 1, use javascript and the select(tabIndex) method:

view plain about
1// Set the active tab if it was passed into the URL.
2var tabName = <cfoutput>'#URL.tabName#'</cfoutput>
3// Set the active tab if the tab argument is not a null string
4if (tabName !=''){
5    // Set the tab
6    setContractDetailTab(tabName);
9// function to select the appropriate detail tab.
10function setContractDetailTab(tabName){
12    if (tabName == 'contractDetail'){
13        // Get the index. We are starting at 0, so the first tab will have a zero index.
14            var tabIndex = 0;
15        } else if (tabName == 'routing'){
16            var tabIndex = 1;
17        } else if (tabName == 'attachment'){
18            var tabIndex = 2;
19        }
21        // Don't perform any actions until the dom is loaded.
22        $(document).ready(function() {
23            // Get a reference to the tab.
24            var detailTabSrip = $("#detailTabSrip").kendoTabStrip().data("kendoTabStrip");
25            // Select the tab. Make sure to use a timeout otherwise an error will occur and the kendo dropdowns will not be instantiated.
26            setTimeout(function() {
27      ;
28            }, 500);
30        });    //document.ready
31    }

Option 2) use the k-state-active Kendo class to select the active tab:

view plain about
1<div id="detailTabSrip" style="height:925px">
2 <!--- Tab names. --->
3 <ul>
4 <li id="contractDetail" <cfif not isDefined("URL.tabName") or URL.tabName eq "">class="k-state-active"</cfif>>
5     <p>Contract Detail</p>
6 </li>
7 <li id="routing" <cfif isDefined("URL.tabName") and URL.tabName eq 'routing'>class="k-state-active"</cfif>>
8     <p>Routing</p>
9 </li>
10 <li id="attachment" <cfif isDefined("URL.tabName") and URL.tabName eq 'attachment'>class="k-state-active"</cfif>
11 <p>Attachment</p>
12 </li>
13 </ul>

This entry was posted on May 9, 2019 at 2:55 PM and has received 16 views.

There are currently 0 comments.

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.


Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.