BuyLog In
Example T115891
Visible to All Users

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

This example demonstrates how implement a custom Copy button that allows users to clone a row in GridView extension 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.
Code
var grid = Html.DevExpress().GridView(settings => {  
    settings.Name = "GridView";  
    settings.SettingsEditing.Mode = DevExpress.Web.GridViewEditingMode.Batch;  
    settings.CommandColumn.Visible = true;  
    settings.CommandColumn.CustomButtons.Add(new DevExpress.Web.GridViewCommandColumnCustomButton() { ID = "CopyButton", Text = "Copy" });  
    settings.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 to 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).
Razor
settings.ClientSideEvents.BatchEditStartEditing = "OnStartEdit";  
JavaScript
function OnStartEdit(s, e) {  
  // ...  
  for (var i = 0; i < s.GetColumnsCount() ; 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

T115891/Views/Home/_GridViewPartial.cshtml 
Razor
@{
    var grid = Html.DevExpress().GridView(settings =>
    {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
        settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchUpdatePartial" };
        settings.SettingsEditing.Mode = DevExpress.Web.GridViewEditingMode.Batch;
        settings.CustomActionRouteValues = new { Controller = "Home", Action = "GridViewCustomActionPartial" };
        settings.CommandColumn.Visible = true;
        settings.CommandColumn.ShowDeleteButton = true;
        settings.CommandColumn.ShowNewButtonInHeader = true;
        settings.CommandColumn.CustomButtons.Add(new DevExpress.Web.GridViewCommandColumnCustomButton() { ID = "CopyButton", Text = "Copy" });
        string mode = ((string)Session["Mode"]).ToLowerInvariant();
        if (mode == "row")
            settings.SettingsEditing.BatchEditSettings.EditMode = DevExpress.Web.GridViewBatchEditMode.Row;
        else
            settings.SettingsEditing.BatchEditSettings.EditMode = DevExpress.Web.GridViewBatchEditMode.Cell;
        settings.KeyFieldName = "ID";
        settings.ClientSideEvents.BatchEditStartEditing = "OnStartEdit";
        settings.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick";
        settings.Columns.Add("C1");
        settings.Columns.Add(column =>
        {
            column.FieldName = "C2";
            column.ColumnType = MVCxGridViewColumnType.SpinEdit;
        });
        settings.Columns.Add("C3");
        settings.Columns.Add(column =>
        {
            column.FieldName = "C4";
            column.ColumnType = MVCxGridViewColumnType.CheckBox;
        });
        settings.Columns.Add(column =>
        {
            column.FieldName = "C5";
            column.ColumnType = MVCxGridViewColumnType.DateEdit;
        });
        settings.CellEditorInitialize = (s, e) =>
        {
            DevExpress.Web.ASPxEdit editor = (DevExpress.Web.ASPxEdit)e.Editor;
            editor.ValidationSettings.Display = DevExpress.Web.Display.Dynamic;
        };
    });
}
@grid.Bind(Model).GetHtml()
T115891/Views/Home/Index.cshtml 
Razor
<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 = 1; i < s.GetColumnsCount() ; 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;
            }
    }
    function OnSelectedIndexChanged(s, e) {
        GridView.PerformCallback({ key: s.GetSelectedItem().text })
    }
</script>
<b>Bath Edit Mode:</b>
@Html.DevExpress().RadioButtonList(settings =>
{
    settings.Name = "rbl";
    settings.Properties.Items.Add("Cell").Selected = true;
    settings.Properties.Items.Add("Row");
    settings.Properties.ClientSideEvents.SelectedIndexChanged = "OnSelectedIndexChanged";
}).GetHtml()
<form id="myForm">
    @Html.Action("GridViewPartial")
</form>

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.