Category Archives: SiteMapDataSource

[RESOLVED] How to highlight asp menu item for current page.

 

 Hi please , help I want to highlight asp menu item for current page.  

I use template from visual studio 2010

Ex. current page is home.aspx then menu HOME must highlight

 

my template 

 

 

my code in master page "site.master"

-----------------------------------------------------------------------------------------------------------------------------------------------

 <div>

          <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" 

                Orientation="Horizontal">

                    <Items>

                        <asp:MenuItem NavigateUrl="~/home.aspx"  Text="Home" />

                        <asp:MenuItem NavigateUrl="~/requestcertificate.aspx" Text="Request Certificate"/>

                        <asp:MenuItem NavigateUrl="~/mycertificate.aspx" Text="My certificate"/>

                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>

                    </Items>

                </asp:Menu>

   </div>

-----------------------------------------------------------------------------------------------------------------------------------------------

 

 

my css code

-----------------------------------------------------------------------------------------------------------------------------------------------

div.hideSkiplink

{

    background-color:#3a4f63;

    width:100%;

}

 

div.menu

{

    padding: 4px 0px 4px 8px;

}

 

div.menu ul

{

    list-style: none;

    margin: 0px;

    padding: 0px;

    width: auto;

}

 

div.menu ul li a, div.menu ul li a:visited

{

    background-color: #465c71;

    border: 1px #4e667d solid;

    color: #dde4ec;

    display: block;

    line-height: 1.35em;

    padding: 4px 20px;

    text-decoration: none;

    white-space: nowrap;

}

 

div.menu ul li a:hover

{

    background-color: #bfcbd6;

    color: #465c71;

    text-decoration: none;

}

 

div.menu ul li a:active

{

    background-color: #465c71;

    color: #cfdbe6;

    text-decoration: none;

}

-----------------------------------------------------------------------------------------------------------------------------------------------

 

please , help Thank.

 

 

Hi,

add DynamicSelectedStyle and StaticSelectedStyle for menu item.

example

<asp:Menu Width="100%" ItemWrap="true" ID="SelectMenu" runat="server" DynamicHorizontalOffset="2"
                    StaticSubMenuIndent="10px" CssClass="menubar" Orientation="Horizontal">
                    <DynamicHoverStyle CssClass="menuitem-hover" />
                    <DynamicMenuItemStyle HorizontalPadding="2px" CssClass="menuitem" />
                    <DynamicMenuStyle BackColor="#F7F6F3" CssClass="IE8Fix" />
                    <DynamicSelectedStyle CssClass="menuitemsel" />
                    <StaticHoverStyle ForeColor="Yellow" />
                    <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="0px" CssClass="menu" />
                    <StaticSelectedStyle CssClass="menuitemselstatic" />
                    <Items>

 

-Regards..

First -in your menu assign the value attribute of each menu item same as the title of the page that it navigates to

the in code file of master page 

write the following code

 protected void Page_Load(object sender, EventArgs e)

        {

            MenuItem ms = Menu1.FindItem(Page.Header.Title);//Menu1 is your menu

            ms.Selectable = false;

            // this will cause the menu item become unselectable on that page. also

            // you will get the access to menu item and you can change other properties 

        } 

 

mark this as answer it it helps you.....Smile

Hi 

 

Mr. CodeJ

i try add DynamicSelectedStyle and  StaticSelectedStyle

it not work for me , menu not highlight  

Please show your css. Maybe because my css ?

Thank you.

 

Mr. vibhumdubey 

It's work for me

but menu item is not properties for set blackground.

I change to set imageurl . It's work. 

Thank you.

 

Hi Amper,

You should assign the style for it, and assign the DataSourceID.


   <DynamicHoverStyle BackColor="Purple" ForeColor="White" />
   <StaticSelectedStyle BackColor="#C000C0" ForeColor="White" HorizontalPadding="2px" />
   <DynamicSelectedStyle BackColor="#C000C0" ForeColor="White" HorizontalPadding="2px" />
   <StaticHoverStyle BackColor="Purple" ForeColor="White" />

 The auto selection only works if bound by a DataSourceID.  So the solution Mr. CodeJ provided not work,You should be able to easily modify your code to add your SiteMapDataSource to the page as a control and then bind the Menu through DataSourceID.  If this is not an option, you'll need to write an OnItemDataBoundHandler to handle this:

    Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
        If String.Equals(CType(e.Item.DataItem, IHierarchyData).Path, SiteMap.CurrentNode.Key, StringComparison.OrdinalIgnoreCase) Then
            e.Item.Selected = True
        End If
    End Sub

--
Danny

Please check the following link:

http://forums.asp.net/p/929231/3713774.aspx

Or use the li and ul directly if you take the menu item staticly.

http://forums.asp.net/p/1359870/2802939.aspx

[RESOLVED] StaticSelectedStyle

I have a asp Menu tabs, but I can't seem to get the color to turn when I select a tab

MasterPage:

<div id="menu">
                <asp:Menu ID="menuEditUser" runat="server" SkinID="MenusAboveGridViews" Orientation="Horizontal"
                                ItemWrap="true">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home" SeparatorImageUrl="App_Themes/main/Images/navbar.gif"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" Value="About" SeparatorImageUrl="App_Themes/main/Images/navbar.gif"/>
                    </Items>
                    <StaticSelectedStyle BackColor="DarkRed" />
                </asp:Menu>
            </div>

SKIN:

<asp:Menu runat="server" DynamicHorizontalOffset="2" Font-Bold="True"
    ForeColor="black" Orientation="Horizontal" StaticSubMenuIndent="40px" SkinId="MenusAboveGridViews">
    <StaticMenuItemStyle BackColor="#e2e0d3" HorizontalPadding="10px" VerticalPadding="5px" CssClass="menu" />
    <DynamicMenuStyle BackColor="#B5C7DE" BorderColor="#607183" BorderStyle="Solid" BorderWidth="1px" />
    <StaticSelectedStyle BackColor="Yellow" ForeColor="White" font-underline="true" />
    <DynamicSelectedStyle BackColor="#607183" ForeColor="White" />
    <DynamicMenuItemStyle BackColor="#B5C7DE" HorizontalPadding="20px" VerticalPadding="5px" />
    <StaticHoverStyle BackColor="#A7B1BB" ForeColor="White" font-underline="true" />
</asp:Menu>

CSS:

 

#menu
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 1em;
    line-height: 1.5;
    background-color: #e2e0d3;
    width: 100%;
    border-bottom: .1em solid #A7B1BB;
    border-left: none;
    border-right: none;
    white-space: normal;
}

 

Hi helixpoint,

Hi Amper,

You should assign the style for it, and assign the DataSourceID.


   <DynamicHoverStyle BackColor="Purple" ForeColor="White" />
   <StaticSelectedStyle BackColor="#C000C0" ForeColor="White" HorizontalPadding="2px" />
   <DynamicSelectedStyle BackColor="#C000C0" ForeColor="White" HorizontalPadding="2px" />
   <StaticHoverStyle BackColor="Purple" ForeColor="White" />

The auto selection only works if bound by a DataSourceID. 

You should be able to easily modify your code to add your SiteMapDataSource to the page as a control and then bind the Menu through DataSourceID. 

Please check the following link:

http://forums.asp.net/p/929231/3713774.aspx

Or use the li and ul directly if you take the menu item staticly.

http://forums.asp.net/p/1359870/2802939.aspx

[RESOLVED] Menu collapses automatically when you click on a menu item

Hi!

i have a menu which is collapses as a default. This is done by following query.

 

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="XPFileExplorer"
            NodeIndent="15" ShowLines="True" Style="text-align: left" ExpandDepth="0">

Now, the problem is, whenever i click on any menu item by expanding the menu, the item page opens but the menu collapses again.

I want to let the menu remain as expanded although a menu item is clicked. i.e. menu shouldn't refresh when a menu item is clicked.

 

Any idea please?

I am not sure but it seems like before it collapses ,you can cancel it

like

private void treeView1_BeforeCollapse(object sender, TreeViewCancelEventArgs e)
{
    e.Cancel = true;
}

 

Regards

 

Thank You for the reply,

but i am not sure where and how to use this query

any help plz!!

hello,

Check out the TreeView PopulateNodesFromClient property. Set the property to true to prevent unneccessary postback to the server when the user click on the TreeView nodes.

 

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.populatenodesfromclient.aspx

Hi!

The property is already true .

Any more idea please?

Hi,

If you will go to DesignView and select treeview

You will find properties with events,Just find

Treeview_BeforeCollapse then click on it.

Automatically event will get created in code behind.

Paste my code line in that event.

Regards

shabir

BryianTan

hello,

Check out the TreeView PopulateNodesFromClient property. Set the property to true to prevent unneccessary postback to the server when the user click on the TreeView nodes.

 

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.populatenodesfromclient.aspx

It fixed my problem but you asked to set the property to "TRUE" which should had been false