This example demonstrates how to implement a custom Copy button that allows users to clone a row in ASPxGridView in batch edit mode.
To implement this functionality, follow the steps below.
- 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" ... />
- In the CustomButtonClick event handler, call the AddNewRow method to add a new row.
JavaScriptfunction OnCustomButtonClick(s, e) {
if (e.buttonID == "CopyButton") {
// ...
s.AddNewRow();
}
}
- 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" />
JavaScriptfunction 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
- Default.aspx (VB: Default.aspx)
Documentation
More Examples
Example Code
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>