+1-888-365-2779
Try Now
More in this section

Related Menus

9 posts, 1 answered
  1. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    30 Aug 2010
    Link to this post
    Hi,


    First, I'd like to thank you guys for all the great support that you give. Second, I'd like to ask is it possible to have a RadMenu update a related RadMenu when the OnClientMouseOver event is fired. I noticed your example showing the ItemClicked event for related menus and I got that example to work but I am having trouble getting it to work with the OnClientMouseOver event. I realize that this is a client side event that does not cause a call to the server but I force a call using the RadAjaxManager control. The following is my code:

    This code is in my userControl.ascx

    <div id="CloudDropDown" class="clearfix">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function ChangeSubMenu(s, e) {
                    $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(e.get_item().get_text());
                }
            </script>
       </telerik:RadCodeBlock>
     
         
        <telerik:RadAjaxManagerProxy ID="ajaxManagerProxy" runat="server">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="mainMenu">
                   <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="subMenu" LoadingPanelID="radAjaxLoadingPanel" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
     
        <telerik:RadMenu ID="mainMenu" runat="server" DataSourceID="SitemapDataSource1" Flow="Horizontal" OnClientMouseOver="ChangeSubMenu" MaxDataBindDepth="1" EnableEmbeddedSkins="false" Skin="MedpacRed">
        </telerik:RadMenu>
     
        <telerik:RadMenu ID="subMenu" runat="server" EnableEmbeddedSkins="false" Skin="MedpacRed" Visible="false">
        </telerik:RadMenu>
         
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    </div>


    this following is my code behind of my usercontrol.cs

    protected void Page_Load(object sender, EventArgs e)
        {
            RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
           
            manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
     
             
        }
     
        protected void manager_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            Guid rootGui = Utility.FindPageGuid(e.Argument);
            List<SiteNavigationItem> items = Utility.ConvertCmsPages(Utility.FindChildren(e.Argument), rootGui);
     
             
            subMenu.DataSource = items;
            subMenu.DataTextField = "Text";
            subMenu.DataNavigateUrlField = "Url";
            subMenu.DataFieldID = "ID";
            subMenu.DataFieldParentID = "ParentID";
            subMenu.EnableEmbeddedSkins = false;
            subMenu.DataBind();
            subMenu.Visible = true;
        }

    When I hover over a menu item, the call gets to the server and the datasource of the dependent menu is getting populated with the appropriate items. However, nothing gets updated on the page. I verified that data was populating the dependent menu(i.e. subMenu) by following your example that used the ItemClick event to trigger the asynchronous request. That test worked fine. Can you help me accomplish this or tell me if it's possible? Thanks in advance for you help.

    Thank you,
    Bobby
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    30 Aug 2010
    Link to this post
    Hello Bobby,

    Thank you for using our services.

    The problem is that the RadMenu is bound during the AjaxRequest, however the bound items are not sent to the client. Can you try this using the ajaxRequestWithTarget method of the AjaxManager? Sample can be found here.

    Greetings,
    Radoslav Georgiev
    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. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    30 Aug 2010
    Link to this post
    Thanks for your repsonse.

    I tried your suggestion with my code and it returned the following error when I looked in the error console provided by firebug. I then tried the example posted in the link that you provided. It returned the same error. The following is the error:

    $find("ctl00_ctl00_ajaxManager") is null.

    I have my RadAjaxManager in a base master page. The master page that has my user control inherits from this base master. The find method works find when data is sent to the server but when the response returns, it says it can't find my RadAjaxManger. Any ideas? The following is code from my test.

    Base Master Page.
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Base.master.cs" Inherits="App_Master_Base" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head id="Head1" runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body class="outthere">
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="scriptManager" runat="server" />
            <telerik:RadAjaxManager ID="ajaxManager" runat="server" EnableAJAX="false" />
            <!-- The skin should be set, else the loading panel is not shown -->
            <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" BackgroundPosition="Center" Skin="Default" />
      
            <div id="pageWrapper">
                <div id="page">
                    <!-- start header -->
                    <div id="header" class="clearfix">
                        <div id="medpacBanner" class="clearfix">
                            <div id="logo">
                                <img id="medpaclog" runat="server" src="~/App_Themes/MedpacRed/images/medpacLogo.gif" />
                            </div>
                            <div id="menu" class="clearfix">
                                <asp:ContentPlaceHolder ID="contentMenu" runat="server"/>
                            </div>
                            <div id="genericBanner">
                                <img id="Img1" runat="server" src="~/App_Themes/MedpacRed/images/PinTek_MedPak_WebsiteBanner.png" alt="banner" width="1000" />
                            </div>
                        </div>
                    </div>
                    <!-- end header -->
              
                    <div id="contentWrapper" class="clearfix">
                        <!-- start content -->
                        <div id="content" class="clearfix">
                            <div id="baseMainContentWrapper">
                                <asp:ContentPlaceHolder ID="baseContent" runat="server"/>
                            </div>
      
                            <!-- start footer -->
                            <div id="footer">
                                <asp:ContentPlaceHolder ID="contentFooter" runat="server"/>
                            </div>
                            <!-- end footer -->
                        </div>
                        <!-- end content -->
                    </div>
                </div>
                <!-- end page -->
            </div>
        </form>
    </body>
    </html>

    Content Master Page
    This content master page inherits from the base master page. I used sitefinity top drop my custom user control menu into a content place holder and the following is the code that I used for the test from your website.

    UserControl.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MedpacHorizontalMenu.ascx.cs" Inherits="Sitefinity_UserControls_Navigation35_MedpacHorizontalMenu" %>
      
      
    <div id="CloudDropDown" class="clearfix">
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function InitiateAsyncRequest(argument) {
                    var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
                    ajaxManager.ajaxRequest(argument);
                    return false;
                }
                function RefreshDescription(sender, eventArgs) {
                    var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
                    ajaxManager.ajaxRequestWithTarget("<%= CountriesListBox.UniqueID %>", sender.get_selectedItem().get_text());
                }
      
            </script>
       </telerik:RadCodeBlock>
       
           
        <telerik:RadAjaxManagerProxy ID="ajaxManagerProxy" runat="server">
           <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadListBoxPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CountriesListBox">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
       
        <div class="demoMain">
          
        <ul class="demoUL">
            <li><a id="aEU" href="#" onclick="return InitiateAsyncRequest('Europe');">Europe</a></li>
            <li><a id="aNA" href="#" onclick="return InitiateAsyncRequest('NorthAmerica');">North America</a></li>
            <li><a id="aSA" href="#" onclick="return InitiateAsyncRequest('SouthAmerica');">South America</a></li>
            <li><a id="aAS" href="#" onclick="return InitiateAsyncRequest('Asia');">Asia</a></li>
            <li><a id="aAF" href="#" onclick="return InitiateAsyncRequest('Africa');">Africa</a></li>
            <li><a id="aAU" href="#" onclick="return InitiateAsyncRequest('Australia');">Australia</a></li>
        </ul>
          
        <asp:Panel ID="RadListBoxPanel" runat="server" CssClass="countryList">
            <h3><asp:Label ID="lblTitle2" runat="server" /></h3>
            <telerik:RadListBox ID="CountriesListBox" runat="server" Skin="Sunset" Width="100%"
                OnClientSelectedIndexChanged="RefreshDescription" OnSelectedIndexChanged="CountriesListBox_SelectedIndexChanged" Visible="false" />
        </asp:Panel>
          
        <asp:Panel ID="Panel1" runat="server" CssClass="descriptionText">
            <h3><asp:Label ID="lblTitle" runat="server" /></h3>
            <asp:Label ID="lblDescription" runat="server" />
        </asp:Panel>
          
        </div>
      
    </div>

    and the code behind file usercontrol.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Text;
    using Telerik.Cms;
    using Medpac.Controls.Navigation;
    using System.Configuration;
    using System.Data.SqlClient;
      
    public partial class Sitefinity_UserControls_Navigation35_MedpacHorizontalMenu : System.Web.UI.UserControl
    {
        public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
          //  string description = GetDescription(e.Argument);
            lblDescription.Text = "This is my test description";
      
            CountriesListBox.Visible = true;
      
              
      
            PopulateCountriesListBox(e.Argument);
        }
      
        private string GetDescription(string name)
        {
            String ConnString = ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString;
            SqlConnection MySqlConnection = new SqlConnection(ConnString);
            MySqlConnection.Open();
            string descr = string.Empty;
            try
            {
                SqlCommand command = new SqlCommand("SELECT Description FROM Descriptions WHERE Name=\'" + name + "\'", MySqlConnection);
                descr = (string)command.ExecuteScalar();
            }
            finally
            {
                MySqlConnection.Close();
            }
            return descr;
        }
        private string GetCountryDescription(string countryName)
        {
            String ConnString = ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString;
            SqlConnection MySqlConnection = new SqlConnection(ConnString);
            MySqlConnection.Open();
            string descr = string.Empty;
            try
            {
                SqlCommand command = new SqlCommand("SELECT Description FROM CountryDetails WHERE CountryName=\'" + countryName + "\'", MySqlConnection);
                descr = (string)command.ExecuteScalar();
            }
            finally
            {
                MySqlConnection.Close();
            }
            return descr;
        }
        private void PopulateCountriesListBox(string name)
        {
            CountriesListBox.Items.Clear();
      
            switch (name)
            {
                case "NorthAmerica":
                    CountriesListBox.Items.Add(new RadListBoxItem("USA", "USA"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Canada", "Canada"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Mexico", "Mexico"));
                    lblTitle.Text = lblTitle2.Text = "North America";
                    break;
                case "SouthAmerica":
                    CountriesListBox.Items.Add(new RadListBoxItem("Brazil", "Brazil"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Argentina", "Argentina"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Chile", "Chile"));
                    lblTitle.Text = lblTitle2.Text = "South America";
                    break;
                case "Europe":
                    CountriesListBox.Items.Add(new RadListBoxItem("England", "England"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Germany", "Germany"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Sweden", "Sweden"));
                    lblTitle.Text = lblTitle2.Text = "Europe";
                    break;
                case "Africa":
                    CountriesListBox.Items.Add(new RadListBoxItem("Egypt", "Egypt"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Morocco", "Morocco"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Botswana", "Botswana"));
                    lblTitle.Text = lblTitle2.Text = "Africa";
                    break;
                case "Asia":
                    CountriesListBox.Items.Add(new RadListBoxItem("China", "China"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Thailand", "Thailand"));
                    CountriesListBox.Items.Add(new RadListBoxItem("Mongolia", "Mongolia"));
                    lblTitle.Text = lblTitle2.Text = "Asia";
                    break;
                case "Australia":
                    CountriesListBox.Items.Add(new RadListBoxItem("Australia", "Australia"));
                    lblTitle.Text = lblTitle2.Text = "Australia";
                    break;
            }
        }
        protected void CountriesListBox_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            lblTitle.Text = CountriesListBox.SelectedValue;
            lblDescription.Text = GetCountryDescription((sender as RadListBox).SelectedValue);
        }
      
    }


    I comment out the line that went to your Sql database and just returned a constant string for the description. When the reponse retuns the following error is thrown.

    $find("ctl00_ctl00_ajaxManager") is null.

    Thanks again for your help.
    Bobby
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    31 Aug 2010
    Link to this post
    Hi Bobby,

    Can you try removing the EnableAjax property and leave it to its default setting?

    Sincerely yours,
    Radoslav Georgiev
    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
  5. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    31 Aug 2010
    Link to this post

    Radoslav,

    The first version of my code has EnableAjax="true" and it returned a generic error message that I did not understand. I was searching Telerik's form and found a post from one of your team members that said set the EnableAjax property to false to see a more specific error message. So, if I am not mistaken, both ways do not work for me.

    Thanks for taking the time to help figure this out,

    Bobby

  6. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    01 Sep 2010
    Link to this post
    Hi Radoslav,

    I verified my last response and the update did not occur. Is there a working example of how to get the RadMenu to cause an ajax request that occurs when a user mouses over a menu item(i.e. the parent nodes in the site), then use the name of the parent node to populate another RadMenu showing the children nodes of the parent?

    Thanks again for your help,
    Bobby
  7. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    02 Sep 2010
    Link to this post
    Hi,

    I was wondering if anyone knew if this is possible. I wanted to demo this functionality to a potential client really soon and Sitefinity is the CMS solution we are suggesting that they purchase in order to meet their CMS requirements. I hate to rush an answer but this is really time sensitve and any help would be greatly appreciated.

    Thanks in advance,
    Bobby
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    03 Sep 2010
    Link to this post
    Hello Bobby,

    Thank you for getting back to us.

    I have worked on a small sample which shows how to achieve this. The trick here is to make the RadAjaxManager update the second menu as opposed to setting the first menu updating the second one. I have attached the sample code to my response.

    Kind regards,
    Radoslav Georgiev
    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
    Answered
  9. Bobby
    Bobby avatar
    56 posts
    Registered:
    11 Feb 2009
    03 Sep 2010
    Link to this post
    Hi Radoslav,

    That worked perfectly. Thanks for all your help. Once again telerik's support stands alone.

    Thanks again,
    Bobby
Register for webinar
9 posts, 1 answered