This is a migrated thread and some comments may be shown as answers.

ToolbarDropdown Text

4 Answers 97 Views

ToolBar

This is a migrated thread and some comments may be shown as answers.

Richard asked on 14 May 2015, 08:13 PM

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

4 Answers, 1 is accepted

answered on 18 May 2015, 03:25 PM

ToolBarSelection.zip

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

answered on 21 May 2015, 06:53 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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);

}

answered on 26 May 2015, 07:47 AM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

ToolbarDropdown Text

4 Answers, 1 is accepted