Hi,
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, pass that item text to the server, then use that name as a key to look up other items to populate another dependent RadMenu? I have tried this using the following code but was unsuccesful.
UserControl.ascx
UserControl.ascx.cs
Here is my master page that houses my user control.
Can this be accomplished or am I doing something wrong?
Thanks for you help,
Bobby
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, pass that item text to the server, then use that name as a key to look up other items to populate another dependent RadMenu? I have tried this using the following code but was unsuccesful.
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 %>").ajaxRequestWithTarget("<%= mainMenu.UniqueID %>", e.get_selectedItem().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
>
UserControl.ascx.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;
}
Here is my master page that houses my user control.
<%@ 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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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"
/>
<!-- 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
>
Can this be accomplished or am I doing something wrong?
Thanks for you help,
Bobby