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

RadToolBar as Command Item

Next database reset in 0 hours, 52 minutes, 51 seconds

RadToolBar is used inside grid CommandItemTemplate for customizing the content

  • Edit selected
  • Add new
  • Delete selected customers
  • Refresh customer list
Customer IDCompany NameContact NameContact Title
    
Page size:
 91 items in 13 pages
THECRThe Cracker BoxLiu WongMarketing Assistant
TOMSPToms SpezialitätenKarin JosephsMarketing Manager
TORTUTortuga RestauranteMiguel Angel PaolinoOwner
TRADHTradição HipermercadosAnabela DominguesSales Representative
TRAIHTrail's Head Gourmet ProvisionersHelvetius NagySales Associate
VAFFEVaffeljernetPalle IbsenSales Manager
VICTEVictuailles en stockMary SaveleySales Agent

This example demonstrates how to use RadToolBar as a custom RadGrid Command item container. The buttons in the toolbar have CommandName values set which are internally 'recognized' by the grid when its event bubbling mechanism is triggered (after pressing a button from the command item toolbar). Thus the respective command is executed without any extra coding.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="ToolBar.Examples.ApplicationScenarios.GridCommandItem.DefaultVB" %>

<%@ 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>
    <script type="text/javascript">
        function onToolBarClientButtonClicking(sender, args) {
            var button = args.get_item();
            if (button.get_commandName() == "DeleteSelected") {
                args.set_cancel(!confirm('Delete all selected customers?'));
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Label2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080"></asp:Label>
        <asp:Label ID="Label2" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000"></asp:Label>
        <br />
        <h2>RadToolBar is used inside grid CommandItemTemplate for customizing the content</h2>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
            DataSourceID="SqlDataSource1" Width="97%" AllowSorting="True" AutoGenerateColumns="true"
            AllowPaging="True" GridLines="None" runat="server" ShowFooter="True" AllowMultiRowSelection="True"
            PageSize="7" AllowMultiRowEdit="True" HorizontalAlign="NotSet" OnItemCreated="RadGrid1_ItemCreated"
            OnItemDeleted="RadGrid1_ItemDeleted" OnItemUpdated="RadGrid1_ItemUpdated" OnItemInserted="RadGrid1_ItemInserted">
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
            <MasterTableView Width="100%" GridLines="None" CommandItemDisplay="Top" DataSourceID="SqlDataSource1"
                EditMode="InPlace" HorizontalAlign="NotSet" DataKeyNames="CustomerID" AllowAutomaticInserts="True">
                <CommandItemTemplate>
                    <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" OnClientButtonClicking="onToolBarClientButtonClicking"
                        AutoPostBack="true">
                        <Items>
                            <telerik:RadToolBarButton Text="Edit selected" CommandName="EditSelected" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Edit.gif"
                                Visible='<%# RadGrid1.EditIndexes.Count = 0 %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Update" CommandName="UpdateEdited" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Update.gif"
                                Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Cancel editing" CommandName="CancelAll" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Cancel.gif"
                                Visible='<%# RadGrid1.EditIndexes.Count > 0 Or RadGrid1.MasterTableView.IsItemInserted %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Add new" CommandName="InitInsert" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/AddRecord.gif"
                                Visible='<%# Not RadGrid1.MasterTableView.IsItemInserted %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Add this Customer" CommandName="PerformInsert" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Insert.gif"
                                Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Delete selected customers" CommandName="DeleteSelected"
                                ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Delete.gif">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Refresh customer list" CommandName="RebindGrid" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Refresh.gif">
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="True" EnableDragToSelectRows="True"></Selecting>
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle)"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers]"
        UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle WHERE [CustomerID] = @CustomerID">
        <DeleteParameters>
            <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
            <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance