Trek Innovations

I have a DropDownList in 2 different Tab Panels in a TabContainer (from the AJAX control toolkit on ASP.NET’s website) and I discovered that the TabContainer does not maintain state on postbacks for DropDownLists.  In other words, if I am on the second tab and I changed the value of the DropDownList (w/ AutoPostBack=”true”), I always return to the first tab (index 0).

In order to solve the above problem, we have to write a piece of Code in JavaScript as show below:

<script type=”text/javascript”>

function SaveActiveTabIndex(sender, e)

{

var activetabindex = sender.get_activeTab().get_tabIndex();

setCookie(activetabindex);

}

function setCookie(value)

{

document.cookie = “tabIndex=” + escape(value) ;

}

</script>

In the tabcontainer you can set the OnClientActiveTabChanged property to call javascript as shown below:

OnClientActiveTabChanged=”SaveActiveTabIndex”

After setting the tabcontrol property to javascript and in the aspx.cs file in the pageLoad event place the below code:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.Cookies["tabIndex"] != null)

{

int index = int.Parse(Server.HtmlEncode(Request.Cookies["tabIndex"].Value));

if (index > -1 && index < TabContainerAddEnquiry.Tabs.Count)

{

TabContainerAddEnquiry.ActiveTabIndex = index;

}

else

{

TabContainerAddEnquiry.ActiveTabIndex = 0;

}

}

}

This should solve the problem.

Complete Source code is given below:

Aspx Page:

<EA:TabContainer ID=”TabContainerAddEnquiry” runat=”server” CssClass=”scienceEnquiry” OnClientActiveTabChanged=”SaveActiveTabIndex” ActiveTabIndex=”1″>

<EA:TabPanel ID=”tabContactDetails” runat=”server” HeaderText=”Contact Details” TabIndex=”1″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabEnquiryDetails” runat=”server” HeaderText=”Enquiry Details” TabIndex=”2″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

<EA:TabPanel ID=”tabAssignTo” runat=”server” HeaderText=”Assign To” TabIndex=”3″>

<ContentTemplate>

</ContentTemplate>

</EA:TabPanel>

</EA:TabContainer>

Aspx.cs i.e. CodeBehind Page:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.Cookies["tabIndex"] != null)

{

int index = int.Parse(Server.HtmlEncode(Request.Cookies["tabIndex"].Value));

if (index > -1 && index < TabContainerAddEnquiry.Tabs.Count)

{

TabContainerAddEnquiry.ActiveTabIndex = index;

}

else

{

TabContainerAddEnquiry.ActiveTabIndex = 0;

}

}

}

Happy Coding………….

No comments