RibbonBar change image in RibbonBarSplitButton

[Oleg]

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

[Dimitar]

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

 

 

[Oleg]

Thank you for helping.