Skip to content

DevExpress-Examples/asp-net-mvc-gridview-clone-functionality-in-batch-edit-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

settings.ClientSideEvents.BatchEditStartEditing = "OnStartEdit";
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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

About

Implement a custom clone button in batch edit mode.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •