Dynamically Adding Tab Panels To An ASP.NET AJAX Tab Container

I wanted to add some Tab Panels to my ASP.NET AJAX Tab container from my code behind file. Below is the code on my .aspx page:





Blow is my code in the aspx.cs file to add two new tab panels to the tab container:

TabPanel t1 = new TabPanel();
            t1.ID = "Tab1";
            t1.HeaderText = "Tab:1";

            TabPanel t2 = new TabPanel();
            t2.ID = "Tab2";
            t2.HeaderText = "Tab:2";

            TabContainer1.Tabs.Add(t1);
            TabContainer1.Tabs.Add(t2);

Pretty straight forward stuff. But to my astonishment when I ran the page I couldn't see my tab control in the browser. Below is the HTML generated for my two tab panels:

<div id="TabContainer1_Tab1" class="ajax__tab_panel" style="display:none;visibility:hidden;">
</div>
<div id="TabContainer1_Tab2"; class="ajax__tab_panel" style="display:none;visibility:hidden;">
</div>


As you can see from the above HTML that my two tab panels visibility is set to hidden by default. In order make the tab control visible we have to set the ActiveTabIndex for thr tab container as follows:

TabContainer1.ActiveTabIndex = 0;



kick it on DotNetKicks.com

blog comments powered by Disqus