ToolbarDropdown Text

5 posts, 0 answers
  1. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 14 May 2015 Link to this post

    Hi,

    I have a RadToolbar with a ToolbarDropDown inside it.  I have an onclicking client event on the toolbar which I am using to detect if the dropdown button selected is a particular command.  If it is, I am doing set_cancel(true), then populating another dropdown on the page with certain values via ajax.  The setting of the values is working fine.  My problem is, when I do the set_cancel, the toolbardropdown text does not change to what the user selected.  For example, take the following:

    <telerik:RadToolBarDropDown ImagePosition="Right" DropDownWidth="250">
                <Buttons>
                    <telerik:RadToolBarButton Text="Hello" Value="1"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Goodbye" Value="1"></telerik:RadToolBarButton>
                </Buttons>
        </telerik:RadToolBarDropDown>

     On my web page, the button selected is "Hello".  If I change the dropdown to select "Goodbye", all my client code is executed without issue, but the text on the dropdown remains "Hello" instead of changing to "Goodbye".  I've tried setting it manually but no luck.  Is there a way around this?  It works ok for me if I do a postback, but I'm trying to avoid a postback.

     

    Thanks!

    Richard

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 18 May 2015 Link to this post

    Hello Richard,

    I am afraid, we do not fully understand what is the expected outcome after a user clicks on a particular button in the RadToolbarDropDown and which item/button's Text should be changed. I attached a sample project to this reply. Could you please modify it so it reproduces the behavior you observe and post the modifications made.

    It would be helpful if you can point out the chain of user actions and what is the result you expect.

    Regards,
    Ivan Danchev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 21 May 2015 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thank you for your response.  My current project has a postback occuring and I am setting the text of the radtoolbardropdown in the post back.  What I need is to get rid of the postback and do this client side.  Below is the aspx and .cs changes I made (I do not seem to be allowed to upload the entire zip to you otherwise I would do that).  Thank for you for your help!

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ToolBarSelectionTest.aspx.cs" Inherits="ToolBarSelectionTest" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
     
            <script type="text/javascript">
                function toolBarClick(sender, args) {
                    if (args.get_item().get_commandName() === "HelloCommand") {
     
                        var toolBar = $find("<%= RadToolBar2.ClientID %>");
                        toolBar.trackChanges();
                        var newDropDown = new Telerik.Web.UI.RadToolBarDropDown();
                        var newButton = new Telerik.Web.UI.RadToolBarButton();
                        newDropDown.set_text("Added client-side");
                        newButton.set_text("Added Button");
                        newDropDown.get_buttons().add(newButton);
                        toolBar.get_items().add(newDropDown);
                        // added
                        var txt = args.get_item().get_text();
                        var val = args.get_item().get_value();
                        args.get_item().set_text(txt);
                        args.get_item().set_value(val);
                        // end added
                        toolBar.commitChanges();
                        args.set_cancel(true);
                        alert('RadToolbar1 Dropdown text does not change');
                    }
                    else {
                        alert("Clicked " + args.get_item().get_text());
                    }
                }
            </script>
            <div>
                <asp:Label runat="server" ID="Label1" Text="RadToolBar1"></asp:Label>
                <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicking="toolBarClick" OnButtonClick="RadToolBar1_ButtonClick" AutoPostBack="true" >
                    <Items>
                        <telerik:RadToolBarDropDown ImagePosition="Right" DropDownWidth="250" >
                            <Buttons>
                                <telerik:RadToolBarButton Text="Hello" Value="1" CommandName="HelloCommand" CheckOnClick="true" Group="Group1"></telerik:RadToolBarButton>
                                <telerik:RadToolBarButton Text="Goodbye" Value="2" CommandName="GoodbyeCommand" CheckOnClick="true" Group="Group1"></telerik:RadToolBarButton>
                            </Buttons>
                        </telerik:RadToolBarDropDown>
                    </Items>
                </telerik:RadToolBar>
     
                <asp:Label runat="server" ID="Label2" Text="RadToolBar2"></asp:Label>
                <telerik:RadToolBar ID="RadToolBar2" runat="server">
                    <Items>
                        <telerik:RadToolBarDropDown ImagePosition="Right" DropDownWidth="250">
                            <Buttons>
                                <telerik:RadToolBarButton Text="Button1" Value="1"></telerik:RadToolBarButton>
                                <telerik:RadToolBarButton Text="Button2" Value="1"></telerik:RadToolBarButton>
                            </Buttons>
                        </telerik:RadToolBarDropDown>
                    </Items>
                </telerik:RadToolBar>
            </div>
        </form>
    </body>
    </html>

    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;
     
    public partial class ToolBarSelectionTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)
        {
            ((RadToolBarDropDown)RadToolBar1.Items[0]).Text = e.Item.Text; // set the dropdown text
            ScriptManager.RegisterStartupScript(this, GetType(), "Message", "alert('RadToolBar1 will now show Goodbye');", true);
        }
    }

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 26 May 2015 Link to this post

    Hello Richard,

    I was not sure which of the two drop-downs you wanted to change the text of (in ButtonClick handler in the code behind you change the text of RadToolBar1's RadToolBarDropDown) and I modified your toolBarClick handler so that it changes the text of both drop-downs without the need of postback:
    function toolBarClick(sender, args) {
        var toolBar = $find("<%= RadToolBar1.ClientID %>");
        var toolBar2 = $find("<%= RadToolBar2.ClientID %>");
     
        var dropDown = toolBar.get_items(0)._array[0];
        var dropDown2 = toolBar2.get_items(0)._array[0];
     
        var buttonText = args.get_item().get_text();
     
        toolBar.trackChanges();
        toolBar2.trackChanges();
     
        dropDown.set_text(buttonText);
        dropDown2.set_text(buttonText);
     
        toolBar.commitChanges();
        toolBar2.commitChanges();
    }

    Regards,
    Ivan Danchev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  6. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 26 May 2015 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    This worked perfectly, thank you for your help!

    Richard

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017