[Solved] Mega Menu with server side redirects on hyperlinks

[Thad]

Hello,

We have implemented the MegaMenu per the example found here:
http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx

At the top of our menu, the user can select from a list of agencies and agents.  I've attached a screen shot of how it looks in our scenario.

When they select a specific agency/agent, then click on a link specific to an agency/agent, we need that link to post back to the server to meet the following business requirements:
 - users must see the spinning AJAX notification when a redirect is occuring
 - all querystring data must be encrypted and not visible in the URL or in the markup

The closest I can get this to working is to set RadSiteMapNode.Value to the URL and RadSiteMapNode.NavigateUrl to javascript:NavTo() and having NavTo fire an AjaxRequest.

<telerik:RadSiteMapNode Value="{\"linkid\": \"230\"}" NavigateUrl="javascript:NavTo(this);"
    Text="Agency Info" />

function NavTo(sender) {

    // somehow find out the value from the RadSiteMapNode clicked to retrieve the link


    var linkId = '230';

    $find(window.ajaxManagerID).ajaxRequest('MenuNav:' + linkId);

}

Problem is that I passing "this" into the javascript method passes in a DOMWindow reference, not a reference to the link clicked.

Anyone have any suggestions on where I should go from here?

Thanks!!
Thad

[Cori]

Hello Thad,

The only thing I can think of, is setting the NavigateUrl to the actual link and then on the client, loop through the SiteMapNodes using jQuery and attach click events to each link.

I hope that helps.

[Kalina]

Hi,

Let me suggest you nest a link tag in the NodeTemplate of the RadSiteMap, and then handle the “onclick” event of the link and modify its navigate Url:

<telerik:RadSiteMap runat="server" ID="RadSiteMap1"
    DataSourceID="SiteMapDataSource1"
    Skin="Hay" DataFieldID="ID"
    DataFieldParentID="ParentID"
    DataTextField="Title"
    ShowNodeLines="true">
    <DefaultLevelSettings>
        <NodeTemplate>
            <div class="ContentHolder">
                <a href='#' onclick="javascript:onLinkClick(this);">
                  <%# DataBinder.Eval(Container.DataItem, "title") %>
                </a>
            </div>
        </NodeTemplate>
    </DefaultLevelSettings>
    <LevelSettings>
        <telerik:SiteMapLevelSetting>
            <ListLayout RepeatColumns="2" AlignRows="true" />
        </telerik:SiteMapLevelSetting>
    </LevelSettings>
</telerik:RadSiteMap>

function onLinkClick(link) {
    var a = link;
    a.href = "http://www.yourURL.com";
}

Regards,
Kalina
the Telerik team

[Daniel Lisowski]

What about using a modification of this for a RadSiteMapNode? We have an individual node in a RadSiteMap which we want to launch a pop-up window with a specified size. Traditionally we would put some javascript on a hyperlink or button to launch an open.window with parameters for the window sizing, however, this does not seem the same with the Telerik Menu object. A sample of our code is below:

<telerik:RadSiteMap ID="RadSiteMap1" runat="server" Skin="Office2007">
<Nodes>
<telerik:RadSiteMapNode NavigateUrl="xyz" Target="_blank" Text="XYZ Site" />
.
.
.
</Nodes>
</telerik:RadSiteMap>

While I've been able to place an onclick event on the RadSiteMap which does open a pop-up using javascript it also opens the normal window as would be expected from the NavigateURL="xyz" attribute of the RadSiteMapNode. What we want is to have the NavigateURL launch a pop-up OR disable the OOTB function of this RadSiteMapNode and include code to call a javascript function to launch the pop-up.

[Kalina]

Hi Daniel Lisowski,

You can try attaching a “click” event at the rendered RadSiteMap  nodes(links) in this manner:

<script type="text/javascript">
function pageLoad() {
    $telerik.$('.rsmLink').click(function () {
    window.open(this.attributes.href.nodeValue, this.attributes.href.nodeValue, "width=500,height=500");
    return false;
    });
}
</script>

Best wishes,
Kalina
the Telerik team