New to Telerik UI for ASP.NET Core? Download free 30-day trial

Creating Duplicate Grid Rows


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


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


  1. Create a custom command button and provide a handler inside the click method.
  2. Initialize the click handler.
  3. In the click handler, get the current table row and the data item bound to it through the dataitem method.
  4. Add a new record to the grid dataSource with the corresponding properties of the current data item.
        .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))
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .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 type="text/javascript">
    function onClickHandler(e){
       // prevent page scroll position change
              var grid = $("#grid").getKendoGrid();
              // is the DOM element representing the button
              var tr = $("tr"); // get the current table row (tr)
              // get the data bound to the current table row
              var dataItem = grid.dataItem(tr);

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

More ASP.NET Core Grid Resources

See Also

In this article