Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

RibbonBar / ButtonSelection In SplitButton


  • Two new properties have been introduced for RibbonBarSplitButton - EnableButtonSelection and SelectedButtonIndex.

    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 new feature of RibbonBarSplitButton is the logic in which the image and text are updated:

    - The text of the split button is updated only if it's not set (splitButton.Text=...) - then text is gathered from selected button;
    - 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 -> default image is applied.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DefaultCS" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag runat="server" ID="Headtag1" />
        <style type="text/css">
            .SampleViewArea
            {
                position: relative;
                float: right;
                width: 170px;
                height: 553px;
                background: url('images/body.png') no-repeat 0 0;    
                margin: 20px 150px 20px 0;
            }
            .SampleShirtPicture
            {
                position: absolute;
                z-index: 3;
                width: 210px;
                height: 240px;    
                margin: 68px 0 0 -19px;
            }
            .SampleTrousersPicture
            {
                position: absolute;
                z-index: 2;
                width: 180px;
                height: 310px;    
                margin: 234px 0 0 0;
            }
            .SampleHatPicture
            {
                position: absolute;
                z-index: 1;
                width: 90px;
                height: 130px;    
                margin: -32px 0 0 28px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post" class="qsfTransparent">
            <telerik:RadScriptManager ID="ScriptManager" runat="server" />
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#" ShowSkinChooser="false" />
            <script type="text/javascript">
                // <Globals>

                    // <Constants>

                        // Group names
                        var HAT = "Hat";
                        var SHIRT = "Shirt";
                        var TROUSERS = "Trousers";

                        var FILETYPE = "png";
                        var NOIMAGE = "None";
                        var EMPTYURI = ($telerik.isIE) ? "#" : "";

                    // </Constants>

                // </Globals>

                // <Event Handlers>

                    function onSplitButtonClicked(ribbonBar, args)
                    {
                        var button = args.get_button();
                        var splitButton = button.get_owner();
                        var group = splitButton.get_owner();

                        switch (group.get_text()) {
                            case HAT:
                            {
                                onHatSelectionChanged(button);
                                break;
                }
                            case SHIRT:
                            {
                                onPartSelectionChanged(splitButton, updateShirtSelection);
                                break;
                            }
                            case TROUSERS:
                            {
                                onPartSelectionChanged(splitButton, updateTrousersSelection);
                                break;
                            }
                            default:
                                break;
                        }
                    }

                // </Event Handlers>

                // <Helper methods>

                    function createImageUrl(strPart, strText)
                    {
                        var generatedUrl = baseUrl + "images/" + strPart + "/" + strText + "." + FILETYPE;

                        return (strPart == NOIMAGE || strText == NOIMAGE) ? EMPTYURI : generatedUrl;
                    }

                    function onPartSelectionChanged(splitButton, updateMethod)
                    {
                        var partSplitButton;
                        var colorSplitButton;

                        // if the color split button is clicked
                        if (splitButton.get_index() == 1)
                        {
                                partSplitButton = splitButton.get_owner().get_items().getItem(0);
                                colorSplitButton = splitButton;
                        }
                        else
                        {
                            partSplitButton = splitButton;
                            colorSplitButton = splitButton.get_owner().get_items().getItem(1);

                            if (colorSplitButton.get_defaultButton().get_text() == NOIMAGE)
                                colorSplitButton.set_selectedButtonIndex(0);
                        }
                            updateMethod(partSplitButton.get_defaultButton().get_text(), colorSplitButton.get_defaultButton().get_text());
                    }

                    function applyImageToElement(imageUrl, selector)
                    {
                        var imageElement = $telerik.$(selector);
                        if (imageElement.length > 0)
                            imageElement[0].src = imageUrl;
                    }

                // </Helper methods>

                // <Hat>

                    function onHatSelectionChanged(button)
                    {
                        var newImageUrlToApply = createImageUrl(HAT, button.get_text());
                        
                        if (newImageUrlToApply == EMPTYURI)
                            newImageUrlToApply = createImageUrl("Default", HAT);

                        applyImageToElement(newImageUrlToApply, ".SampleViewArea>.SampleHatPicture>img");

                        // implement here the appliance of the imageUrl to the div element
                    }

                // </Hat>

                // <Shirt>

                    function updateShirtSelection(selectedShirtText, selectedColorText)
                    {
                        var newImageUrlToApply = createImageUrl(selectedShirtText, selectedColorText);

                        if (newImageUrlToApply == EMPTYURI)
                            newImageUrlToApply = createImageUrl("Default", SHIRT);

                        applyImageToElement(newImageUrlToApply, ".SampleViewArea>.SampleShirtPicture>img");

                        // implement here the appliance of the imageUrl to the div element
                    }

                // </Shirt>

                // <Trousers>

                    function updateTrousersSelection(selectedTrousersText, selectedColorText)
                    {
                        var newImageUrlToApply = createImageUrl(selectedTrousersText, selectedColorText);
                        
                        if (newImageUrlToApply == EMPTYURI)
                            newImageUrlToApply = createImageUrl("Default", TROUSERS);

                        applyImageToElement(newImageUrlToApply, ".SampleViewArea>.SampleTrousersPicture>img");

                        // implement here the appliance of the imageUrl to the div element
                    }

                // </Trousers>
            </script>
            <div class="SampleViewArea">
             <div class="SampleHatPicture">
                 <img src="images/Default/Hat.png" />
             </div>
             <div class="SampleShirtPicture">
                 <img src="images/Default/Shirt.png" />
             </div>
             <div class="SampleTrousersPicture">
                 <img src="images/Default/Trousers.png" />
             </div>
            </div>
            <div class="SampleMainContainer" style="width: 400px">
             <telerik:RadRibbonBar 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 Text="HipHop" ImageUrl="images/Icons/HipHop.png" />
                                        <telerik:RibbonBarButton Text="Basket" ImageUrl="images/Icons/Bordo.png" />
                                        <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png" />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                            </Items>
                        </telerik:RibbonBarGroup>
                        <telerik:RibbonBarGroup Text="Shirt">
                            <Items>
                                <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3" Size="Large">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="PlaidShirt" ImageUrl="images/Icons/PlaidShirt.png" />
                                        <telerik:RibbonBarButton Text="tShirt" ImageUrl="images/Icons/tShirt.png" />
                                        <telerik:RibbonBarButton Text="StripeShirt" ImageUrl="images/Icons/StripeShirt.png" />
                                        <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png" />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3" Size="Large">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="Gray" ImageUrl="images/Icons/Gray.png" />
                                        <telerik:RibbonBarButton Text="DarkBlue" ImageUrl="images/Icons/DarkBlue.png" />
                                        <telerik:RibbonBarButton Text="Bordo" ImageUrl="images/Icons/Bordo.png" />
                                        <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png" />
                                    </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 Text="Jeans2" ImageUrl="images/Icons/Jeans2.png" />
                                        <telerik:RibbonBarButton Text="Jeans3" ImageUrl="images/Icons/Jeans3.png" />
                                        <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png" />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                                <telerik:RibbonBarSplitButton EnableButtonSelection="true" SelectedButtonIndex="3" Size="Large">
                                    <Buttons>
                                        <telerik:RibbonBarButton Text="Default" ImageUrl="images/Icons/Default.png" />
                                        <telerik:RibbonBarButton Text="Gray" ImageUrl="images/Icons/Gray.png" />
                                        <telerik:RibbonBarButton Text="Bordo" ImageUrl="images/Icons/Bordo.png" />
                                        <telerik:RibbonBarButton Text="None" ImageUrl="images/Icons/None.png" />
                                    </Buttons>
                                </telerik:RibbonBarSplitButton>
                            </Items>
                        </telerik:RibbonBarGroup>
                    </telerik:RibbonBarTab>
             </telerik:RadRibbonBar>
            </div>
            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451