RibbonBar change image in RibbonBarSplitButton

3 posts, 0 answers
  1. Oleg
    Oleg avatar
    2 posts
    Member since:
    Oct 2013

    Posted 17 Sep 2014 Link to this post

    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">
                 <telerik:RibbonBarButton Value="TypeCalendar" ImageUrl="~/Images/Calendar16.png" Text="Days" />
                 <telerik:RibbonBarButton Value="TypeTime" ImageUrl="~/Images/Time16.png" Text="Times" />

    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":
                            case "TypeTime":
    Picture does not change.

  2. Dimitar
    Dimitar avatar
    276 posts

    Posted 23 Sep 2014 Link to this post

    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">
                    <telerik:RibbonBarSplitButton Value="TypeInterval" Size="Large" Text="Days" EnableButtonSelection="true">
                            <telerik:RibbonBarButton Value="TypeCalendar" ImageUrl="icons/home/undo.png" Text="Days" />
                            <telerik:RibbonBarButton Value="TypeTime" ImageUrl="icons/home/redo.png" Text="Times" />

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


    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.

  3. DevCraft R3 2016 release webinar banner
  4. Oleg
    Oleg avatar
    2 posts
    Member since:
    Oct 2013

    Posted 29 Sep 2014 Link to this post

    Thank you for helping.
Back to Top