10
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
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- 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?
