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

Create 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

  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.
    @(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 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.

In this article
Not finding the help you need? Improve this article