how do I programmatically disable kendo tabstrip button

0
votes

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

3
kendo-ui
You can disable a common button with jQuery like tabButton.prop("disabled", "disabled")... - DontVoteMeDown
just tried this, it didnt work - but I did note the button is an anchor link - Jehan
stackoverflow.com/questions/37109771/… - SehaxX

3 Answers

1
votes

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.

0
votes

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);
0
votes

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 ...