Cut and Paste in React Grid.

[Giorgio]

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.

[Pavithra Subramaniyam]

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. 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/row/#drag-and-drop 

 

Demo                  : https://ej2.syncfusion.com/react/demos/#/material/grid/row-drag-drop 

                               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. 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/clipboard/ 

 

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. 

[Giorgio]

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: string, rowIndex: number, colIndex: 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.

[Pavithra Subramaniyam]

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,Edit, Selection,]}/> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

 

render(<Clipboard />, document.getElementById('sample')); 

 

 

Sample: https://stackblitz.com/edit/react-148491-cut-copy-paste-ej2grid?file=index.js 

 

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. 

[Giorgio]

Thanks,

worked like a charm.

[Thavasianand Sankaranarayanan]

Hi Giorgio, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.