How to make a usefull MegaMenu?

[improwise]

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?? :)

[improwise]

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? 

[Kate]

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

[improwise]

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)

[Kate]

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

[improwise]

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)

[improwise]

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)?

[Kate]

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

[improwise]

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. 

[Kate]

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