New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Creating Duplicate Grid Rows

Environment

Product Version	2021.3.1109
Product	Telerik UI for ASP.NET MVC Grid

Description

How can I create a copy of a Grid row when the user clicks a button?

Solution

Create a custom command button and provide a handler inside the click method.
Initialize the click handler.
In the click handler, get the current table row and the data item bound to it through the dataitem method.
Add a new record to the grid dataSource with the corresponding properties of the current data item.

Index.cshtml
	@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
	    .Name("grid")
	    .Columns(columns =>
	    {
	        columns.Bound(p => p.ProductName);
	        columns.Bound(p => p.UnitPrice).Width(100);
	        columns.Bound(p => p.UnitsInStock).Width(100);
	        columns.Bound(p => p.Discontinued).Width(100);
	        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
	        columns.Command(c => c.Custom("Add duplicate row").Click("onClickHandler")).Width(200);
	    })
	    .ToolBar(toolbar => toolbar.Create())
	    .Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Top))
	    .Pageable()
	    .Sortable()
	    .Scrollable()
	    .HtmlAttributes(new { style = "height:430px;" })
	    .DataSource(dataSource => dataSource
	        .Ajax()
	        .PageSize(5)
	        .Events(events => events.Error("error_handler"))
	        .Model(model => model.Id(p => p.ProductID))
	        .Create(update => update.Action("EditingInline_Create", "Grid"))
	        .Read(read => read.Action("EditingInline_Read", "Grid"))
	        .Update(update => update.Action("EditingInline_Update", "Grid"))
	        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
	    )
	)
script.js
<script type="text/javascript">
	function onClickHandler(e){
	   // prevent page scroll position change
	          e.preventDefault();
	          var grid = $("#grid").getKendoGrid();
	          // e.target is the DOM element representing the button
	          var tr = $(e.target).closest("tr"); // get the current table row (tr)
	          // get the data bound to the current table row
	          var dataItem = grid.dataItem(tr);
	          grid.dataSource.add({
	                ProductName:dataItem.ProductName,
	                UnitPrice:dataItem.UnitPrice,
	                UnitsInStock:dataItem.UnitsInStock,
	                Discontinued:dataItem.Discontinued
	          });
	}
</script>

For more information on how to implement the suggested approach, refer to the following Telerik REPL example.

Creating Duplicate Grid Rows

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also