We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to make hidden tab visible?

I am creating an ejTab-Instance with 4 Tabs, 2 of them are hidden initially (through .hiddenItemIndex.  If i read correctly, showItem should be able to make a hidden tab visible again

4 Replies

MB Michael Baas October 4, 2016 05:10 PM UTC

So, when I do $("#id").data("ejTab").showItem(2);, something gets visible: the content of that tab. But not the tab itself (including the register-thing on top with the name of the tab). How it it possible to show the tab in its fully glory? ;-)


KC Kasithangam C Syncfusion Team October 5, 2016 06:06 AM UTC

Hi Michael, 
Thanks for contacting Syncfusion support. 
We have checked the reported issue in our end. The cause of the issue “hidden tab not visible when using showItem method” is not updating the hidden tab items array. “showItem” method is used to active the hidden tab item. To resolve the issue, we need to update the “hiddenItemIndex” property before activating the tab item by using the showItem method as shown below: 
<code> 
  <script type="text/javascript"> 
       
      function onclick(args){ 
           var tabObj = $("#apiTab").data("ejTab"); 
                     tabObj.option("hiddenItemIndex",[0]); 
                     tabObj.showItem(1); 
      } 
    </script> 
</code> 
We have prepared the sample based on your requirement and it is available under the following link: 
Regards, 
Kasithangam 



MB Michael Baas October 5, 2016 10:15 AM UTC

Thanks Kasithangam, that looks nice - in theory. But I am trying to make a tab visible through a function (and select the tab as argument) - and I can not get that to work.
I must be doing something wrong, but for the life of me I can not see what I am missing - may I ask for your help once again?

I modified your sample-fn as follows - running that affects the ejTab, but not in the way I expected it to do.
      function onclick(args){
           var tabObj = $("#apiTab").data("ejTab");
//tabObj.option("hiddenItemIndex",[0]);
//tabObj.showItem(1);
        // use variable i (which might be arg to a fn) to selec the tab to be shown
        var i=1;
        var hdn = tabObj.option("hiddenItemIndex");
        var j=hdn.indexOf(i);
        hdn.splice(j,1);
        tabObj.option("hiddenItemIndex",hdn);
        tabObj.showItem(i);
      }


KC Kasithangam C Syncfusion Team October 6, 2016 11:40 AM UTC

Hi Michael,  
Thanks for your update. 
We have checked your provided code. In that, you have tried to get the value from hdn variable using “splice()” method and assign that to “hiddenItemIndex” property via setModel.When we assign same value to hiddenItemIndex property,the setModel will not be fired. So you can “slice()” jquery method  instead using “splice()” method.Please find the code for the same: 
<code> 
<script type="text/javascript"> 
      var tabObj,hdn 
        
      function onclick(args){ 
           tabObj = $("#apiTab").data("ejTab"); 
         hdn = tabObj.option("hiddenItemIndex"); 
                     var i=1; 
        var j=hdn.indexOf(i); 
        var val=hdn.slice(0,j); 
        tabObj.option("hiddenItemIndex",val); 
        tabObj.showItem(i); 
      } 
            </script> 
</code> 
We have modified the sample based on your requirement and it is available under the following link: 
Regards, 
Kasithangam

Loader.
Live Chat Icon For mobile
Up arrow icon