Friday, July 17, 2009

AjaxControlToolkit ComboBox not showing in TabContainer

We have been refered that combobox is not appearing in ModalPopup: http://vincexu.blogspot.com/2009/05/ajaxcontroltoolkit-combobox-not.html

But somebody found that it also will pop out script error on the line b.width=c+"px" if combobox is in the TabPanel which is not the default active panel in tabcontainer.

For example, we have 2 combobox controls, one is in the TabPanel1, and the other is in TabPanel2. TabPanel1 is the default active tabPanel. After initialized, it will pop out the error, then combobox1 in tabpanel1 is displaying, but combobox2 not.

Check the following sample about it.


<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Height="228px"
Width="400px">
<ajaxToolkit:TabPanel ID="tabpane1" runat="server" HeaderText="tab1">
<ContentTemplate>
<ajaxToolkit:ComboBox runat="server" ID="ComboBox1" MaxLength="100" AutoCompleteMode="Suggest">
<asp:ListItem Text="ABC" Value="ABC"></asp:ListItem>
<asp:ListItem Text="XYZ" Value="XYZ"></asp:ListItem>
</ajaxToolkit:ComboBox>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab2">
<ContentTemplate>
<ajaxToolkit:ComboBox runat="server" ID="ComboBox2" MaxLength="100" AutoCompleteMode="Suggest">
<asp:ListItem Text="ABC" Value="ABC"></asp:ListItem>
<asp:ListItem Text="XYZ" Value="XYZ"></asp:ListItem>
</ajaxToolkit:ComboBox>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

(You can try this sample. Because Combobox2 is in the TabPanel2, which is an inactive panel, it will pop out the error and it will make Combobox2 off.)

This issue is attributable to the tabpanel which is not active is invisible, combobox can't get the correct offsetHeight and offsetWidth any more.

So, the approach to resolve it is setting the TabPanel2 to be visible so that combobox can create in gear.
Combobox will be created in initialized phase. So we have to set TabPanel2 to be visible before combobox creates and set it back in pageLoad phase.


<script type="text/javascript">
$get('<%=TabPanel2.ClientID %>').style.visibility = "visible";
$get('<%=TabPanel2.ClientID %>').style.display = "block";

function pageLoad() {
$get('<%=TabPanel2.ClientID %>').style.visibility = "hidden";
$get('<%=TabPanel2.ClientID %>').style.display = "none";
}

</script>


Put the above script after document body and form content. It will let Combobox1 and combobox2 showing according to he above HTML sample.

Cheer.

19 comments:

S. Muhilan said...

hi
Thanks you very very much for answering my question and resolving my problem
S.Muhilan
s_muhilan@hotmail.com

Anonymous said...

Good response..
___________________

Vince

Your movies on demand

Kelli C. said...

You are my hero!!! I struggled with this for 2 days before I found your post. Thanks a million!

Anonymous said...

Thanks buddy...
fine tune your code according to my need and it worked like a charm..
Thanks once agaian
Akhilesh Bhale

Anonymous said...

I have been in search of such interesting Articles, I am on a holiday its good to see that everyone are trying their best to keep up

the Spirit by having such great articles posted.

Cheers, Keep it up.

___________________
Vince
Online Marketing of your brand

Anonymous said...

Where do I put the script if the tabcontrol content is added as content to a master page

Vince Xu said...

Just write js on masterpage or aspx page. It call get to work.

Anonymous said...

hi,
it's solve the issue, but it create another one. Before the page loading is completed, I can see the content of my tabpanel2 at the bottom of the page. Do yo uhave any clue about the reason of this behavior ?
thanks

John Scott said...

I have a TabContainer with 3 tabs. All the tabs have a ComboBox in it. My TabContainer is inside and update panel.

Your code works perfect the first time the page loads. But if the update panel fires it breaks. My thought is this is because the your code that I added below the closing body tag doesn't execute during a partial post back.

Is this the case?

Any ideas how I would resolve this

Mohammed said...

You are a life saver!!
My deepest thanks and gratitude!!

But I was jumping from a bug to another with this Ajax Toolkit stuff! Thank God there is someone to lookup these stuff!

Keep up the good work!

Best regards

Anonymous said...

Truly a life saver!!

But I was jumping from a bug to another with this Ajax Toolkit stuff! Thank God there is someone to lookup these stuff!

I don't know why Ajax Toolkit controls are not supportive eachother... wasting a lot of time...

Unknown said...

Thanks. This worked like a charm.

Victor said...

Hi Vince Xu,

if i using three tabpanels and all have more than one combobox then what can i do? pls let me know. my mail id is victor200988@yahoo.com.sg

thanks,

-Victor

free download songs said...

Hey Vince! Awesome Article. Thanks for sharing.

Anonymous said...

Thanks Vince... nice post...

But out of curiosity I am asking, is this a bug ?

Pravesh Singh said...

Check out this helpful link too its also having nice post with wonderful explanation on Ajax Toolkit ComboBox Control in ASP.Net....
Ajax Toolkit ComboBox Control in ASP.Net

Thanks!!

Artiom1988 said...

Thank you so much!!! this worked

Jaydeep Shil said...

What a solution ... Smooth ... thanks a lot. You save my day :-)

Jaydeep Shil said...

What a solution ... Smooth ... thanks a lot. You save my day :-)