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.
Unfortunately, activation email could not send to your email. Please try again.

How to make hidden tab visible?

Thread ID:

Created:

Updated:

Platform:

Replies:

126263 Oct 4,2016 01:07 PM Oct 6,2016 07:40 AM JavaScript 4
loading
Tags: ejTab
Michael Baas
Asked On October 4, 2016 01:07 PM

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

Michael Baas
Replied On October 4, 2016 01:10 PM

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? ;-)

Kasithangam C [Syncfusion]
Replied On October 5, 2016 02:06 AM

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 


Michael Baas
Replied On October 5, 2016 06:15 AM

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);
      }

Kasithangam C [Syncfusion]
Replied On October 6, 2016 07:40 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;