How to Synchronize 2 multiviews with menu control-Help needed

**nzkks** · Apr 21 '09, 09:32 AM

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

Code:

<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

Code:

<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:

Code:

    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?