Grid - 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.

ProductNameCategoryUnits In StockDiscontinuedUnitPriceDelete
Page size:
 77 items in 8 pages
Original Frankfurter grüne Soße
Condiments
32
$13.00
Lakkalikööri
Beverages
57
$18.00
Rhönbräu Klosterbier
Beverages
125
$7.75
Longlife Tofu
Produce
4
$10.00
Röd Kaviar
Seafood
101
$15.00
Mozzarella di Giovanni
Dairy Products
14
$34.80
Flotemysost
Dairy Products
26
$21.50
Outback Lager
Beverages
15
$15.00
Gudbrandsdalsost
Dairy Products
26
$36.00
Scottish Longbreads
Confections
6
$12.50

Demo Configurator

Enter in edit mode on


Select EditType
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.DataEditing.BatchEditing.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
<!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">
    <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 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" />
                <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 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 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>

Find Assistance

Help Us Improve

Was this example helpful?