Creating Duplicate Grid Rows

Environment

Product Version	2021.3.1109
Product	Telerik UI for ASP.NET Core 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.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Creating Copies of Grid Rows
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base