ToolBar - Client-side API

Demo Configurator

Toggle button Toggle button
Image position
Isolate this demo as a stand-alone application

RadToolBar provides a flexible client-side API - you can easily interact with the toolbar in the browser using the toolbar client-side object.

  1. Getting the RadToolBar client-side object: RadToolBar creates a client-side object with the ClientID of the toolbar. You can obtain the reference using the following javascript code:
    var toolBar = $find("<%=RadToolBar1.ClientID%>");
    
  2. Once you get the client-side object of RadToolBar, you can use the findItemByText method to get the instance of a particular item. Example:
    var toolBar = $find("<%= RadToolBar1.ClientID %>");
    var text = $get("<%= TextBox1.ClientID %>").value;
    var item = toolBar.findItemByText(text);
    		
  3. When you get the instance of a particular item, you can call the disable() / enable() / etc. methods.
    function toggleButton()
    {
    	var toolBar = $find("<%= RadToolBar1.ClientID %>");
    	var text = $get("<%= TextBox1.ClientID %>").value;
    	var item = toolBar.findItemByText(text);
    
    	if (!item)
    	{
    		alert("There is no item with text \"" + text + "\"");
    		return false;
    	}
    	
    	if (!Telerik.Web.UI.RadToolBarButton.isInstanceOfType(item))
    	{
    		alert("The item with the specified text is not a button.\nOnly buttons can be checked/unchecked");
    		return false;
    	}
    
    	if (Telerik.Web.UI.IRadToolBarDropDownItem.isInstanceOfType(item.get_parent()))
    	{
    		item.get_parent().showDropDown();
    		item.toggle();
    	}
    
    	return false;
    }
    
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolBar.ClientSide.ClientSideAPI.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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">
        <telerik:RadToolBar ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
        </telerik:RadToolBar>
    </div>
    <script type="text/javascript">
        var $ = $telerik.$;

        /* <![CDATA[ */
        function pageLoad() {
            setHandlersForImagePosition();
        }


        function toggleButton() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var text = $get("<%= TextBox1.ClientID %>").value;
            var item = toolBar.findItemByText(text);

            if (!item) {
                alert("There is no item with text \"" + text + "\"");
                return false;
            }

            if (!Telerik.Web.UI.RadToolBarButton.isInstanceOfType(item)) {
                alert("The item with the specified text is not a button.\nOnly buttons can be checked/unchecked.");
                return false;
            }

            if (!item.get_checkOnClick()) {
                alert(String.format("Button '{0}' is not checkable. Its checked state cannot be changed.", item.get_text()));
                return false;
            }

            if (Telerik.Web.UI.IRadToolBarDropDownItem.isInstanceOfType(item.get_parent())) {
                var hideDropDown = function () {
                    item.get_parent().hideDropDown();
                };

                var toggle = function () {
                    item.toggle();
                    window.setTimeout(hideDropDown, 400);
                };

                var showDropDown = function () {
                    item.get_parent().showDropDown();
                    window.setTimeout(toggle, 400);
                };

                window.setTimeout(showDropDown, 300);
            }
            else {
                item.toggle();
            }

            return false;
        }

        function setHandlersForImagePosition() {
            var inputs = $(".col.col-auto input[type='radio']");

            $(inputs).on("change", function () {
                var selectedPosition = extractPositionFromText($(this).val());

                setImagePosition(selectedPosition);
            })

        }

        function setImagePosition(selectedPosition) {
            var toolBar = $find("<%=RadToolBar1.ClientID %>");
            var items = toolBar.get_items();
            for (var i = 0; i < items.get_count() ; i++) {
                items.getItem(i).set_imagePosition(selectedPosition);
            }
            return false;
        }

        function extractPositionFromText(positionAsText) {
            switch (positionAsText) {
                case "Left":
                    return Telerik.Web.UI.ToolBarImagePosition.Left;
                case "Right":
                    return Telerik.Web.UI.ToolBarImagePosition.Right;
                case "AboveText":
                    return Telerik.Web.UI.ToolBarImagePosition.AboveText;
                case "BelowText":
                    return Telerik.Web.UI.ToolBarImagePosition.BelowText;
            }
        }
        /* ]]> */
    </script>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium" Title="Toggle button">
                    <qsf:TextBox runat="server" ID="TextBox1" Text="Bold" Size="Medium"></qsf:TextBox>
                    <qsf:Button runat="server" ID="btnToggleButton" OnClientClick="toggleButton" Text="Toggle button" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Image position">
                    <asp:RadioButtonList runat="server" ID="position" RepeatColumns="2">
                        <asp:ListItem Text="Left" Value="Left" Selected="true"></asp:ListItem>
                        <asp:ListItem Text="Right" Value="Right"></asp:ListItem>
                        <asp:ListItem Text="Above Text" Value="AboveText"></asp:ListItem>
                        <asp:ListItem Text="Below Text" Value="BelowText"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?