We Keep Coding

ASP.Net submenu not show after postback

I has use ASP.Net menu control in master page. And I wrap the Maincontent using update panel. When postback is happen, the sub menu in master page not showing when mouse over. I need click again the menu then mouseover the menu the sub menu only show.
Master page
<div class="float-right">
<nav>
<asp:Menu ID="mne" runat="server" Orientation="Horizontal" Font-Names="Arial, Verdana, Tahoma"
OnMenuItemClick="mne_MenuItemClick" StaticEnableDefaultPopOutImage="false" Width="510px"
DynamicHorizontalOffset="20" StaticSubMenuIndent="250px" TabIndex="1" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1" HorizontalPadding="10px" />
</LevelMenuItemStyles>
<StaticMenuStyle />
<DynamicMenuStyle />
<StaticHoverStyle BackColor="Wheat" />
<DynamicHoverStyle BackColor="Gray" ForeColor="White" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"
Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Management" Value="Management"
ToolTip="Management">
<asp:MenuItem Text="Edit" Value="Edit" ToolTip="Edit
NavigateUrl="~/Edit.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Logout" Value="Logout"></asp:MenuItem>
</Items>
</asp:Menu>
</nav>
</div>
</div>
</header>
Edit.aspx
<asp:DropDownList ID="Country" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Country_SelectedIndexChanged">
</asp:DropDownList>
After the drop down list postback, mouseover the menu, the submenu not showing. I need click on the menu then mouseover the submenu will display.
Anything is go wrong? Please help

I've also been experiencing this intermittently, and none of the other suggestions worked for me. I eventually decided to rem out every line of server-side code and then un-rem them section by section until I discovered what was causing it.
Turns out that it was as a result of server-side JavaScript injection using the ClientScript.RegisterStartupScript(...) method. In certain cases, the client-side objects referred to in the injected JavaScript were not visible at the time the script was injected. Others have hinted at page life-cycle being the root cause of this problem, and this would bear it out.
Once I'd discovered this, I was able to fix it quite easily by making sure that the script checked for visibility of document elements before referencing them. The surprising thing was that, despite having JavaScript warnings enabled, this did not generate any client-side errors.

Disable postback of root or parent menu:
MenuItem mnu = new MenuItem();
// if mnu has sub item(s)
mnu.Selectable = false;
this option is more useful when application opened by a mobile device.

Easy user interface change depending on selection

So I have a dropdownlist with 2 items : Path and Queue
If the item selected is a Path, then the next thing displayed in the next div is a textBox (txtLocation), and if it is a Queue, then I have to show a DropDownList(cmbLocation) which items are part of a xml file.
Type:
<dx:ASPxComboBox ID="cmbPathType" runat="server" Width="150px" TextField="TypeName"
ValueField="QueueMonitorConfigTypesID">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
<Items>
<dx:ListEditItem Text="Path" Value="Path" />
<dx:ListEditItem Text="Queue" Value="Queue" />
</Items>
<ValidationSettings ValidateOnLeave="false" RequiredField-IsRequired="true">
<RequiredField IsRequired="True" />
</ValidationSettings>
</dx:ASPxComboBox>
Location:
<dx:ASPxTextBox ID="txtLocation" runat="server" Width="150px">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
<ValidationSettings ValidateOnLeave="false" RequiredField-IsRequired="true">
<RequiredField IsRequired="True"></RequiredField>
</ValidationSettings>
</dx:ASPxTextBox>
<dx:ASPxComboBox ID="cmbLocation" runat="server" Width="150px" DataSourceID="queuesXML">
</dx:ASPxComboBox>
<asp:XmlDataSource ID="queuesXML" runat="server" DataFile="~/Config/Config.xml" XPath="queue/name" ></asp:XmlDataSource>
I know I'm using dev express, but that should not matter for this

you need to work on change event of combobox. And Use the selection values as condition.

display none / remove style for asp.net code behind not working

I've got a button on my page in code behind I do this:
btnSaveLineItems.Style.Add("display", "none");
But later I want to show that button so I tried this:
btnSaveLineItems.Style.Clear();
This doesnt appear to reshow the button...
The html markup in the beginning has a "style=display:none;" in the beginning of the page..
and it maintains that style even though I try to remove it?
When my page first starts up I have this:
btnSaveLineItems.Style["display"] = "none";
This renders like the following in HTML:
<input type="submit" name="ctl00$MainContent$btnSaveLineItems" value="Save" id="MainContent_btnSaveLineItems" title="Save changes?" style="border-color:#4B6C9E;border-style:Solid;display:none;" />
Then an event happens (selected index changed event of a drop down box) where I then do this:
btnSaveLineItems.Style["display"] = "";
I've also tried:
btnSaveLineItems.Style["display"] = "block";
and both render the same HTML:
<input type="submit" name="ctl00$MainContent$btnSaveLineItems" value="Save" id="MainContent_btnSaveLineItems" title="Save changes?" style="border-color:#4B6C9E;border-style:Solid;display:none;" />

You can remove that style in this way:
btnSaveLineItems.Style["display"] = "";
or
btnSaveLineItems.Style.Remove("display");
Edit:
That doesnt work for me either...I wonder if it is because of the drop
down list box is inside of an update panel and this button is outside
of the updatepanel?
Yes, you can only update the content of the current UpdatePanel in an asynchronous postback by default. The easiest would be to put your Button in another UpdatePanel and add the DropDownList as AsyncPostBackTrigger:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DdlChanged">
<asp:ListItem Text="Item 1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item 2" Value="2"></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="btnSaveLineItems" Text="click me" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" />
</Triggers>
</asp:UpdatePanel>

this works :
gv.Style.Add(HtmlTextWriterStyle.Top, "-44px");
to add the style
and
gv.Style.Remove("top");
to remove the style

btnSaveLineItems.Style["display"] = "block";

You can Just add the class d-none by getting it class name and then remove the class d-none where you want to show the button.

Set asp:MenuItem as active

I have this asp:menu with a few items and want to be able to set an item as active when I've clicked it.
Here it goes
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/pages/page_a.aspx" Text="PageA" />
<asp:MenuItem NavigateUrl="~/pages/page_b.aspx" Text="PageB" />
<asp:MenuItem NavigateUrl="~/pages/page_c.aspx" Text="PageC" />
</Items>
</asp:Menu>
This renders a menu looking something like this
PageA PageB PageC
When clicking something like PageB I'd like to be able to style it somehow, like adding a css or whatever returning this
PageA PageB PageC
Any advices where I can find some info or samples?

You can apply a CSS class or styles to a menu item using the 'selectedstyle' properties of the asp:Menu control, using syntax like this:
<staticselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
A more full example is described in this MSDN article.
EDIT in response to comment:
There is also the 'dynamicselectedstyle' property for dynamic menus which used the same syntax:
<dynamicselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>

Best practice for having programmatically created UpdatePanel expand to fill parent container?

In doing some reworking of my web application I encountered the following issue:
Although an ASP UpdatePanel does not have a height property it does not automatically expand to fill its parents container. Instead, it grows with its children's dimensions. In my scenario, the child does not have dimensions -- it should expand to fill its parents container. This causes both the UpdatePanel and its child to have very small heights.
Before I had:
[Parent Container] -> [Child Container] with both ParentContainer and ChildContainer's height property unset so that they will fill containers higher up in the hierarchy.
Now I have:
[Parent Container] -> [Update Panel] -> [Child Container]. Parent Container's dimensions are not guaranteed to be non-empty, so I am unable to programatically set ChildContainer's dimensions in all cases. As such, I would like my UpdatePanel to work in the same fashion as the controls it is wrapped around.
Is my best bet to go into the CSS and do something like:
.UpdatePanel
{
height: 100%;
}
or do I have other, cleaner options available to me? I am creating these controls server-side, so I don't have the opportunity to wrap them in divs (nor do I want to).
EDIT:
I (can't?) use Panel instead of UpdatePanel because I would like to use the functionality of being able to update conditionally. I have a timer on my page which calls UpdatePanel.Update() on controls -- this functionality does not exist in panel AFAIK.
The body of my page is height: 100% and here is the static structure hierarchy.
The location where RadPane2 is declared is where an UpdatePanel will be slipped in. It needs to be between the RadPane and the CormantRadDockZone controls. This is only the 'base' implementation, however. Users have the ability to stack more RadPane/UpdatePanel/CormantRadDockZone 1:1:1 contents onto the page. As such, I have UpdatePanels being generated dynamically -- which means I can't apply the CSS to just an UpdatePanel's ID.
<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">
<telerik:RadPane ID="RadPane_DefaultExpand" runat="server" CssClass="allRoundedCorners" Scrolling="None">
<telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageView1" runat="server">
<telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0" Height="100%" Skin="Web20" Width="100%">
<telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px">
<telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" Width="20px">
<telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/configuration.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Configuration" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped" Skin="Web20" Width="100%" onclientdropped="OnClientDropped">
<Items>
<telerik:RadListBoxItem Text="Horizontal Bar" Value="Horizontal"/>
<telerik:RadListBoxItem Text="Vertical Bar" Value="Vertical" />
</Items>
</telerik:RadListBox>
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" IconUrl="~/Content/Dashboard/Icons/chart.png" TabView="ImageOnly" BackColor="#ECF4FD" MinWidth="160" Scrolling="Y" Title="Custom Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/historical.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Historical Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxHistorical" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane4" Runat="server" IconUrl="~/Content/Dashboard/Icons/settings_global.png" onclientbeforeexpand="ShowDashboardGlobalSettings" TabView="ImageOnly" EnableDock="False" />
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
</telerik:RadSplitter>

UpdatePanel will translate to a div or span on client side so as long as you set the css class properly, this should work. Going via CSS is the cleanest approach.
Here's how you can set the css class (if you want to use this in a css file, make sure you've PerformSubstitution set to true):
#<%=UpdatePanel1.ClientID%> {
height: 100;
}
Also, based on browser type, you may have to reset margin and padding to 0.
Make sure that the UpdatePanel's parent has height set too.
Update: use a Panel to wrap UpdatePanel (not substitute it)
<asp:Panel ID="Panel1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</asp:Panel>
Noticed RadPane has a CssClass property so you can just add it there.
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners myCssClass" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>