Example T114985
Visible to All Users

GridView for Web Forms - How to implement clone functionality in batch edit mode

This example demonstrates how to implement a custom Copy button that allows users to clone a row in ASPxGridView in batch edit mode.

Grid View - Clone a Row

To implement this functionality, follow the steps below.

  1. Create a custom command button and handle the client CustomButtonClick event.
ASPx
<dx:GridViewCommandColumn ... > <CustomButtons> <dx:GridViewCommandColumnCustomButton ID="CopyButton" Text="Copy" /> </CustomButtons> </dx:GridViewCommandColumn> <%-- ... --%> <ClientSideEvents CustomButtonClick="OnCustomButtonClick" ... />
  1. In the CustomButtonClick event handler, call the AddNewRow method to add a new row.
JavaScript
function OnCustomButtonClick(s, e) { if (e.buttonID == "CopyButton") { // ... s.AddNewRow(); } }
  1. Handle the client BatchEditStartEditing event to insert values of the previous row into the newly created row.
    Use the rowValues object to define a value for cells in edit mode (every cell in Row edit mode and the focused cell in Cell edit mode) and the client SetCellValue method to assign values to cells that are not in edit mode (unfocused cells in Cell edit mode).
ASPx
<ClientSideEvents CustomButtonClick="OnCustomButtonClick" BatchEditStartEditing="OnStartEdit" />
JavaScript
function OnStartEdit(s, e) { // ... for (var i = 0; i < s.GetColumnCount() ; i++) { var column = s.GetColumn(i); if (column.visible == false || column.fieldName == undefined) continue; ProcessCells(rbl.GetSelectedIndex(), e, column, s); } } function ProcessCells(selectedIndex, e, column, s) { var isCellEditMode = selectedIndex == 0; var cellValue = s.batchEditApi.GetCellValue(index, column.fieldName); if(isCellEditMode) { if(column.fieldName == e.focusedColumn.fieldName) e.rowValues[column.index].value = cellValue; else s.batchEditApi.SetCellValue(e.visibleIndex, column.fieldName, cellValue); } else { e.rowValues[column.index].value = cellValue; } }

Files to Look At

Documentation

More Examples

Example Code

WebSite/Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ASPxGridView - How to implement copy functionality in Batch Edit mode</title> <script type="text/javascript"> var index; var copyFlag; function OnCustomButtonClick(s, e) { if (e.buttonID == "CopyButton") { index = e.visibleIndex; copyFlag = true; s.AddNewRow(); } } function OnStartEdit(s, e) { if (copyFlag) { copyFlag = false; for (var i = 0; i < s.GetColumnCount() ; i++) { var column = s.GetColumn(i); if (column.visible == false || column.fieldName == undefined) continue; ProcessCells(rbl.GetSelectedIndex(), e, column, s); } } } function ProcessCells(selectedIndex, e, column, s) { var isCellEditMode = selectedIndex == 0; var cellValue = s.batchEditApi.GetCellValue(index, column.fieldName); if(isCellEditMode) { if(column.fieldName == e.focusedColumn.fieldName) e.rowValues[column.index].value = cellValue; else s.batchEditApi.SetCellValue(e.visibleIndex, column.fieldName, cellValue); } else { e.rowValues[column.index].value = cellValue; } } </script> </head> <body> <form id="frmMain" runat="server"> <dx:ASPxCheckBox ID="BatchUpdateCheckBox" runat="server" Checked="true" Text="Handle BatchUpdate event" AutoPostBack="true" /> <dx:ASPxRadioButtonList runat="server" ID="rbl" AutoPostBack="true" OnSelectedIndexChanged="rbl_SelectedIndexChanged" ClientInstanceName="rbl"> <Items> <dx:ListEditItem Text="Cell" Value="Cell" Selected="true" /> <dx:ListEditItem Text="Row" Value="Row" /> </Items> </dx:ASPxRadioButtonList> <dx:ASPxGridView ID="Grid" runat="server" ClientInstanceName="grid" KeyFieldName="ID" OnBatchUpdate="Grid_BatchUpdate" OnRowInserting="Grid_RowInserting" OnRowUpdating="Grid_RowUpdating" OnRowDeleting="Grid_RowDeleting"> <SettingsEditing> </SettingsEditing> <Columns> <dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true"> <CustomButtons> <dx:GridViewCommandColumnCustomButton ID="CopyButton" Text="Copy"></dx:GridViewCommandColumnCustomButton> </CustomButtons> </dx:GridViewCommandColumn> <dx:GridViewDataTextColumn FieldName="C1"> </dx:GridViewDataTextColumn> <dx:GridViewDataSpinEditColumn FieldName="C2"> </dx:GridViewDataSpinEditColumn> <dx:GridViewDataColumn FieldName="C3"> </dx:GridViewDataColumn> <dx:GridViewDataCheckColumn FieldName="C4"> </dx:GridViewDataCheckColumn> <dx:GridViewDataDateColumn FieldName="C5"> </dx:GridViewDataDateColumn> </Columns> <SettingsEditing Mode="Batch" /> <ClientSideEvents BatchEditStartEditing="OnStartEdit" CustomButtonClick="OnCustomButtonClick" /> </dx:ASPxGridView> </form> </body> </html>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.