We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Cut and Paste in React Grid.

Dear all,
we are looking for some hints on creating cut and paste in the react dataGrid, an simple example.
Our requirement are the following:
1. After selecting multiple lines we might want to use ctrl+x to cut from the grid and ctrl+vto insert into another grid position.
2. We want to select multiple lines, copy the lines with ctrl-c and then paste with ctlr+v
Best Regards,
Giorgio.


5 Replies

PS Pavithra Subramaniyam Syncfusion Team October 23, 2019 06:34 AM UTC

Hi Giorgio,  
 
Thanks for contacting Syncfusion support. 
 
Query#1:  After selecting multiple lines we might want to use ctrl+x to cut from the grid and ctrl+vto insert into another grid position. 
 
In Essential JavaScript 2 Grid we have Row drag and drop feature for row reordering. Using this feature you can select multiple rows and reorder the rows in grid with required position. Please refer to the below documentation and demo link for more information. 
 
 
                               https://ej2.syncfusion.com/react/demos/#/material/grid/drag-drop-within-grid 
 
Query#2: We want to select multiple lines, copy the lines with ctrl-c and then paste with ctlr+v 
 
You can copy(ctrl+c) and paste(ctrl+v) the Grid row data by using the “ClipBoard” feature. 
 
 
Demo                  : https://ej2.syncfusion.com/react/demos/#/material/grid/clipboard 

If the above does not meet your requirement please share the below details that will be helpful for us to provide a better solution as early as possible. 

1.                   Do you want to past the Grid rows within the same grid or another Grid 
2.                   Do you want only reorder the rows with keys (ctrl+X, ctrl+V) 
 
Regards, 
Pavithra S. 



GI Giorgio October 23, 2019 06:01 PM UTC

Thanks,
To answer your questions (the custom component should be ready at end of the week):
1. We want to copy and paste (as text editor does) within the same grid.
2. We want to give the option to cut (as a text editor does) and optionally paste if needed.
To clarify further, and making useful for other users . We can proceed for Requirement/Queries.

Req#2: We want to select multiple lines, copy the lines with ctrl-c and then paste with ctlr+v

I was able to copy using the clipboard but i miss the pieces of bytes that does the paste.

The code that does the copy is :
 public copy(){
    if (this.gridInstance) {
      this.gridInstance.copy();
    }
  }

Now my problem is to do the paste after a given point.
In the github source code you have a method called
:
 paste(data: stringrowIndex: numbercolIndex: number):


This method requieres that data, (the row and the cols -easy part) but the copy in your code is :

  public copy(withHeader?: boolean): void {
        if (document.queryCommandSupported('copy')) {
            this.setCopyData(withHeader);
            document.execCommand('copy');
            this.clipBoardTextArea.blur();
        }
        if (this.isSelect) {
            window.getSelection().removeAllRanges();
            this.isSelect = false;
        }
    }


The question is where can i fetch code copied? Ok. Suppose now that you provide me the way to get the copied data, and i paste that data.
We would like to insert after that a selected line, do i overwrite the lines (it is not desidered)? We would like to insert to any kind of position the pasted data and line will shift.
Can i use the function of teh reouder module
 public reorderRows(fromIndexes: number[], toIndex: number)


Before pasting?

Req#1:  After selecting multiple lines we might want to use ctrl+x to cut from the grid and ctrl+vto insert into another grid position.

Now there is the cut/paste issue. The first flow that i have in mind is:
- get the selected rows                                                                 getSelectedRows
- copy to the clipboards using Clipboard module                        copy
- delete the records. (any other idea here to simulate the cut)     deleteRecord
- paste the records at the end (see previous point)                       pasteRecord
- reorder rows.                                                                              reorderRecords 
Does it work the upper sequence of action()
Up to know i have tried just an addRecord and deleteRecord sequence but it add just blank records even if copied in an array the previously using getSelectedRecords().

Best Regards,
Giorgio.


PS Pavithra Subramaniyam Syncfusion Team October 24, 2019 08:47 AM UTC

Hi Giorgio, 
 
Thanks for your update and detailed explanation. 
 
We have validated your requirements and you can achieve your requirements by binding keydown event to the Grid element and perform operations such as cut, copy and paste using grid methods. Please find the below code example and sample for more information. 
 
Index.js 
 
. . . 
 
export class Clipboard extends SampleBase { 
    constructor() { 
        super(...arguments); 
        this.gridSelectedRecords = []; 
        this.selectionsettings = { type'Multiple' }; 
        this.editSettings = {allowAdding: true, allowDeleting: true} 
    } 
 
    keyPressHandler (args) { 
if (args.action == "ctrlPlusC") { 
// here we are storing the selected records to perform copy operation 
  this.gridSelectedRecords = this.gridInstance.getSelectedRecords(); 
} 
if (args.ctrlKey  && args.code === 'KeyX') { 
// here we are storing the selected records 
    this.gridSelectedRecords = this.gridInstance.getSelectedRecords(); 
// here we are deleting the selected records to perform cut opeartion 
    this.gridInstance.deleteRecord(); 
} 
if (args.ctrlKey  && args.code === 'KeyV') { 
  var index = this.gridInstance.selectedRowIndex; 
// pasting the records using addRecord method 
   if (this.gridSelectedRecords.length) { 
    this.gridSelectedRecords.forEach((record , i)=> { 
      this.gridInstance.addRecord(record, index); 
      index++ 
    }) 
} 
} 
    } 
 
    created () { 
      this.gridInstance.element.addEventListener('keydown'this.keyPressHandler.bind(this)) }; 
 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section'> 
                    <GridComponent dataSource={data} editSettings={this.editSettings} created={this.created.bind(this)}  
ref={grid => this.gridInstance = grid} enableHover={false} allowPaging={true} pageSettings={{ pageCount: 5 }} selectionSettings={this.selectionsettings}> 
                         . . . 
                        <Inject services={[Page,EditSelection,]}/> 
                    </GridComponent> 
                </div> 
            </div>); 
    } 
} 
 
render(<Clipboard />, document.getElementById('sample')); 
 
 
 
Note: We have pasted the rows on the SelectedRowIndex. You can modify the index based on your requirement. Also for Add and Delete it is essential to set a primary column which have unique values.  
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 



GI Giorgio October 29, 2019 11:51 AM UTC

Thanks,
worked like a charm.


TS Thavasianand Sankaranarayanan Syncfusion Team October 30, 2019 06:10 AM UTC

Hi Giorgio, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Up arrow icon