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

RibbonBar change image in RibbonBarSplitButton

2 Answers 23 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Oleg
Top achievements
Rank 1
Oleg asked on 18 Sep 2014, 04:36 AM
How can I change an image on a RibbonBarSplitButton when clicks a RibbonBarButton?

<telerik:RibbonBarSplitButton Size="Large" Text="Days"  Value="TypeInterval" ImageUrlLarge="~/Images/Calendar32.png">
      <Buttons>
             <telerik:RibbonBarButton Value="TypeCalendar" ImageUrl="~/Images/Calendar16.png" Text="Days" />
             <telerik:RibbonBarButton Value="TypeTime" ImageUrl="~/Images/Time16.png" Text="Times" />
       </Buttons>
</telerik:RibbonBarSplitButton>

In RadRibbonBar I use OnClientSplitButtonClicking="MenuItem".

function findSplitButton(sender, buttonValue) {
                    for (var i = 0; i < sender.get_tabs().get_count() ; i++) {
                        var tab = sender.get_tabs().getTab(i);
                        for (var j = 0; j < tab.get_groups().get_count() ; j++) {
                            var group = tab.get_groups().getGroup(j);
                            for (var k = 0; k < group.get_items().get_count() ; k++) {
                                var item = group.get_items().getItem(k);
                                var customAttribute = item.get_element().getAttribute('Value');
                                if (customAttribute != null && customAttribute == buttonValue) {
                                    return item;
                                }
                            }
                        }
                    }
                }
 
function MenuItem(sender, args) {
                    var value = args.get_button().get_value();
                    var button = findSplitButton(sender, 'TypeInterval');
                    switch (value) {
                       case "TypeCalendar":
                            button.set_imageUrlLarge("~/Images/Calendar32.png");
                            break;
 
                        case "TypeTime":
                            button.set_imageUrlLarge("~/Images/Time32.png");
                            break;
                    }
                }
Picture does not change.

Thanks,
Oleg

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 23 Sep 2014, 09:10 AM
Hello Oleg,

RadRibbonBar supports automatic image change for scenarios like yours. You just need to provide a PNG that holds both your small and large icons. And you should set the RibbonBarSplitButton's property EnableButtonSelection to true:

<telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
    <telerik:RibbonBarTab Text="Home">
        <telerik:RibbonBarGroup Text="Image">
            <Items>
                <telerik:RibbonBarSplitButton Value="TypeInterval" Size="Large" Text="Days" EnableButtonSelection="true">
                    <Buttons>
                        <telerik:RibbonBarButton Value="TypeCalendar" ImageUrl="icons/home/undo.png" Text="Days" />
                        <telerik:RibbonBarButton Value="TypeTime" ImageUrl="icons/home/redo.png" Text="Times" />
                    </Buttons>
                </telerik:RibbonBarSplitButton>
            </Items>
        </telerik:RibbonBarGroup>
    </telerik:RibbonBarTab>
</telerik:RadRibbonBar>

I am sending you a sample page and sample images for reference.

Regards,
Dimitar
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
Oleg
Top achievements
Rank 1
answered on 29 Sep 2014, 09:28 AM
Thank you for helping.
Tags
RibbonBar
Asked by
Oleg
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Oleg
Top achievements
Rank 1
Share this question
or