Adding radmenuitems on AjaxRequest

[William]

I have a master page with a radmenu and a radComboBox on it.  

 

In OnClientSelectedIndexChanged for the radcombobox, I make an AjaxRequest and in the handling method server-side I want to add and/or remove radmenu items based on the new value in the radcombobox.  

I've been unable to get this to happen - the adding of radmenuitems occurs in the server side code, but it's not reflected on the client.

I have tried it with a RadAjaxPanel wrapping the whole thing.

I've tried Ajaxifying the RadMenu, the "Events" radmenuitem and also the "Summary radmenuitem.

The best outcome sees the code behind executing as expected, and the radmenuitems being added, but the items don't show up on the client.

May please be given some guidance?  

 

Thank you.

 

The relevant code snippets are as follows:

 

Radmenu and combobox

<telerik:LayoutColumn Span="3" SpanMd="3" SpanSm="12" SpanXs="12">
    <div class="RadMenu">
        <%--RadMenu_Bootstrap--%>
        <ul class="rmRootGroup rmHorizontal" style="border: none!important;">
            <li class="rmItem" style="border: none!important;">
                <div class="rmContent">
                    <img src="/images/saLogo2.png" alt="site logo" style="vertical-align: middle;" />
                </div>

            </li>
            <li class="rmItem" style="border: none!important;">
                <div class="rmContent">
                    <img id="imgOrgLogo" runat="server" visible="false" src="" style="vertical-align: middle;" />
                    <telerik:RadComboBox ID="rcbOrgScope" runat="server" Width="200" AutoPostBack="false"
                        OnClientSelectedIndexChanged="OrgScopeChange" DropDownAutoWidth="Enabled">
                    </telerik:RadComboBox>
                </div>
            </li>
        </ul>
    </div>

</telerik:LayoutColumn>
<%--Main Nav--%>
<telerik:LayoutColumn Span="9" SpanMd="9" SpanSm="12" SpanXs="12">
    <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Auto" EnableAjaxSkinRendering="true">
        <Items>
            <telerik:RadMenuItem Text="Project">
                <ItemTemplate>
                    <telerik:RadComboBox ID="rcbProject" runat="server" AutoPostBack="false" OnClientSelectedIndexChanged="ProjectChange"
                        Width="350" ZIndex="7010">
                    </telerik:RadComboBox>
                </ItemTemplate>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Dashboard" NavigateUrl="Dashboard.aspx"></telerik:RadMenuItem>
           <telerik:RadMenuItem Text="Events">
                <Items>
                    <telerik:RadMenuItem Text="Map" NavigateUrl="Events/Events.aspx"/>
                    <telerik:RadMenuItem Text="Summary"/>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem CssClass="LastItem">
                <ItemTemplate>
                    <telerik:RadButton ButtonType="SkinnedButton" Text="Log out" OnClick="Logout_Click" runat="server"></telerik:RadButton>
                    <a href="Profile.aspx">
                        <img src="/images/icons8-User-50.png" height="40" width="40" style="vertical-align: bottom;" />
                    </a>
                </ItemTemplate>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
</telerik:LayoutColumn>

 

 

JavaScript

<telerik:RadCodeBlock ID="rcbMaster" runat="server">
            <script>
                function OrgScopeChange(sender, args) {
                    var ajaxManager = <%=RadAjaxManager.GetCurrent(Page).ClientID%>;
                    ajaxManager.ajaxRequest('orgChange');
                }
                </script>
</telerik:RadCodeBlock>

 

CodeBehind

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.MenuUserSettings();
                if (this.HasEventManagement)
                    this.SetEventTypesMenuItem();
            }

            this.AjaxWireup();


        }

protected void AjaxWireup()
        {

            RadAjaxManager1.AjaxRequest += Ram_AjaxRequest;
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, rcbOrgScope);
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, RcbProject);
            RadAjaxManager1.ClientEvents.OnRequestStart = "MasterRequestStart";
        }

        private void Ram_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument.Equals("orgChange", StringComparison.InvariantCultureIgnoreCase))
            {
                this.OrganizationScopeInitals = rcbOrgScope.SelectedItem.Text;
               this.SetEventTypesMenuItem();
            }
        }

        private void SetEventTypesMenuItem()
        {
            RadMenuItem rmi = this.RadMenu1.FindItemByText("Summary");

            var dt = EventCore.Data.Access.LookupDao.EventTypeLookup(this.OrganizationScope.EventManagementProfile);
//OrganizationScope comes from the value in the radcombo box

            foreach (System.Data.DataRow r in dt.Rows)
            {
                rmi.Items.Add(new RadMenuItem(r["eventType"].ToString(), String.Format("~/Events/Summary.aspx?eid={0}", r["eventTypeId"])));
            }
        }

 

 

[Peter Milchev]

Hello William,

AJAX-enabling a control with both the AjaxManager and an AjaxUpdatePanel/asp:UpdatePanel can lead to issues - Controls Wrapped in AjaxPanel and Added to AjaxManager Settings. 

We have modified the AjaxSettings that you have provided in order to include the RadMenu and the items were properly added to the Summary menu item. Attached is the sample project including the modifications. To run it, place the .NET 4.5 version of the Telerik.Web.UI assemblies to the bin folder of the project. 

Another possible approach to achieve the addition of an item when a selection is made is to use the OnSelectedIndexChanged event of the ComboBox: 

<telerik:RadAjaxManager runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadComboBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Auto" EnableAjaxSkinRendering="true">
    <Items>
        <telerik:RadMenuItem Text="Dashboard" NavigateUrl="Dashboard.aspx"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Events">
            <Items>
                <telerik:RadMenuItem Text="Map" NavigateUrl="Events/Events.aspx" />
                <telerik:RadMenuItem Text="Summary" />
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>
<telerik:RadComboBox ID="RadComboBox1" AutoPostBack="true" runat="server" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem Text="ComboBox Item 1" />
        <telerik:RadComboBoxItem Text="ComboBox Item 2" />
    </Items>
</telerik:RadComboBox>

protected void RadComboBox1_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
    RadMenu1.FindItemByText("Summary").Items.Add(new Telerik.Web.UI.RadMenuItem(e.Text));
}

This approach is also available in the attached project.

Regards,
Peter Milchev
Progress Telerik

[William]

Thank you Peter.  I apologize for taking so long to reply.  I got pulled in another direction last week.  I will download the example, read the article, and  your response in depth and follow up as soon as possible. 

 

Thank you again.

[William]

That worked.  Thanks.  I had such tunnel vision AJAXingthe assorted controls that I didn't step back to see if just using autopostback would fit my use case.  It does.  Thanks for the help and also the related information you provided.