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">
          <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. Dimitar
    Admin
    Dimitar avatar
    281 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">
                <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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  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