How to make a usefull MegaMenu?

10 posts, 0 answers
  1. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 08 May 2012 Link to this post

    Maybe it's me being really stupid, but I just don't get it. Suppose you have a RadTabStrip where each tab has a "Value=XXX" and which postback on each tabclick, to a server side function that would then load different usercontrols based on the "value". How would you do that with a RadMenu "MegaMenu"?

    Looking at the Telerik example for a MegaMenu, I see that you seem to use either a RadSiteMap or custom HTML, both which would be great if all you wanted was to redirect to different URLs, but how would you do to implement our solution? RadSiteMap does not seem to have an ItemClick event, and I find no obvious alternative to amongst Teleriks controls to build a MegaMenu. How would you even access the "Value" property of the sitemap, which is there in the designer to set, but strangely enough isn't listed in the documentation?

    I guess you could go about making complex table/div structures and then have LOTS of hyperlink buttons, but that would be very hard to maintain over time.

    There must be a simple ready to use solution for this that I am missing, where can I find that?? :)
  2. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 09 May 2012 Link to this post

    I can share the solution we did for the time being for this. Basically, we iterate through all nodes on Load and set the NavigateURL to the current page + a querystring based on the value for each node like this:

        protected void radSiteMapDeposit_Load(object sender, EventArgs e)
        {
            IList<RadSiteMapNode> theSiteMapNodes = ((RadSiteMap)sender).GetAllNodes();
            foreach (var theSiteMapNode in theSiteMapNodes)
            {
                if (theSiteMapNode.Value != null && theSiteMapNode.Value != String.Empty)
                {
                    theSiteMapNode.NavigateUrl = Request.URL + "&controlSrc=" + theSiteMapNode.Value;
                }
                else
                {
                    // Just to prevent the titles from being clickable
    theSiteMapNode.Enabled = false;
                }
            }

    And then in the PageLoad() just extract the controlSrc with:

                if (HttpContext.Current.Request["controlSrc"] != null)
                {


                    LoadUserControl(HttpContext.Current.Request["controlSrc"].ToString(), panelUserControl);
                }

    This seem to work OK, even though you may have to adjust it for your specific application (you would probably want to clear the URL on each postback etc).

    But it feels like there must be a better way to do this? 

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 May 2012 Link to this post

    Hello Patrik,

    Although I could not completely get the scenario that you describe I am happy you could find a solution for the issue you described in your first post.

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 10 May 2012 Link to this post

    To make things easier to understand, assume you have a RadTabStrip controlling a RadMultiPage. Now, you decided to replace the RadTabStrip with a "mega menu" instead, implemented using a RadSiteMap. How would you do this, as you won't be able to hard code URLs into the sitemap as the URL would be the same in all cases (as the RadMultiPage is always on the same page)? This should probably be a quite common scenario for a Mega menu, so I am surprised there is not good solution. 

    The problem is that the RadSiteMap does not seem to have any postback events, only redirect to different URLs, which is why we implemented this solution, but it isn't really all that great. Perhaps it's a way to solve it using javascript/AJAX? I guess one way could be to have the NavigateURL point towards a javascript function which would the extract the Value property from the selected/clicked node, how would one do that? Then you could perhaps store that value in a hiddenField which is then checked on next PageLoad (basically the same solution as ours but without the need for Query parameters)
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 11 May 2012 Link to this post

    Hello Patrik,

    To answer your questions - first considering the RadTabStrip and the MegaDropDownMenu and then the RadSitemap:

    1. Since the RadSiteMap is created in a way so that the user can always keep track on the current page and the hierarchy of the pages in a web site you probably refer to a scenario containing a RadSiteMap in a combination with RadTabStrip and a RadMultiPage control. If this is the case I would suggest that you refer to the following articles that might give you a better understanding how this would be accomplished using the highlightpath() method.
    http://www.telerik.com/help/aspnet-ajax/tabstrip-implement-breadcrumb.html
    http://demos.telerik.com/aspnet-ajax/menu/examples/programming/showpath/defaultcs.aspx

    If not, can you provide some markup of the scenario you need to accomplish or a screenshot for better understanding?

    2. In general we do not have server-side events that you can use with the RadSiteMap control except for the NodeDataBound one. Since the main concept of this control is to navigate a user through a web site it is designed in a way to be a relatively light control. If you need to use any other events to further customize its functionality you can choose between making use of the jQuery libraries or switching to a different control (that might fit your scenario better). However, there is also a way to attach a click event to the RadSiteMap as described in the forum post below:
    http://www.telerik.com/community/forums/aspnet-ajax/sitemap/node-click-event-to-open-radwindow.aspx#1372337

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 11 May 2012 Link to this post

    Hi,

    No, no RadTabStrip. Not really sure how I can explain it better than I already have, but will try again.

    First, look at your megamenu example here:

    http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx 

    now assume that instead of having the RadSiteMap point to different pages on the website, they should instead control what PageView is displayed in a RadMultiPage being in the same page as the sitemap. So that if you have 5 RadPageViews, you would have 5 entries in the RadSiteMap.

    Please note that this questions is perhaps more related to the RadSiteMap than the RadMenu, I post it here since the purpose is to create a MegaMenu by using RadSiteMap, but I don't think that the menu part is really relevant here, it's more about having a click in a RadSiteMap control a RadMultiPage

    (We don't actually use a RadMultiPage as we have implemented a more efficient solution in our application, but the basics are still the same)
  8. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 14 May 2012 Link to this post

    Also, could you please provide some code on how to actually implement this, ie "attach on click" event in a way that would allow us to receive the Node.Value serverside (we are using AJAX)?
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 May 2012 Link to this post

    Hello Patrik,

    In the forum post that I previously pointed out you can find a working example demonstrating how you can attach a client-side click event to the RadSiteMap control using its ID and the rsmItem css class. Further to implement the scenario that you describe you can get the text of the clicked node and according to it to show the corresponding pageview in another container for example:
      <script type="text/javascript">
            function pageLoad() {
                $telerik.$(".rsmItem", $get("SiteMap1"))
                .live("click", openWindow);
                //here you can get the text of the node
    // find the contained where the pageview will be displayed
    // show the corresponding pageview
            }
     
            function openWindow() {
                radopen("http://www.telerik.com", "RadWindow2");
                 
            }

    With the code below a simple RadWindow is opened in order to demonstrate the intended functionality, but you can further extend it to match your scenario as explained in the comments. 

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Patrik Johansson
    Patrik Johansson avatar
    270 posts
    Member since:
    May 2010

    Posted 16 May 2012 Link to this post

    Hi,

    Thanks for your reply. Could you please tell how to extract the Value of the node? Also, unless I have missed something, there still is no server side code involved here, which was my original question. if you could please provide that it would be appreciated. 
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 May 2012 Link to this post

    Hello Patrik,

    Indeed in the current version of the control the server side OnClick event is missing by design and the one way you can have this functionality is to use client side and jQuery as explained above. In order to find a node on the server side you can use the following code:
    RadSiteMapNode node =  RadSiteMap3.Nodes.FindNode(n => n.Value.Equals("a"));

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017