How could I duplicate an existing row in DevExpress MVC GridView?

Question

I'm working in a large web app written in C# and JavaScript with DevExpress MVC controls. We are using a GridView to display a table with data:

GridView screenshot

I am trying to implement a function that will duplicate the currently selected row with all of its values. The function will be triggered by the button on the toolbar up top as illustrated on the screenshot.

Here is the code (truncated a bit) for the button:

public static void ConfigureGridViewToolbarSettings(GridViewSettings settings, TableViewModel model, HtmlHelper<TableViewModel> helper) {
            settings.Toolbars.Add(tb =>
            {
                tb.EnableAdaptivity = true;
                tb.Name = "GridViewToolBar";
                tb.Enabled = true;
                tb.Position = GridToolbarPosition.Top;
                tb.SettingsAdaptivity.EnableCollapseRootItemsToIcons = true;
                tb.SettingsAdaptivity.Enabled = true;

                var userAccessType = model.UserAccess.GetAccessType();


                    tb.Items.Add(i =>
                    {
                        i.AdaptivePriority = 1;
                        i.Text = "Duplicate Row";

                        if (userAccessType == UserAccessType.Contributor && !model.Table.ContributorCanAddRows)
                            i.Enabled = false;
                        else
                        {
                            i.Enabled = true;
                            i.ItemStyle.CssClass = "GridViewNewRow";
                            i.NavigateUrl = "javascript:ToolbarFunctions.DuplicateRow();";
                        }
                        i.Command = GridViewToolbarCommand.Custom;
                        i.ItemStyle.BackColor = Color.FromArgb(248, 249, 250);
                        i.Image.IconID = DevExpress.Web.ASPxThemes.IconID.EditCopy16x16;
                        i.ToolTip = "Duplicate the selected row";
                    });
                }
       }
}

My attempts so far have been unsucessful:

This code below is the JS method that is supposed to:

1. Copy all the current values of the selected row
2. Create a new row and fill in the cells with the values

What was happening:

1. A lot of 'foo() is not a function' in debugging (ex. e.rowValues[EDM.Table.Grid.LastSelectedColumn.index];)
2. I could not extract the columns' field values either (for loop in the example below), even though those appear like they should be an object with "fieldName" value inside.
3. I was easily able to add a new empty row.

DuplicateRow: function (s, e) {

        var keys = TableDataGridView.GetSelectedKeysOnPage();
        var selectedRow = TableDataGridView.GetRow(keys[0]);
        var columns = TableDataGridView.columns;
        //var rowValue = e.rowValues[EDM.Table.Grid.LastSelectedColumn.index];

        var i = 0;
        var key = TableDataGridView.GetRowKey(selectedRow );
        var fieldNames = [];

        for (var column in columns) {
            fieldNames.join(";", column.fieldName);
        }

        var rowData = TableDataGridView.GetRowValues(keys[0], fieldNames, onCallbackMultiValues);

        // Step 2: Create a new row with the same data
        var newRow = {};
        for(var i = 0; i < columns.length; i++) {
            newRow[columns[i]] = rowData[i];
        }

        // Step 3: Insert the new row into the MVCxClientGridView
        TableDataGridView.AddNewRow(newRow);
}