RibbonBar - ButtonSelection In SplitButton

Hat
Shirt
Trousers
  • Character
Item ImageNone 
  • Item ImageCowboy
  • Item ImageHipHop
  • Item ImageBasket
  • Item ImageNone
Hat
Item ImageNone 
  • Item ImagePlaid
  • Item ImagetShirt
  • Item ImageStripe
  • Item ImageNone
Item ImageNone 
  • Item ImageGray
  • Item ImageBlue
  • Item ImageBordo
  • Item ImageNone
Shirt
Item ImageNone 
  • Item ImageJeans1
  • Item ImageJeans2
  • Item ImageJeans3
  • Item ImageNone
Item ImageNone 
  • Item ImageDefault
  • Item ImageGray
  • Item ImageBordo
  • Item ImageNone
Trousers
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RibbonBarSplitButton introduces the following properties, which can be used to define its behavior.

  • EnableButtonSelection allows buttons inside the drop-down to be selected as default, once they are clicked. In the example you can select a Hat for instance, and this will trigger several actions - update the image with the selected "hat", update the text with the name of the selected hat and, last but not least, update the default action of the split button.
  • SelectedButtonIndex on the other hand can be used, both, to select a button statically (without the option of selecting another through a click in the drop-down) and in combination with EnableButtonSelection=True, when it can be used to monitor the selection for example, or to alter the default logic of EnableButtonSelection=True.

One important thing to mention about this feature of RibbonBarSplitButton is the logic in which the image and text are updated:

  • The text of the split button is gathered from selected button only if it's not set (splitButton.Text=...)
  • The Image is updated as follows
    • if there is an applicable image set directly to the splitButton (splitButton.ImageUrl = ... or splitButton.DisabledImageUrlLarge etc.), it's applied
    • if there is no such image, the split button will try to apply an image from the SelectedButton. If there still isn't an image to apply, the default image is applied.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="RibbonBar.Examples.ButtonSelectionInSplitButton.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <div class="SampleViewArea">
            <div class="SampleHatPicture">
                <img src="images/Default/Hat.png" alt="Hat" />
            </div>
            <div class="SampleShirtPicture">
                <img src="images/Default/Shirt.png" alt="Shirt" />
            </div>
            <div class="SampleTrousersPicture">
                <img src="images/Default/Trousers.png" alt="Trousers" />
            </div>
        </div>

        <div class="SampleMainContainer" style="width: 400px">
            <telerik:RadRibbonBar RenderMode="Lightweight" runat="server" ID="RadRibbonBar1" OnClientSplitButtonClicked="onSplitButtonClicked"
                Skin="Black" ImageRenderingMode="Clip">
                <telerik:RibbonBarTab Text="Character">
                    <telerik:RibbonBarGroup Text="Hat">
                        <Items>
                            <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3"
                                Size="Large">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Cowboy" ImageUrl="images/Icons/Cowboy.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="HipHop" ImageUrl="images/Icons/HipHop.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Basket" ImageUrl="images/Icons/Bordo.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Shirt">
                        <Items>
                            <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3"
                                Size="Large">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Plaid" ImageUrl="images/Icons/PlaidShirt.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="tShirt" ImageUrl="images/Icons/tShirt.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Stripe" ImageUrl="images/Icons/StripeShirt.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3"
                                Size="Large">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Gray" ImageUrl="images/Icons/Gray.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Blue" ImageUrl="images/Icons/DarkBlue.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Bordo" ImageUrl="images/Icons/Bordo.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Trousers">
                        <Items>
                            <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3"
                                Size="Large">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Jeans1" ImageUrl="images/Icons/Jeans1.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Jeans2" ImageUrl="images/Icons/Jeans2.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Jeans3" ImageUrl="images/Icons/Jeans3.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3"
                                Size="Large">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Default" ImageUrl="images/Icons/Default.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Gray" ImageUrl="images/Icons/Gray.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="Bordo" ImageUrl="images/Icons/Bordo.png"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </telerik:RadRibbonBar>
        </div>
    </div>

    <script type="text/javascript" src="scripts.js"></script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?