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

RadGrid CommandItem

Next database reset in 0 hours, 31 minutes, 47 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
ALFKIAlfreds FutterkisteMaria AndersSales Representative
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwner
ANTONAntonio Moreno TaqueríaAntonio MorenoOwner
AROUTAround the HornThomas HardySales Representative
BERGSBerglunds snabbköpChristina BerglundOrder Administrator
BLAUSBlauer See DelikatessenHanna MoosSales Representative
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ToolBar.Examples.ApplicationScenarios.GridCommandItem.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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 || RadGrid1.MasterTableView.IsItemInserted %>'>
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Add new" CommandName="InitInsert" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/AddRecord.gif"
                                Visible='<%# !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