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

Add/Remove/Disable Items

  • Add Button
  • Add Separator
  • Add Checked Button
  • Add...
    • Add Button
    • Add Separator
    • Add Checked Button
  • Add...
    • Add Button
    • Add Separator
    • Add Checked Button
Event log
  • Demo Configurator
Add new button
  • Target:
    ToolBar
  • Checked state:
Add other items
Enable/Disable
Remove

With RadToolBar it is easy to add, remove or disable items at the client side. What is more, you can persist the changes after postback.

This example shows how to add/remove/disable RadToolBarItems, or add/remove buttons to/from the Buttons Collections of the RadToolBarDropDown and RadToolBarSplitButton.

To add an item (a button, dropdown or a split button ) to the Items Collection of the toolbar:

var toolBar = $find("<%= RadToolBar1.ClientID %>");

//Creates a new item to be added to the toolbar's Items Collection. The line below creates a dropdown
var newDropDown = new Telerik.Web.UI.RadToolBarDropDown();
newDropDown.set_text("Added client-side");
//Adds the dropdown to the Items Collection of the toolbar
toolBar.get_items().add(newDropDown);

To remove an item from the toolbar's Items Collection 

var toolBar = $find("<%= RadToolBar1.ClientID %>");
if (toolBar.get_items().get_count() > 0)
    //Removes the last item from the toolbar's Items Collection
    toolBar.get_items().removeAt(toolBar.get_items().get_count() - 1);

To disable a toolbar item 

var toolBar = $find("<%= RadToolBar1.ClientID %>");
//Gets the last item in the toolbar's Items Collection
var lastItem = toolBar.get_items().getItem(toolBar.get_items().get_count()-1);
//Disables the last item
lastItem.set_enabled(false);

A similar approach is used to add/remove/disable buttons in the Buttons Collections of the RadToolBarDropDown or RadToolBarSplitButton.
You can review the code sections of this example for more details.

If you want to persist these changes after postback, the methods described below should be used:

  • toolBar.trackChanges();  - indicates that client-side changes are going to be made and these changes are supposed to be persisted after postback.
  • toolBar.commitChanges(); - submits the changes to the server.
var toolBar = $find("RadToolBar1");
toolBar.trackChanges();
//add, remove, disable items
toolBar.commitChanges();

Client side changes are available on the server side after postback. You can use the ClientChanges property to access them:

