Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Command Item

Next database reset in 0 hours, 20 minutes, 11 seconds
Using template to customize the command-item contents


Custom command item template     Edit selected         Add new      Delete selected customers   Refresh customer list
Customer IDCompany NameContact NameContact TitleAddressCity
      
12345678910...
Page size:
select
 88 items in 13 pages
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F.
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F.
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.London
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8Luleå
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 57Mannheim
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place KléberStrasbourg
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 67Madrid






Show insert form:


Insert form positioning:

Default command-item outlook


Add new record Refresh
 Customer IDCompany NameContact NameContact TitleAddressCity 
        
Add new record Refresh
12345678910...
Page size:
select
 88 items in 13 pages
EditANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 2222México D.F.Delete
EditANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 2312México D.F.Delete
EditAROUTAround the HornThomas HardySales Representative120 Hanover Sq.LondonDelete
EditBERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8LuleåDelete
EditBLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 57MannheimDelete
EditBLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place KléberStrasbourgDelete
EditBOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 67MadridDelete


  • The command item feature of Telerik RadGrid is useful when you want to trigger commands directly from buttons/controls residing above the column headers. The visibility of the command item can be customized using the GridTableView.CommandItemDisplay property.
    In the first grid from the demo the command item template is used to perform a selection-based editing functionality. When you select several items from the grid you can edit, update or delete them at once. The command buttons also allow you to add new record or refresh the data in the grid.

    By default the command item displays Add new record and Refresh link buttons with images.

    The RadGrid.ItemCommand event will be fired when a custom command bubbles from the CommandItem, which lets you define custom functionality that can be executed in the ItemCommand handler. Additional major benefit is that all buttons (residing in the CommandItem) will automatically take advantage of the RadGrid AJAX mechanism, without writing any extra code.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Grid.Examples.Programming.CommandItem.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <!-- custom head section -->
        <style type="text/css">
            .bigModuleBottom td
            {
                padding: 0;
            }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowDbResetTimer="true"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        <span style="font-weight: bold">Using template to customize the command-item contents</span>
        <br />
        <br />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function RowDblClick(sender, eventArgs)
                {
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                        <telerik:AjaxUpdatedControl ControlID="Label2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                        <telerik:AjaxUpdatedControl ControlID="panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                        <telerik:AjaxUpdatedControl ControlID="Label3" />
                        <telerik:AjaxUpdatedControl ControlID="Label4" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <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>
        </div>
        <br/>
        <telerik:RadGrid ID="RadGrid1" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
            DataSourceID="SqlDataSource1" GridLines="None" AllowSorting="True" AutoGenerateColumns="true"
            AllowPaging="True" runat="server" ShowFooter="True" AllowAutomaticInserts="True"
            AllowMultiRowSelection="True" PageSize="7" AllowMultiRowEdit="True" OnItemCreated="RadGrid_ItemCreated"
            OnItemDeleted="RadGrid_ItemDeleted" OnItemUpdated="RadGrid_ItemUpdated" OnItemInserted="RadGrid_ItemInserted">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView Width="100%" CommandItemDisplay="Top" DataSourceID="SqlDataSource1"
                DataKeyNames="CustomerID">
                <CommandItemTemplate>
                    <div style="padding: 5px 5px;">
                        Custom command item template&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:LinkButton ID="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# RadGrid1.EditIndexes.Count = 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Edit.gif" />Edit selected</asp:LinkButton>&nbsp;&nbsp;
                        <asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Update.gif" />Update</asp:LinkButton>&nbsp;&nbsp;
                        <asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%# RadGrid1.EditIndexes.Count > 0 Or RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Cancel.gif" />Cancel editing</asp:LinkButton>&nbsp;&nbsp;
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible='<%# Not RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/AddRecord.gif" />Add new</asp:LinkButton>&nbsp;&nbsp;
                        <asp:LinkButton ID="LinkButton3" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="Images/Insert.gif" />Add this customer</asp:LinkButton>&nbsp;&nbsp;
    <asp:LinkButton ID="LinkButton1" OnClientClick="javascript:return confirm('Delete all selected customers?')"
    runat="server" CommandName="DeleteSelected"><img style="border:0px;vertical-align:middle;" alt="" src="Images/Delete.gif" />Delete selected customers</asp:LinkButton>&nbsp;&nbsp;
                        <asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="Images/Refresh.gif" />Refresh customer list</asp:LinkButton>
                    </div>
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class="bigModule">
            <div class="bigModuleBottom">
                <asp:Panel runat="server" ID="panel1">
                    <div style="float: left; vertical-align: top;">
                        Show insert form:
                    </div>
                    <div style="vertical-align: top; float: left;">
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                            <asp:ListItem Text="On first page" Value="0" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="On current page" Value="1"></asp:ListItem>
                            <asp:ListItem Text="On last page" Value="2"></asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                    <div style="vertical-align: top; margin-left: 10px; float: left;">
                        Insert form positioning:
                    </div>
                    <div style="vertical-align: top;">
                        <asp:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList2_SelectedIndexChanged">
                            <asp:ListItem Text="Top" Value="0" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Bottom" Value="1"></asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                    <div style="clear: both;">
                    </div>
                </asp:Panel>
            </div>
        </div>
        <span style="font-weight: bold;">Default command-item outlook</span><br />
        <br />
        <div>
            <asp:Label ID="Label3" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#FF8080"></asp:Label>
            <asp:Label ID="Label4" runat="server" EnableViewState="False" Font-Bold="True" ForeColor="#00C000"></asp:Label>
        </div>
        <br/>
        <telerik:RadGrid ID="RadGrid2" DataSourceID="SqlDataSource2" AllowSorting="True"
            AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
            PageSize="7" AllowPaging="True" GridLines="None" runat="server" ShowFooter="True"
            OnItemCreated="RadGrid_ItemCreated" OnItemDeleted="RadGrid_ItemDeleted" OnItemUpdated="RadGrid_ItemUpdated"
            OnItemInserted="RadGrid_ItemInserted">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView Width="100%" DataKeyNames="CustomerID" CommandItemDisplay="TopAndBottom"
                DataSourceID="SqlDataSource2" AutoGenerateColumns="false" InsertItemDisplay="Top"
                InsertItemPageIndexAction="ShowItemOnFirstPage">
                <Columns>
                    <telerik:GridEditCommandColumn>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID" HeaderText="Customer ID"
                        MaxLength="5">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" UniqueName="CompanyName" HeaderText="Company Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" UniqueName="ContactName" HeaderText="Contact Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactTitle" UniqueName="ContactTitle" HeaderText="Contact Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="City" UniqueName="City" HeaderText="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    </telerik:GridButtonColumn>
                </Columns>
                <CommandItemSettings AddNewRecordText="Add new record" AddNewRecordImageUrl="Images/AddRecord.gif"
                    RefreshText="Refresh" RefreshImageUrl="Images/Refresh.gif" />
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @Address, @City)"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City] FROM [Customers]"
            UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="CustomerID" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @Address, @City)"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City] FROM [Customers]"
            UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String" />
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String" />
                <asp:Parameter Name="ContactName" Type="String" />
                <asp:Parameter Name="ContactTitle" Type="String" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="CustomerID" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451