Grid View for ASP.NET MVC - How to implement row clone functionality

This example demonstrates how to create a custom Copy button that allows users to clone a grid row.

Overview

Follow the steps below to implement the row clone functionality in the grid:

1. Create a custom Copy command button, handle the grid's client-side CustomButtonClick event, and do the following in the handler:

   • Pass the clicked row's visible index as a parameter to the grid's GetRowKey method to get the row's key value.
   • Call the grid's PerformCallback method to send a callback to the server.

   settings.CommandColumn.CustomButtons.Add(new GridViewCommandColumnCustomButton() { ID = "btnCopy", Text = "Copy" });
   <!-- ... -->
   settings.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick";

   function OnCustomButtonClick(s, e) {
       rowKeyValueToCopy = s.GetRowKey(e.visibleIndex);
       s.PerformCallback();
   }

2. Handle the grid's client-side BeginCallback event and assign the row's key value to the e.customArgs argument property.

   function OnBeginCallback(s, e) {
       if (e.command === "CUSTOMCALLBACK") {
           e.customArgs["key"] = rowKeyValueToCopy;
       }
   }

3. In an Action specified by the CustomGridViewEditingPartial property, pass the row's key value to the PartialView.

   settings.CustomActionRouteValues = new { Controller = "Home", Action = "CustomGridViewEditingPartial" };

   public ActionResult CustomGridViewEditingPartial(int key) {
       ViewData["key"] = key;
       return PartialView("_GridViewPartial", list.GetPersons());
   }

4. Handle the grid's BeforeGetCallbackResult event and call the grid's server-side AddNewRow method to insert a row.

   settings.BeforeGetCallbackResult = (sender, e) => {
       if(needCreatCopy) {
           MVCxGridView gridView = (MVCxGridView)sender;
           gridView.AddNewRow();
       }
   };

5. Handle the grid's InitNewRow event to copy the values of the clicked row to the inserted one.

   settings.InitNewRow = (sender, e) = {
       if (needCreatCopy) {
           object keyValue = ViewData["key"];
           MVCxGridView gridView = (MVCxGridView)sender;
           object[] rowValues = (object[])gridView.GetRowValuesByKeyValue(keyValue, new string[] { "FirstName", "MiddleName", "LastName" });
           e.NewValues["FirstName"] = rowValues[0];
           e.NewValues["MiddleName"] = rowValues[1];
           e.NewValues["LastName"] = rowValues[2];
       }
   };

Files to Review

• HomeController.cs (VB: HomeController.vb)
• _GridViewPartial.cshtml
• Index.cshtml

Documentation

• Passing Values to a Controller Action through Callbacks

More Examples

• Grid Columns - Custom Command Buttons
• Grid View for ASP.NET Web Forms - How to implement clone functionality in batch edit mode