Mega Menu with server side redirects on hyperlinks

5 posts, 0 answers
  1. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 09 Jun 2011 Link to this post

    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
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 14 Jun 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 15 Jun 2011 Link to this post

    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

    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.

  5. Daniel Lisowski
    Daniel Lisowski avatar
    18 posts
    Member since:
    Mar 2009

    Posted 08 Sep 2011 Link to this post

    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.
  6. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 15 Sep 2011 Link to this post

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