Quantcast
Channel: AjaxControlToolkit Work Item Rss Feed
Viewing all articles
Browse latest Browse all 4356

Commented Unassigned: TabPanel Visible=false causes other tab panels to show mixed content when changing ActiveTabIndex [27646]

$
0
0
This exact issue has been already discussed before with woritem [16321](https://ajaxcontroltoolkit.codeplex.com/workitem/16321). I was not able to find any other recent discussion about it.
I invite to read that report because symptoms are very well explained by the author.

I updated toolkit version from 30930 (Sep 2009) to 7.1213 (Dec 2013) on a project containing a complex implementation of TabContainer. Before the update I had no issue at all with that page and TabContainer in general, but as soon as I referenced new toolkit version I found out some strange behaviors.
I reduced it all in a very simple, standalone page, attached to this post.

Basically what happens is that when you set one or more tab to be invisible (no matter whether you do it by the attribute on tag declaration or in the code-behind), TabContainer starts to display mixed-content tabs after ActiveTabChanged event, when index requested is equals or greater than the one of the not visible.

Page attached shows it very clearly.

Note: none of the workarounds proposed in the old workitem is working in my environment.

Target framework 3.5, Toolkit version 7.1213, IIS 7.5, Windows 7 64 bit


Comments: In the meanwhile I may found some workaround to fix the mixed-content issue. I'm still testing my page looking for other bugs, but so far it seems to work correctly. The purpose is to hide tabs client side, after TabContainer control is rendered. To do so, I need not to hide tabs on server side. Instead, I need to 'mark' tabs that I will hide on client side. Most natural way to do so seems to be the Enable property, which has a client corresponding property to check via javascript. First, however, you have to bypass the stateless issue, as I reported on last post: On server side, I changed every Tab.Visible = false; instruction with Tab.Enabled = false. Then, on first load, I store into a Dictionary object the state of every tab inside my TabContainer: ``` Dictionary<string, bool> TabStatus = new Dictionary<string, bool>(); foreach (TabPanel tabPanel in TabContainer.Tabs) TabStatus.Add(tabPanel.ID, tabPanel.Enabled); Session["TabStatus"] = TabStatus; ``` Then, on every other postback I just load data from session, manually keeping tab states: ``` TabStatus = (Dictionary<string, bool>)Session["TabStatus"]; foreach (TabPanel tabPanel in TabContDNS.Tabs) tabPanel.Enabled = TabStatus[tabPanel.ID]; ``` This way you can keep Enable status for each tab across postbacks, and bypass problem showed on my previous post. Now, to hide disabled tabs on client, you can add this code using javascript + jQuery (no update panel version): ``` $(document).ready(function () { setInvisibleTabs(); }); function setInvisibleTabs() { var tabs = $find("<%=TabContainer.ClientID%>").get_tabs(); for (var i = 0; i < tabs.length; ++i) { if (!(tabs[i].get_enabled())) $(tabs[i]._tab).hide(); } } ``` In case you are on a scenario where TabContainer is inside an UpdatePanel (and so TabContainer refreshes after an ajax partial postback) you will have to binf pageLoaded event to the PageRequestManager (since jQuery ready event does not fire on partial postbacks): ``` $(document).ready(function () { window.Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded); }); function pageLoaded(sender, args) { setInvisibleTabs(); } function setInvisibleTabs() { var tabs = $find("<%=TabContainer.ClientID%>").get_tabs(); for (var i = 0; i < tabs.length; ++i) { if (!(tabs[i].get_enabled())) $(tabs[i]._tab).hide(); } } ``` This is all working fine on my project so far. Keep testing anyway, I will write updates, if anyone is interested. Hope next release will fix this mess, anyway.

Viewing all articles
Browse latest Browse all 4356

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>