Custom context menu to copy/paste a row

[Loic Roger]

Hello,

In a TreeGrid, I would like to be able to right-click on a row and have a context menu opens with a "Copy" option to copy the data for the whole row.

Then, after the user inserted a new row, I would like to be able to right-click on this new row and  have a context menu opens with a "Paste" option to paste *some* data of the copied row to this new row (paste all columns but one).

I was able to get the "copy" row portion works ok but I am not sure about the paste portion.

Could you provide a sample showing the above ?

Thanks much for the help !

[Pon Selva Jeganathan]

Hi Loic,

Thanks for contacting syncfusion forum.

Query: I was able to get the "copy" row portion works ok but I am not sure about the paste portion.

Based on your query, we understand you need to paste the copied row using context menu. We achieved your query by using custom context menu feature and addRecord method of the treegrid

You can add the row using addRecord method of the Tree grid. You need to pass the record, index, and row position as parameters of the addRecord method.

Please refer to the below code snippet,

@{

    List<object> contextItems = new List<Object>();

    contextItems.Add(new { text= "Copy", target= ".e-content", id= "customCopy" });

    contextItems.Add(new

    {

        text="Paste",

        target=".e-content",

        id="pastechildrow",

        iconCss=" e-icons e-paste-2",

        cssClass="e-flat",

    });

}

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" treeColumnIndex="1" enableCollapseAll="false" allowResizing="true" enablePersistence="true"

              allowSorting="true"

              allowPaging="true"

              allowFiltering="true"

              load="onload" contextMenuOpen="onOpen" contextMenuClick="onClick"

              contextMenuItems="contextItems">

…..

 

 

 

…..

 

 

 

    function onClick(args) {

        var treegrid = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];;

        var selectedRecord = treegrid.getSelectedRecords()[0];

        if (args.item.id === 'customCopy') {

            selectedIndex = treegrid['getSelectedRowIndexes']()[0];

            // select the records on perform Copy action

            selectedRecord = treegrid['getSelectedRecords']()[0];

        } else if (args.item.id === 'pastechildrow') {

            var index = treegrid['getSelectedRowIndexes']()[0];

           treegrid.addRecord(selectedRecord, index - 1, 'Below'); // paste a row

        }

 

    }

      

Please refer to the below Sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/coresample791309782

Please refer to the below help documentation,

https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/context-menu#custom-context-menu-items

Please refer to the below API documentation,

Add: https://ej2.syncfusion.com/documentation/api/treegrid/#addrecord

Row Position: https://ej2.syncfusion.com/documentation/api/treegrid/editSettings/#newrowposition

Kindly get back to us for further assistance.

Regards,

Pon selva