How do I hide a single tab on a MVC/Kendo UI tabstrip?

I want to hide a tab based on a condition. My jQuery code goes like this:

        //authUser is a hidden input whose value is set in the controller and passed into the view

        if ($('#authUser').val() == 'False') //hide the last tab
        {
            $($("#tabstrip").data("kendoTabStrip").items()[6]).attr("style", "display:none");
        }

When I run the code I get the following error on the line of code that's executed if authUser is False:

JavaScript runtime error: Unable to get property 'items' of undefined or null reference

Ideas?

How do I hide a single tab on a MVC/Kendo UI tabstrip?

I want to hide a tab based on a condition. My jQuery code goes like this:

        //authUser is a hidden input whose value is set in the controller and passed into the view

        if ($('#authUser').val() == 'False') //hide the last tab
        {
            $($("#tabstrip").data("kendoTabStrip").items()[6]).attr("style", "display:none");
        }

When I run the code I get the following error on the line of code that's executed if authUser is False:

JavaScript runtime error: Unable to get property 'items' of undefined or null reference

Ideas?

• javascript
• jquery
• kendo-ui
• telerik

Share Improve this question Follow asked May 7, 2014 at 19:03 CLuelessonTuesdaysCLuelessonTuesdays 6511 gold badge22 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

The fact that 'items' is undefined implies that you never appropriately selected the tabstrip in the first place. Either your CSS selector is wrong (are you sure you named it tabstrip?) or you did not follow the Kendo method names appropriately.

Here are two ways I found to hide the last tab:

Hiding the last tabstrip element

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
//Find the last tab item's index from the items list
var lastIndex = tabStrip.items().length - 1;
//Use jQuery's hide method on the element
$(tabStrip.items()[lastIndex]).hide();

Using Kendo's tabstrip remove method

I believe the following is more appropriate. Why not use the tabstrip's remove method and pletely remove it from the DOM since the user should not have access anyway?

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.remove("li:last");

I'm just stupid.... I looked some more at the code and I was leaving out the kendoTabStrip() word (bolded) from

$($("#tabstrip").kendoTabstrip().data("kendoTabStrip").items()[6]).attr("style","display:none")

i.e. Instead of (properly) having:

$($("#tabstrip").kendoTabStrip().data("kendoTabStrip").items()[6]).attr("style","display:none") 

I had:

$($("#tabstrip").data("kendoTabStrip").items()[6]).attr("style","display:none") 

Drew, thanks for your effort. Sometimes I just have to beat my head on a wall until I see what I've done.

I couldn't get the code on either of the answers to hide a tab in the current build. This should be future proof:
First use htmlAttributes to assign a targetable ID to your tab

        tabstrip.Add().Text("tab text").HtmlAttributes(new { id="myTabName"}).Content(@<text>

Then just hide or show that with jquery.

$("#myTabName").hide() //or .show() or .toggle(visible)