How to duplicate a selected row and add it underneath the selected row

Question

Hello!I have a grid with batch editing that looks like this:------------------------------------------------------------

---------------------------------------------------------I would like an "Add" button that does the following:- if a row is not selected, pop up a message that says no row has been selected for this operation (just like the "Delete" button)- if a row is selected-- copy the data in the selected row-- create a row underneath the selected row-- fill the new row with some of the copied dataI have been trying to figure it out with batchAdd, but I am not having success so far.Thanks!

Shalini Maragathavel · Accepted Answer

Hi Jessica, 

Sorry for the late reply. 

By default in EJ2 Grid editing the newly added row element will be added in the DOM virtually (i.e) which will not reflected to the gridRows. When we save the newly added record then only it will be reflected to the gridRows, so it is not feasible to insert the newly added row element under the selected row. 

Regards, 
Shalini M

Jessica Goodrich · Answer

I made a little bit of progress by using beforeBatchAdd instead of batchAdd and using the following js:function checkForSelectedRow(args) { args.cancel = true; var gridObj = document.getElementById("Grid").ej2_instances[0]; var selectedRow = gridObj.getSelectedRecords()[0]; if (selectedRow === undefined) { bootbox.alert({ title: 'No record selected to copy from', message: 'You must select a row that you would like to duplicate in order to add a new row. The row you select will be used to determine which Action/Objective you are creating a Status Update for and will be used to populate the Division, Focus Area, Objective/Action, FY, and Reporter(s) fields.

The Reporting Period, Status, and Comment fields will be editable.', centerVertical: true }); } else { duplicateSelectedRow(selectedRow) } } function duplicateSelectedRow(selectedRow) { bootbox.alert({ title: 'Not currently working :)', message: 'When this works, a row will be added underneath the row you selected, and it will be populated with data for this objective:

' + selectedRow.ReporterObjectiveStatusUpdateFullDetail.ObjectiveDescription, centerVertical: true }); console.log(selectedRow); }

Ryan Lim · Answer

Can anyone tell me, how to develop a theme like apksclub in ASP.NET Core or MVC?

Jessica Goodrich · Answer

Ryan Lim - you should make your question its own thread. That has nothing to do with this thread...

Jessica Goodrich · Answer

Any ideas on this? Haven't heard back yet...

Jessica Goodrich · Answer

Ok, I have made some more progress. My grid is using beforeBatchAdd=checkForSelectedRowThat function looks like this:function checkForSelectedRow(args) { var grid = document.getElementById("Grid").ej2_instances[0]; var selectedRow = grid.getSelectedRecords()[0]; if (selectedRow === undefined) { args.cancel = true; bootbox.alert({ title: 'No record selected to copy from', message: 'You must select a row that you would like to duplicate in order to add a new row. ' + 'The row you select will be used to determine which Action/ Objective you are creating a Status Update for and will populate the Division, Focus Area, Objective / Action, and FY fields.

' + 'The Reporting Period, Status, and Comment fields will be editable.

' + 'The new row will appear at the top of the grid. After updating your changes, it will be sorted.', centerVertical: true }); } else { args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["ObjectiveId"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["ObjectiveId"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["FiscalYearSortOrder"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["FiscalYearSortOrder"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["StatusUpdateFiscalYearId"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["StatusUpdateFiscalYearId"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["DivisionDescription"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["DivisionDescription"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["AspectDescription"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["AspectDescription"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["ObjectiveDescription"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["ObjectiveDescription"]; args.defaultData["ReporterObjectiveStatusUpdateFullDetail"]["StatusUpdateFiscalYearDescription"] = selectedRow["ReporterObjectiveStatusUpdateFullDetail"]["StatusUpdateFiscalYearDescription"]; args.defaultData["Champions"] = selectedRow["Champions"]; args.defaultData["Reporters"] = selectedRow["Reporters"]; args.defaultData["ReportingPeriods"] = selectedRow["ReportingPeriods"]; args.defaultData["Statuses"] = selectedRow["Statuses"]; } }So all that is missing is adding the new row underneath the selected row instead of at the top of the grid. Is this possible? I have tried args.index = x with no luck.

Jessica Goodrich · Answer

Thanks for letting me know!

Shalini Maragathavel · Answer

Hi Jessica, 

Thanks for your update. 

We are glad that the provided solution resolved your query. Please get back to us if you need further assistance. 

Regards, 
Shalini M.