Avatar of gpfcall8
gpfcall8 asked on

How to hide/show tabpanels in TabContainer?

I have some javascript that hides/shows tabPanels inside a tabContainer, based on a value from
a dropdown control.  It's triggered from the onchange event of the dropdown and it works fine (hides/shows the correct panels).  But when I try to call the Javascript on the form's onInit() routine (c# codebehind), the $get(tbDetails1ID).control returns undefined.  $get(tbDetails1ID) does return something (the id is valid) but the control is not defined at that point in the form's loading process (I guess).  I've tried moving the Javascript call from the form's OnInit() to the TabContainer's prerender event with no luck.

Also, I tried to use this.tbDetails1.Enabled = true/false when the page loads (instead of calling the Javascript) but then when I then choose from the dropdown list, it then calls the Javascript and unhides the tabpanel, but all the controls in the panel are greyed out.  I tried to set tbDetails._enabled=true in the Javascript and tbDetails.set_enabled(true) in the Javascript but all the controls in the tab are still disabled.

Is there a way to call the Javascript from some event where these get.controls are defined, or
do I need to loop through all the controls in the tabpanel and reenable each of them in the Javascript?  Or is there other way entirely of showing/hiding tabpanels inside a TabContainer which can be set in both Server and Client-side code?

Thanks for any info.


//Hides/Shows different tabs based on the dropdown value
function OnDropDownChange(drpDownID, tbDetails1ID, tbDetails2ID, tbContainerID)
{
    debugger;
   // $get(tbID).style.display = 'none';
 
    var drpDownType = $get(drpDownID);
    var tabDetails1 = $get(tbDetails1ID).control;
    var tabDetails2 = $get(tbDetails2ID).control;
    var tabContainer = $get(TbContainerID).control;
 
    if (drpDownType.value.toString().match("Detail1"))
    {
        tabDetails1._show();
        tabContainer.set_activeTabIndex(tabDetails1._tabIndex);
        tabDetails2._hide();
   }
   else
    {
        tabDetails2._show();
        tabContainer.set_activeTabIndex(tabDetails1._tabIndex);
        tabDetails1._hide();
   }

Open in new window

.NET ProgrammingASP.NETVisual Basic.NET

Avatar of undefined
Last Comment
gpfcall8

8/22/2022 - Mon
nmarun

How about: TabContainer1.Tabs(2).Enabled = false;
jmwheeler

You can call the javascript from the page load:

ScriptManager.RegisterStartupScript(this, this.GetType(), "SetupTabs", "javascriptFunction();", true);

Change 'javascriptFunction();' to your javascript code or function name.
ASKER
gpfcall8

nmarun,
  In my codebehind (c#) I am doing this:
this.tbDetails1ID.Enabled = true;
this.tbDetails2ID.Enabled = false;
  Looks pretty much the same as yours.  The problem is that when I change the dropdown and then later call the client-side Javascript and try to reenable the tab, all the child controls look disabled.

jmWheeler:
   I was using RegisterStartupScript from the OnInit function and it gets to the javascript function fine, but once there, the $get(tbDetails1ID).control returns undefined.  I also tried calling it from the TabContainer's preRender() event with the same results.

Bill

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
SOLUTION
jmwheeler

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
gpfcall8

jmwheeler
  I moved the call to the Javascript to Page_Load with the same results.  Once there,
$get(tbDetails1ID).control is returning undefined.  ($get(tbDetails1ID) still returns an object)
nmarun

Were you able to look into this? Please update.
ASKER
gpfcall8

nmarun,
  No, I could not solve this.  It looks like a bug with the TabContainer/TabPanels control.  I will just add some popup messages to the tabs to say whether or not data entry is allowed.  Maybe there is another tab control that works better?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.