New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

  • New
    • Mail message
    • Document
    • Report
    • Drawing
    • Chart
  • Save
  • Load
  • Left
  • Center
  • Right
  • Justify
  • Text style
    • Bold
    • Italic
    • Underline
  • Telerik ClientNet
  • Demo Configurator
Toggle button
Image position

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;
}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • ToolBar.xml
<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.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">
        <telerik:RadToolBar RenderMode="Lightweight" 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" OnClientClicked="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>

Support & Learning Resources

Find Assistance