igGrid append row by copying existing row

I want to add a Duplicate Row functionality to my igGrid. That means, I want to append a new row by copying an existing row. After appending this row, the requirement is to keep it uncommited. But when I click on this new row, I get "recordOrPropertyNotFoundException" error. What is the best way to do this? I have a button column. I use MVC wrapper for the grid. Row editing is enabled on the grid.

            GridColumn DuplicateRow = new GridColumn();
            DuplicateRow.Key = "DuplicateRow";
            DuplicateRow.HeaderText = "";
            DuplicateRow.DataType = "string";
            DuplicateRow.Template = "<input type='button' title='Duplicate Row' onclick='duplicateRow(${TemplateID})' value='D' class=btn--primary' style='padding: 0.2rem'/>';

Please see my code below.

    function duplicateRow(rowId) {
        var currentRow = $('#Grid1').data('igGrid').dataSource.findRecordByKey(rowId);
        var newRow = $.extend(true, {}, currentRow);
        newRow.TemplateID = generateID(25);
        $('#Grid1').igGridUpdating("addRow", newRow);
        $('#Grid1').igGridUpdating("startEdit", newRow.TemplateID, 1);
        $('#Grid1').igGridUpdating("endEdit", true);

    function generateID(length) {
        let text = ""
        const possible = "0123456789"
        for (let i = 0; i < length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length))
        return text

And I don't see Done / Cancel buttons after programmatically start editing on this new row. Please help me to find a solution to this issue.