Saturday, March 24, 2012

Tabcontainer - Setting Tab Visibilities

Hi

I have a tabcontainer with several tabs on ajaxaed page. I am trying to hide some tabs at postabacks according to selection made in a dropdown list. Everything works fine until some of the tabs receive focus, e.g. if I hit the button inside the panel (I am using update panel hence there is no postback) . In that case when I change dropdown list selection, tabcontainer display gets messy.

I tested it in Firefox and the error line is marked in bold bellow:
set_activeTabIndex : function(value) {
if (!this.get_isInitialized()) {
this._cachedActiveTabIndex = value;
} else {
if (value < -1 || value >= this.get_tabs().length) {
throw Error.argumentOutOfRange("value");

From that I can conclude that the tabcontainer is trying to set tab that last received focus as active tab. Because the tabs visibilities are changed at postbacks the script fails. Please correct me if I am wrong.

Any help with this problem will be greatly appreciated.

OK there is a solution - I was led to it by reading this thread:

http://forums.asp.net/t/1068120.aspx?PageIndex=1

The member with nickname howeird posted the one way to solve the problem:

In my case I change the client side function from:

<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = sender.get_activeTabIndex();
}
</script>

To:
<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = 0;
}
</script>

That will ensure that the tab with index No 0 is always set as active tab at postbacks.
NOTE: The client side function is only part of the solution read the rest of the poste for full implementation.

Thanx howeird

No comments:

Post a Comment