foreach (ClientOperation<RadToolBarItem> operation in RadToolBar1.ClientChanges)
{
	RadToolBarItem item = operation.Item;

	switch (operation.Type)
	{
		case ClientOperationType.Insert:
			break;
		case ClientOperationType.Remove:
			break;
		case ClientOperationType.Update:
			UpdateClientOperation<RadToolBarItem> update = operation as UpdateClientOperation<RadToolBarItem>;
			break;
		case ClientOperationType.Clear:
			break;
	}	
}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • ToolBar.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ToolBar.Examples.ClientSide.AddRemoveDisableItems.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[

        function addButton() {
            var checked = $get("<%= cbChecked.ClientID %>").checked;

            var parent = determineParent();
            if (parent) {
                addChildButton(parent, checked);
            }
            else {
                alert("RadToolBar does not contain a parent item of the type selected!");
            }
        }

        function determineParent() {
            var parentSelectionDropDown = $find("<%= ddlItem.ClientID %>");
            var selectedOption = parentSelectionDropDown.get_selectedItem().get_text();
            switch (selectedOption) {
                case "ToolBar":
                    return $find("<%= RadToolBar1.ClientID %>");
                    break;
                case "Last DropDown":
                    return findLastItemOfType(Telerik.Web.UI.RadToolBarDropDown);
                    break;
                case "Last SplitButton":
                    return findLastItemOfType(Telerik.Web.UI.RadToolBarSplitButton);
                    break;
            }
        }

        function findLastItemOfType(itemType) {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var toolBarItems = toolBar.get_items();
            for (var i = toolBarItems.get_count() - 1; i >= 0; i--) {
                var toolBarItem = toolBarItems.getItem(i);
                if (itemType.isInstanceOfType(toolBarItem)) {
                    return toolBarItem;
                }
            }
            return null;
        }

        function addChildButton(parent, checked) {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");

            toolBar.trackChanges();

            var childrenCollection;
            if (parent.get_items) {
                childrenCollection = parent.get_items();
            }
            else {
                childrenCollection = parent.get_buttons();
            }

            var newButton = new Telerik.Web.UI.RadToolBarButton();
            newButton.set_text("Added client-side");
            if (checked) {
                newButton.set_checked(checked);
                newButton.set_checkOnClick(checked);
            }

            childrenCollection.add(newButton);

            toolBar.commitChanges();
        }

        function addDropDown() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var newDropDown = new Telerik.Web.UI.RadToolBarDropDown();
            newDropDown.set_text("Added client-side");
            toolBar.trackChanges();
            toolBar.get_items().add(newDropDown);
            toolBar.commitChanges();
        }

        function addSplitButton() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var newSplitButton = new Telerik.Web.UI.RadToolBarSplitButton();
            newSplitButton.set_enableDefaultButton(false);
            newSplitButton.set_text("Added client-side");
            toolBar.trackChanges();
            toolBar.get_items().add(newSplitButton);
            toolBar.commitChanges();
        }

        function getLastItem() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            if (toolBar.get_items().get_count() > 0)
                return toolBar.get_items().getItem(toolBar.get_items().get_count() - 1);
            return null;
        }

        function removeLastItem() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            if (toolBar.get_items().get_count() > 0) {
                toolBar.trackChanges();
                toolBar.get_items().removeAt(toolBar.get_items().get_count() - 1);
                toolBar.commitChanges();
            }
        }

        function enableLastItem() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");

            var lastItem = getLastItem();
            if (lastItem) {
                toolBar.trackChanges();
                lastItem.set_enabled(true);
                toolBar.commitChanges();
            }
        }

        function disableLastItem() {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var lastItem = getLastItem();
            if (lastItem) {
                toolBar.trackChanges();
                lastItem.set_enabled(false);
                toolBar.commitChanges();
            }
        }
        //]]>
    </script>
    <div class="demo-container">
        <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" EnableRoundedCorners="true" EnableShadows="true">
        </telerik:RadToolBar>
    </div>
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1" Height="250px"></qsf:EventLogConsole>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Add new button" Size="Medium">
                    <ul class="fb-group">
                        <li>Target:
                            <qsf:DropDownList ID="ddlItem" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Text="ToolBar" />
                                    <telerik:DropDownListItem Text="Last DropDown" />
                                    <telerik:DropDownListItem Text="Last SplitButton" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>Checked state:<asp:CheckBox ID="cbChecked" runat="server"></asp:CheckBox>
                        </li>
                    </ul>
                    <qsf:Button ID="Button2" runat="server" Text="Add" OnClientClicked="addButton" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Add other items" Size="Wide">
                    <qsf:Button ID="Button3" runat="server" Text="Add new DropDown" OnClientClicked="addDropDown" AutoPostBack="false"></qsf:Button>
                    <qsf:Button ID="Button4" runat="server" Text="Add new SplitButton" OnClientClicked="addSplitButton" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Enable/Disable">
                    <qsf:Button ID="Button5" runat="server" Text="Enable last toolbar item" OnClientClicked="enableLastItem" AutoPostBack="false"></qsf:Button>
                    <qsf:Button ID="Button6" runat="server" Text="Disable last toolbar item" OnClientClicked="disableLastItem" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Remove" Size="Wide">
                    <qsf:Button ID="Button7" runat="server" Text="Remove last toolbar item" OnClientClicked="removeLastItem" AutoPostBack="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <hr class="qsf-clear-float" />
                <qsf:Button runat="server" ID="Button1" Text="Postback" OnClick="Button1_Click">
                </qsf:Button>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance