menu on Telerik site

9 posts, 2 answers
  1. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 16 Feb 2010 Link to this post

    Hi,

    I am trying to understand how you people build the "Products" menu on the Telerik website.

    For a customer we must build a solution with the same hierarchy, so on click the sub- and the sub-sublevel is shown in one panel.

    Can you explain how you did it?

    Best Regards,

    Marc
  2. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 16 Feb 2010 Link to this post

    Hello Marc,

    Please, view this kb article:
    http://www.telerik.com/support/kb/aspnet-ajax/menu/telerik-web-site-radmenu-navigation.aspx


    Greetings,
    Peter
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 16 Feb 2010 Link to this post

    I think you might want to check out the Multi-column RadMenu demo, this seems to show an example of exactly what you're looking for.
  5. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 16 Feb 2010 Link to this post

    You people are soooo coooool......
  6. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 18 Feb 2010 Link to this post

    Hi Peter,

    I fill five Contextmenu's from DB.
    Now I want the five Contextmenu's to expand on clicking the arrows.

    It is giving me quite some headache to amend the javascript so that the menu can work with multiple Context menu's.

    Have the following code:
    <%@ Control Language="VB" AutoEventWireup="true" CodeFile="menu.ascx.vb" Inherits="Menu" %> 
     
     
    <script type="text/javascript"
     
    // <![CDATA[
        var dropDownArrow;
        Sys.Application.add_load(function() {
        var menu = $find('<%= menuTopNavigation.ClientID %>');
        
        
         for (var u = 0; u < 2; u++) {//nieuw
        
        var productsItem = menu.get_items().getItem(u);
            dropDownArrow =
                    productsItem.get_element().getElementsByTagName('span')[0].appendChild(                    
                    document.createElement("a")
                    );
                    
            var contextMenu
                    
            if (u==0) {
            contextMenu = $find('<%= niveauContext0.ClientID %>');
            }
            else if (u==1) {
            contextMenu = $find('<%= niveauContext1.ClientID %>');
            }
            else if (u==2) {
            contextMenu = $find('<%= niveauContext2.ClientID %>');
            }
            else if (u==3) {
            contextMenu = $find('<%= niveauContext3.ClientID %>');
            }
            else if (u==4) {
            contextMenu = $find('<%= niveauContext4.ClientID %>');
            }
            
            dropDownArrow.id = 'rmExpandMenuArrow';
            dropDownArrow.href = "#";
            dropDownArrow.onclick =
                    function(e) {
                        if (!e) e = window.event;
                        if (!e.target) e.target = e.srcElement;
                        // open context menu
                        var pos = $telerik.getLocation(e.target.parentNode);
                        if (!(/rmMyClicked/.test(productsItem.get_linkElement().parentNode.className)))
                        {
                        
                            contextMenu.showAt(pos.x, pos.y + e.target.parentNode.offsetHeight);
                            // set menu selected state
                            productsItem.get_linkElement().className += ' rmMyClicked';
                            productsItem.get_linkElement().parentNode.className += ' rmMyClicked';
                        } else {
                            productsItem.get_linkElement().parentNode.className.replace(' rmMyClicked', '');
                            contextMenu.hide();
                        }
                        // cancel event
                        e.cancelBubble = true;
                        if (e.stopPropagation)
                            e.stopPropagation();
                        if (e.preventDefault)
                            e.preventDefault();
                        return false;
                    };
            
            contextMenu.add_hidden(function(sender, args) {
                setTimeout(function() {
                
                    var link = productsItem.get_linkElement().parentNode;
                    link.className = link.className.replace('rmMyClicked', '');
                }, 10);
            });
            }
        });
        
        
        
        
        
        
        Sys.Application.add_unload(function() {
            if (dropDownArrow != null) {
                dropDownArrow.onclick = null;
                if (!window.Page_Validators)
                    return;
                for (var i = 0; i < Page_Validators.length; i++) {
                    var validatorElement = Page_Validators[i];
                    validatorElement.evaluationfunction = null;
                    if (validatorElement.dispose) {
                        validatorElement.dispose();
                        validatorElement.dispose = null;
                    }
                }
            }
        }); 
        // ]]> 
    </script> 
     
    <div id="Menu"><telerik:RadMenu ID="menuTopNavigation" DataFieldID="id" DataTextField="tekst" DataNavigateUrlField="linkto" runat="server" Flow="Horizontal" Skin="Mprise" EnableEmbeddedSkins="False" EnableViewState="False"></telerik:RadMenu></div
     
     
    <telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext0" EnableViewState="false"
    <Items> 
    <telerik:RadMenuItem> 
    <ItemTemplate>               
    <div class="tBorderBox"><asp:PlaceHolder runat=server id="plh0" /></div
    </ItemTemplate>  
    </telerik:RadMenuItem> 
    </Items> 
    </telerik:RadContextMenu> 
     
    <telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext1" EnableViewState="false"
    <Items> 
    <telerik:RadMenuItem> 
    <ItemTemplate>               
    <div class="tBorderBox"><asp:PlaceHolder runat=server id="plh1" /></div
    </ItemTemplate>  
    </telerik:RadMenuItem> 
    </Items> 
    </telerik:RadContextMenu> 
     
    <telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext2" EnableViewState="false"
    <Items> 
    <telerik:RadMenuItem> 
    <ItemTemplate>               
    <div class="tBorderBox"><asp:PlaceHolder runat=server id="plh2" /></div
    </ItemTemplate>  
    </telerik:RadMenuItem> 
    </Items> 
    </telerik:RadContextMenu> 
     
    <telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext3" EnableViewState="false"
    <Items> 
    <telerik:RadMenuItem> 
    <ItemTemplate>               
    <div class="tBorderBox"><asp:PlaceHolder runat=server id="plh3" /></div
    </ItemTemplate>  
    </telerik:RadMenuItem> 
    </Items> 
    </telerik:RadContextMenu> 
     
    <telerik:RadContextMenu runat="server" Skin="Telerik2008" EnableEmbeddedSkins="false" ID="niveauContext4" EnableViewState="false"
    <Items> 
    <telerik:RadMenuItem> 
    <ItemTemplate>               
    <div class="tBorderBox"><asp:PlaceHolder runat=server id="plh4" /></div
    </ItemTemplate>  
    </telerik:RadMenuItem> 
    </Items> 
    </telerik:RadContextMenu> 
     

    Thanks in advance for your reply.

    Marc

  7. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 24 Feb 2010 Link to this post

    Hi Marc,

    Attached is a modified demo that has context menu arrows for the first two items. You can extend the approach for as many items as you need.

    Feel free to contact us if you have questions.


    Greetings,
    Peter
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 24 Feb 2010 Link to this post

    Thank you very much Peter.
  9. Angus
    Angus avatar
    1 posts
    Member since:
    Jan 2011

    Posted 25 Jan 2011 Link to this post

    Hi Peter,

    I tried to implement localization using the sample you've provided. The radmenu_telerik2008.gif (please see the attached) is used for background in the top menu.

    Here's the sample code:
    <telerik:RadMenu ID="menuTopNavigation" runat="server" Flow="Horizontal" Skin="Telerik2008" EnableEmbeddedSkins="false" EnableViewState="false">
        <Items>
            <telerik:RadMenuItem Text="<%$ Resources: Resource1, Home %>"  Value="products" CssClass="tProducts" Width="136" NavigateUrl="~/Products.aspx" />
              
            <telerik:RadMenuItem Text="<%$ Resources: Resource1, Articles %>"  Value="consulting" NavigateUrl="~/Consulting.aspx" CssClass="tServices" Width="115">         
            </telerik:RadMenuItem>
              
            <telerik:RadMenuItem Text="<%$ Resources: Resource1, Admin %>"  Value="purchase" NavigateUrl="~/Purchase.aspx" CssClass="tPurchase" Width="121">            
            </telerik:RadMenuItem>
              
        </Items>
    </telerik:RadMenu>

    Attached sample.gif is what I want to achieve.

    Thanks in advance,

    B.E.

     

  10. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Jan 2011 Link to this post

    Hello Angus,

    Can you try the steps from this forum post and let me know how it goes?

    Regards,
    Peter
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017