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

Batch Editing

Click on a cell/row to place it in edit mode. Use the Save changes or Cancel changes buttons to process/discard all changes at once.

ProductName	Category	Units In Stock	UnitPrice


1 2 Page size: 10 20 50 12 items in 2 pages
hh	Beverages		$7.00
zaa	Condiments	1	$1.00
6666666	Grains/Cereals	0	$0.00
987897897	Beverages	0	$0.00
65465465	Produce	2	$10.00
sasadaD	Beverages		$1.00
hjjghjghjghjg	Beverages		$1.00
jhgjhghjghj	Beverages		$52.00
asdasd	Beverages		$1.00
yytrytrtryr5555	Beverages		$40.00
No records to display.

Demo Configurator

Enter in edit mode on Click
Double Click
Mouse Down
Mouse Up

Select EditType Row
Cell

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

A common scenario is to switch grid cells in edit mode by simply clicking them (an easy and intuitive approach), update the data on the client and then process all changes on the server with a single batch update. This demo illustrates how this can be accomplished using the built-in batch editing functionality of the grid. In order to configure the grid for editing the EditMode property of the respective GridTableView should be set to Batch. Once the cells are edited the user has the option to process the changes or discard them. If you want more control over the cell editing process, you could subscribe to the OnBatchEditCellValueChanging event and access the new value before it has been changed or intercept the OnBatchEditCellValueChanged event and access the already applied value. Additionally you can include client-side validation like demonstrated for the ProductName and UnitPrice columns. Note that when performing operations like sorting, paging, filtering etc. all changes that have not been processed will be lost.

<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.DataEditing.BatchEditing.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        <p>
            Click on a cell/row to place it in edit mode. Use the Save changes or Cancel changes buttons to process/discard all changes at once.
        </p>
    </telerik:MessageBox>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="SavedChangesList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container no-bg">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="SavedChangesList" Width="600px" Height="200px" Visible="false"></telerik:RadListBox>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
            AllowAutomaticInserts="True" PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"
            OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowAutomaticUpdates="True" AllowPaging="True"
            AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" DataSourceID="SqlDataSource1">
            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID"
                DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">
                <BatchEditingSettings EditType="Cell" HighlightDeletedRows="true"/>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="ProductID" SortOrder="Descending" />
                </SortExpressions>
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderStyle-Width="210px" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName">
                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                            <RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
                            </RequiredFieldValidator>
                        </ColumnValidationSettings>
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Category" DefaultInsertValue="Beverages" HeaderStyle-Width="150px" UniqueName="CategoryID" DataField="CategoryID">
                        <ItemTemplate>
                            <%# Eval("CategoryName") %>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="CategoryIDDropDown" DataValueField="CategoryID"
                                DataTextField="CategoryName" DataSourceID="SqlDataSource2">
                            </telerik:RadDropDownList>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridNumericColumn DataField="UnitsInStock" HeaderStyle-Width="80px" HeaderText="Units In Stock"
                        SortExpression="UnitsInStock" UniqueName="UnitsInStock">
                    </telerik:GridNumericColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderStyle-Width="80px" HeaderText="Discontinued" SortExpression="Discontinued"
                        UniqueName="Discontinued">
                    </telerik:GridCheckBoxColumn>
                    <telerik:GridTemplateColumn HeaderText="UnitPrice" HeaderStyle-Width="80px" SortExpression="UnitPrice" UniqueName="TemplateColumn"
                        DataField="UnitPrice">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblUnitPrice" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <span>
                                <telerik:RadNumericTextBox RenderMode="Lightweight" Width="55px" runat="server" ID="tbUnitPrice">
                                </telerik:RadNumericTextBox>
                                <span style="color: Red">
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                                        ControlToValidate="tbUnitPrice" ErrorMessage="*Required" runat="server" Display="Dynamic">
                                    </asp:RequiredFieldValidator>
                                </span>
                            </span>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" HeaderText="Delete" HeaderStyle-Width="50px"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                    </telerik:GridButtonColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [CategoryID], [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock]) VALUES (@ProductName, @CategoryID, @UnitPrice, @Discontinued, @QuantityPerUnit, @UnitsInStock)"
        SelectCommand="SELECT [ProductID], [ProductName], [Products].[CategoryID], [Categories].[CategoryName] as CategoryName, [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock] FROM [Products] JOIN Categories ON Products.CategoryID=Categories.CategoryID"
        UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued, [QuantityPerUnit] = @QuantityPerUnit, [UnitsInStock] = @UnitsInStock WHERE [ProductID] = @ProductID">
        <DeleteParameters>
            <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
            <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
            <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
            <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
            <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
            <asp:Parameter Name="CategoryID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
            <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
            <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
            <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
            <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
     <telerik:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" >
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Enter in edit mode on" Size="Narrow">
                    <qsf:RadioButtonList OnSelectedIndexChanged="rblChangeButtonType_SelectedIndexChanged"
                        RepeatDirection="Vertical" Width="150px" CellPadding="0" CellSpacing="0"
                        ID="rblChangeEditEventType" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="click" Selected="True">Click</asp:ListItem>
                        <asp:ListItem Value="dblclick">Double Click</asp:ListItem>
                        <asp:ListItem Value="mousedown">Mouse Down</asp:ListItem>
                        <asp:ListItem Value="mouseup">Mouse Up</asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Select EditType" Size="Narrow">
                    <qsf:RadioButtonList OnSelectedIndexChanged="rblChangeEditType_SelectedIndexChanged"
                        RepeatDirection="Vertical" Width="150px" CellPadding="0" CellSpacing="0"
                        ID="rblChangeEditType" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="Row">Row</asp:ListItem>
                        <asp:ListItem Value="Cell" Selected="True">Cell</asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </telerik:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

Batch Editing

Related Resources

Support & Learning Resources

Find Assistance