Question

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?

Was it helpful?

Solution

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 completely remove it from the DOM since the user should not have access anyway?

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top