Adding radmenuitems on AjaxRequest

4 posts, 1 answers
  1. William
    William avatar
    4 posts
    Member since:
    Aug 2016

    Posted 16 Apr Link to this post

    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"])));
                }
            }

     

     

  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    440 posts

    Posted 19 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. William
    William avatar
    4 posts
    Member since:
    Aug 2016

    Posted 24 Apr in reply to Peter Milchev Link to this post

    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.

  4. William
    William avatar
    4 posts
    Member since:
    Aug 2016

    Posted 24 Apr in reply to Peter Milchev Link to this post

    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.
Back to Top