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

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.

gpfcall8

ASKER

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

SOLUTION

jmwheeler

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gpfcall8

ASKER

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.

gpfcall8

ASKER

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?

ASKER CERTIFIED SOLUTION

gpfcall8

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial