CODEWITHSUNDEEP
kendo-ui
Jehan
Jehan

Reputation: 25

how do I programmatically disable kendo tabstrip button

I cannot disable a tabstrip button. Ive tried the following running within the Tabstrips Activate event

tabButton.data("kendoButton").enable(false)

-- fails because the button isnt a kendo button

tabButton.addClass("disabled")

-- fails, disabled is added, but button is still usable

where tabButton was derived along the following lines, I know I gottten it.

var tabButton = $(".k-button")

I resolved the issue by adding a css & class as in

.disable_a_href { pointer-events: none; }

tabButton.addClass("disable_a_href")

Upvotes: 1

Views: 3118

Answers (3)

Husnain
Husnain

Reputation: 89

I use a very simple approach ...

var tabstrip = $("#yourtabstripID").data("kendoTabStrip");
var tabContentID = $("content_div_of_that_tab").parent().attr('id');

//Enable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], true);

//Disable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], false);

I feel the code above is pretty self explanatory ...

Upvotes: 0

SZL
SZL

Reputation: 855

To disable all tabstrip except the active you can use this code:

var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.enable(tabStrip.tabGroup.children().not(".k-state-active"), false);

Upvotes: 0

vaindil
vaindil

Reputation: 7854

TabStrip has explicit enable and disable functions.

If you want them to start disabled, use the class k-state-disabled on the <li> element.

Here's a fiddle showing both of these methods. Tab 2 will start disabled, and tab 3 can be toggled.

Upvotes: 1

Related Questions