Stuart Hemming
Top achievements
Rank 2
Rank 2
Stuart Hemming
asked on 15 Apr 2010, 07:02 PM
Consider the following code...
You can see that the only noteworthy difference between the two toolbars is that the first has no text associated with the buttons in the splitbutton control.
If you run this page, you will see that the top toolbar displays the splitbutton with just an image, which is what I want. Clicking on the down arrow, however, displays nothing.
Clicking on the down arrow of splitbutton on the 2nd toolbar displays the menu of buttons, which is what I want.
In short, what I'm looking for is a use the splitbutton so that it displays JUST the icon and the down arrow on the toolbar but BOTH the icon and the text in the dropdown menu.
Any clues?
--
Stuart
| <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"> |
| </telerik:RadScriptManager> |
| <telerik:RadToolBar ID="RadToolBar1" runat="server" style="width:100%;"> |
| <Items> |
| <telerik:RadToolBarSplitButton runat="server" EnableDefaultButton="true" DefaultButtonIndex="0" > |
| <Buttons> |
| <telerik:RadToolBarButton Value="first" ImageUrl="Images/ticket1-16.png" /> |
| <telerik:RadToolBarButton Value="second" ImageUrl="Images/tickets16.png" /> |
| </Buttons> |
| </telerik:RadToolBarSplitButton> |
| </Items> |
| </telerik:RadToolBar> |
| <hr /> |
| <telerik:RadToolBar ID="RadToolBar2" runat="server" style="width:100%;"> |
| <Items> |
| <telerik:RadToolBarSplitButton runat="server" EnableDefaultButton="true" DefaultButtonIndex="0" > |
| <Buttons> |
| <telerik:RadToolBarButton Value="first" ImageUrl="Images/ticket1-16.png" Text="One Ticket" /> |
| <telerik:RadToolBarButton Value="second" ImageUrl="Images/tickets16.png" Text="Multiple Tickets" /> |
| </Buttons> |
| </telerik:RadToolBarSplitButton> |
| </Items> |
| </telerik:RadToolBar> |
| </form> |
| </body> |
| </html> |
You can see that the only noteworthy difference between the two toolbars is that the first has no text associated with the buttons in the splitbutton control.
If you run this page, you will see that the top toolbar displays the splitbutton with just an image, which is what I want. Clicking on the down arrow, however, displays nothing.
Clicking on the down arrow of splitbutton on the 2nd toolbar displays the menu of buttons, which is what I want.
In short, what I'm looking for is a use the splitbutton so that it displays JUST the icon and the down arrow on the toolbar but BOTH the icon and the text in the dropdown menu.
Any clues?
--
Stuart
5 Answers, 1 is accepted
0
Accepted
Hi Stuart,
This requirement can be achieved like this:
and the following javascript function:
All the best,
Yana
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.
This requirement can be achieved like this:
<telerik:RadToolBar ID="RadToolBar2" runat="server" style="width:100%;" OnClientButtonClicked="buttonClicked"> <Items> <telerik:RadToolBarSplitButton runat="server" EnableDefaultButton="false" ImageUrl="arrow.gif"> <Buttons> <telerik:RadToolBarButton Value="first" ImageUrl="Images/ticket1-16.png" Text="One Ticket" /> <telerik:RadToolBarButton Value="second" ImageUrl="Images/tickets16.png" Text="Multiple Tickets" /> </Buttons> </telerik:RadToolBarSplitButton> </Items> </telerik:RadToolBar>and the following javascript function:
<script type="text/javascript"> function buttonClicked(sender, args) { var btn = args.get_item(); btn.get_parent().set_imageUrl(btn.get_imageUrl()); }</script>All the best,
Yana
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.
0
Stuart Hemming
Top achievements
Rank 2
Rank 2
answered on 23 Apr 2010, 12:28 PM
Yana,
Thanks for that, it worked a treat.
I've used a similar technique to set things like the text, tooltip and commandArgument.
For anyone else reading this, you should note that changing things like the commandArgument need you to wrap the calls in a trackChanges/commitChanges pair for the newly assigned values to be available serverside.
--
Stuart
Thanks for that, it worked a treat.
I've used a similar technique to set things like the text, tooltip and commandArgument.
For anyone else reading this, you should note that changing things like the commandArgument need you to wrap the calls in a trackChanges/commitChanges pair for the newly assigned values to be available serverside.
--
Stuart
0
jlj30
Top achievements
Rank 2
Rank 2
answered on 23 Jan 2015, 12:30 AM
Hi,
I know this is an old post, but I have the same requirement.
I was surprised that without me doing anything, the text + image from the child button that was clicked replaces that on the splitbutton. This is great, but I only want the image.
Here's my declaration:
I tried to do a parent.set_text('') in the OnClientButtonClicked event, but that did nothing.
Any suggestions?
Thanks in advance.
Jim
I know this is an old post, but I have the same requirement.
I was surprised that without me doing anything, the text + image from the child button that was clicked replaces that on the splitbutton. This is great, but I only want the image.
Here's my declaration:
<telerik:RadToolBarSplitButton runat="server" Value="textColor"> <Buttons> <telerik:RadToolBarButton runat="server" Text="Antique" Value="antique" ImageUrl="Images/Navvia/color_antique_white_16x16.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Aqua" Value="aqua" ImageUrl="Images/Navvia/color_aqua_16x16.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Chartreuse" Value="chartreuse" ImageUrl="Images/Navvia/color_chartreuse_16x16.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Coral" Value="coral" ImageUrl="Images/Navvia/color_coral_16x16.png"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarSplitButton>I tried to do a parent.set_text('') in the OnClientButtonClicked event, but that did nothing.
Any suggestions?
Thanks in advance.
Jim
0
Hi,
What if you put the image inside the ItemTemplate:
Does it help?
Regards,
Hristo Valyavicharski
Telerik
What if you put the image inside the ItemTemplate:
<telerik:RadToolBarSplitButton runat="server" Value="textColor"> <Buttons> <telerik:RadToolBarButton runat="server" Value="antique"> <ItemTemplate> <img src="/images/folder.png" alt="" /> </ItemTemplate> </telerik:RadToolBarButton>Does it help?
Regards,
Hristo Valyavicharski
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
jlj30
Top achievements
Rank 2
Rank 2
answered on 27 Jan 2015, 07:18 PM
Hi,
Thanks for the tip.
Unfortunately, it doesn't address my issue.
Your approach removes the text from the child buttons; that was not the issue.
I need text on the child buttons but NOT on the splitbutton itself.
I have found an acceptable workaround which changes the font size of the text on the splitbutton to zero.
Here's the CSS:
Jim
Thanks for the tip.
Unfortunately, it doesn't address my issue.
Your approach removes the text from the child buttons; that was not the issue.
I need text on the child buttons but NOT on the splitbutton itself.
I have found an acceptable workaround which changes the font size of the text on the splitbutton to zero.
Here's the CSS:
<style type="text/css"> div.RadToolBar_Office2007 .rtbWrap /* toolbar buttons */ { font-size: 0px; } div.RadToolBarDropDown_Office2007 .rtbWrap /* toolbar drop-down items */ { font-size: 12px; } </style>Jim