Using the right truck tools is important for safely and efficiently completing a job. Before starting a job, it’s important to make sure you have the right tools for the job. That means selecting the right size and type of tool for the job. It’s also important to make sure the tools you’re using are in proper working order. https://trucksbuddy.com/best-running-boards-for-honda-ridgeline/

Hello Indra,

I have been looking into your question and currently, the igGrid control does not provide a built-in functionality for copying rows from a given igGrid and placing them in the same or another igGrid.

However, to achieve your requirement of copying a row or multiple rows and then editing them, a custom approach on programmatically level could be created to get as close as possible to the given requirement.

For example, what I could suggest as an approach for this case is to create an additional column in the given grid, which will be the template with a button to perform the duplication of the given row in the igGrid.

Another property of string type will be created in the model, by default it will not have a value and will be an empty string. This column of this data property will be templated with a button or according to your preferences and according to your custom logic with whatever you want. Pressing this button will copy the given row in the grid with the same values, thus getting as close as possible to copy and paste functionality. After that this row will be editable as well.

First the column will be templated:

column.For(x => x.Duplicate).HeaderText("Duplicate").DataType("string").Hidden(false).Template("<p style='text-align: center; margin: 0; font -weight: bold;'>Duplicate</p>");

This column will also be read-only so it cannot be edited:

ColumnSettings(settings =>
             { settings.ColumnSetting().ColumnKey("Duplicate").ReadOnly(true);
});

After that, the cellClick event will be handled by adding an AddClientEvent and an event of type GridClientEvents:

AddClientEvent(GridClientEvents.CellClick, "cellClick")

A script tag will be created and the cellClick event will be handled by creating a function with the same name. In the function when the cell of the column with the button that we templated is clicked, the given row to be copied and pasted as well as its primaryKey will be taken, after which a new row will be created with the same values but with a new primaryKey to be a valid new record in the igGrid data. After which row will be added to the data with the insertRow method and the grid will be rebound to display all new changes with dataBind method.

function cellClick(evt, ui) {
        if (ui.colIndex === 6) {
            let ds = $("#grid1").data('igGrid').dataSource;
            let pk = $("#grid1").data('igGrid').dataSource._data.length + 1;
            let rec = $("#grid1").igGrid("findRecordByKey", ui.rowKey);
            let temp = pk.toString();
            let newRec = { CustomerID: temp, CompanyName: rec.CompanyName, ContactName: rec.ContactName, Address: rec.Address, City: rec.City, Salary: rec.Salary, Duplicate: "" };
            ds.insertRow(pk, newRec, ui.rowIndex + 1, true);
            $("#grid1").igGrid("dataBind");
        }
    }

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.

5355.igGridCopyPaste.zip

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics