Hi, I am using these: ASP.Net 2.0, VB.Net, Visual Studio 2005, SQL Server 2005
In a asp.net page, I have two multiview controls each has 2 views & its corresponding 2 menu items named Metric & Imperial. Individually both works fine.
But when I click "Metric", the other "Metric" should also be switched on and vice-versa for Imperial. How to achieve that?
The catch here is, one of the multiview control is inside a show/hide div with proper postback adjusted visibility.
Below ASP.Net page elements shows the first multiview
- <style type="text/css">
-
.header{cursor: hand; cursor:pointer;}
-
#MasterCartonSpecs{display:none;}
-
.tabs{position:relative;top:1px;left:10px;}
-
.tab{border:solid 1px #C1C1C1;background-color:#eeeeee;padding:1px 3px;}
-
.selectedTab{background-color:white;border-bottom:solid 1px white;}
-
.tabContents{border:solid 1px #C1C1C1;padding:1px;background-color:white;}
-
</style></head>
-
<body>
-
<form id="form1" runat="server">
-
-
<asp:Menu ID="TabMenu1" Orientation="Horizontal" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab" CssClass="tabs" OnMenuItemClick="TabMenu1_MenuItemClick" runat="server">
-
<Items>
-
<asp:MenuItem Text="Metric" Value="0" Selected="true" />
-
<asp:MenuItem Text="Imperial" Value="1" />
-
</Items>
-
</asp:Menu>
-
<div class="tabContents">
-
<asp:MultiView ID="ProductSpecsMultiview" runat="server" ActiveViewIndex="0">
-
<asp:View ID="TabMenu1_Tab1" runat="server">
-
TabMenu1_Tab1 content
-
</asp:View>
-
<asp:View ID="TabMenu1_Tab2" runat="server">
-
TabMenu1_Tab2 content
-
</asp:View>
-
</asp:MultiView>
-
</div>
Below ASP.Net page elements shows the second multiview
- <a href="http://forums.asp.net/AddPost.aspx?ForumID=130#" class="header" onclick='ToggleDisplay("MasterCartonSpecs")'>Show more...</a><br /><br />
-
<div id="MasterCartonSpecs">
-
<h3>Master Carton Specification</h3>
-
<asp:Menu ID="TabMenu2" Orientation="Horizontal" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab" CssClass="tabs" OnMenuItemClick="TabMenu2_MenuItemClick" runat="server">
-
<Items>
-
<asp:MenuItem Text="Metric" Value="0" Selected="true" />
-
<asp:MenuItem Text="Imperial" Value="1" />
-
</Items>
-
</asp:Menu>
-
<div class="tabContents">
-
<asp:MultiView ID="ProductSpecsDetailsMultiview" runat="server" ActiveViewIndex="0">
-
<asp:View ID="TabMenu2_Tab1" runat="server">
-
TabMenu2_Tab1 content
-
</asp:View>
-
<asp:View ID="TabMenu2_Tab2" runat="server">
-
TabMenu2_Tab2 content
-
</asp:View>
-
</asp:MultiView>
-
</div>
-
</div>
-
-
-
-
<input type="hidden" id="hiddenElement1" name="hiddenElement1" runat="server" />
-
</form>
-
<script language="JavaScript">
-
<!--
-
function ToggleDisplay(id)
-
{
-
document.getElementById('<%= hiddenElement1.ClientID %>').value = '';
-
-
var elem = document.getElementById(id);
-
-
if (elem)
-
{
-
if (elem.style.display != 'block')
-
{
-
elem.style.display = 'block';
-
}
-
else
-
{
-
elem.style.display = 'none';
-
}
-
-
document.getElementById('<%= hiddenElement1.ClientID %>').value = id + '~' + elem.style.display;
-
}
-
}
-
function windowOnLoad()
-
{
-
var hiddenValue = document.getElementById('<%= hiddenElement1.ClientID %>').value;
-
var hiddenValueArray = hiddenValue.split('~');
-
-
if ( hiddenValueArray.length >= 2 )
-
{
-
var idValue = hiddenValueArray[0];
-
var styleDisplayValue = hiddenValueArray[1];
-
-
document.getElementById(idValue).style.display = styleDisplayValue;
-
}
-
}
-
window.onload = windowOnLoad;
-
// -->
-
</script>
-
</body>
Code behind:
- Protected Sub TabMenu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)
-
Dim index As Integer = Int32.Parse(e.Item.Value)
-
ProductSpecsMultiview.ActiveViewIndex = index
-
End Sub
-
Protected Sub TabMenu2_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs)
-
Dim index As Integer = Int32.Parse(e.Item.Value)
-
ProductSpecsDetailsMultiview.ActiveViewIndex = index
-
End Sub
But when I click "Metric", the other "Metric" should also be switched on and vice-versa for Imperial. How to achieve that? 
