Copy and Paste with Dropdown value

Question

Hello,how can I make the Copy and Paste also work for Dropdown values?The copying of the Dropdown value works, but when I now select the same cell in a different Row and press Ctrl + V, it does not paste the Value in the selected Dropdown.

Santhosh Iruthayaraj · Accepted Answer

Hi Harald Stapfer,Based on the column definition, it appears that you are
using the "allBusinessPartners" property as a dataSource for
the Foreign Key Column. We recommend utilizing this dataSource in conjunction
with the solution provided in our previous response. To retrieve the key using
the previous solution, you should use the Foreign Key dataSource, not the Grid
dataSource, as mentioned in the previous response. We have prepared the same
solution based on your column definition, which you can find below:

function beforePaste(args) {
      // use your foreign key column field name here
      if (args.column.field === 'businesspartner') {
        let foreignKeyRecord = allBusinessPartners.find(
          (record) => args.data === record.name // use your foreignKeyValue
        );
   
        // use your foreignKeyField name here
        args.data = foreignKeyRecord ? foreignKeyRecord.id : undefined;
      }
    }

Regards,Santhosh
I

Santhosh Iruthayaraj · Answer

Hi Harald Stapfer,Greetings from Syncfusion Support.Upon reviewing your query, we understand that your
requirement is to copy value from one cell and paste them into another cell. To
achieve this functionality, you can leverage the Batch Edit feature of the Grid
with Cell selection. Below is the code snippet and a sample for your reference:

[index.js]
   
      <GridComponent
        dataSource={data}
        allowPaging={true}
        toolbar={['Add', 'Edit', 'Delete', 'Update', 'Cancel']}
        editSettings={{
          allowEditing: true,
          allowAdding: true,
          allowDeleting: true,
          mode: 'Batch',
        }}
        selectionSettings={{
          mode: 'Cell',
          cellSelectionMode: 'Box',
          type: 'Multiple',
        }}
      >

Sample: https://stackblitz.com/edit/react-grid-with-batch-editFor additional details on the copy-paste clipboard
functionalities of the Grid, refer to the documentation provided at the
following link:Documentation: https://ej2.syncfusion.com/react/documentation/grid/clipboardFeel free to reach out if you have any further queries.Regards,Santhosh I

Harald Stapfer · Answer

Hello Santosh,With the following code, the copy and paste does not work, when I try to paste the Value, the Dropdown gets set to an empty value.Dropdown Column:<ColumnDirective field="businesspartner" headerText="Geschäftspartner" width={250} editType="dropdownedit" edit={{                                params: {                                    allowFiltering: true,                                    change: handleBusinesspartnerDropdownChange,                                    showClearButton: true,                                    filtering: (e) => {                                        if (e.text != '') {                                            var query = new Query();                                            query = (e.text !== '') ? query.where('name', 'contains', e.text, true) : query;                                            e.updateData(allBusinessPartners, query);                                        }                                    }                                }                            }} dataSource={allBusinessPartners} foreignKeyField='id' foreignKeyValue='name' />Before copy:  When I now copy the "Test" value of the Dropdown, and paste it where the value "Test 1" is selected, this happens:

Santhosh Iruthayaraj · Answer

Hi Harald Stapfer,Based on the provided details, it seems you are using a
Foreign Key column. The issue you are facing is a result of utilizing the
Foreign Key column. As you may know, the Foreign Key Column displays data from
another dataSource bound through the "columns.dataSource" property.
Since you've displayed different data, when copying, the displayed data
(foreignKeyValue data) will be copied to the clipboard. However, for storing
values with a Foreign Key column, you need to provide foreignKeyField data. To
achieve this, you can utilize the "beforePaste" event of the
Grid. Please refer to the code snippet and sample below for your reference:

[index.js]
   
    function beforePaste(args) {
      // use your foreign key column field name here
      if (args.column.field === 'CustomerID') {
        let foreignKeyRecord = foreignKeyDataSource.find(
          (record) => args.data === record.ContactName // use your foreignKeyValue
        );
   
        // use your foreignKeyField name here
        args.data = foreignKeyRecord ? foreignKeyRecord.CustomerID : '';
      }
    }

Sample: https://stackblitz.com/edit/grid-with-foreign-key-columnbeforePaste event API: https://ej2.syncfusion.com/react/documentation/api/grid/#beforepasteNote: In the code snippet and sample, we have utilized
properties based on our sample. When implementing the solution in your
application, make sure to replace the properties with your property
definitions.Regards,Santhosh
I

Harald Stapfer · Answer

HI Santosh,how would this work if I don't have a data source, but instead just a grid that instantly gets into the batchAdding mode?In this grid, I set initial records. But it does not have or get any data source beyond that.    const setInitialFields = () => {        const url = window.location.href.split("url=")[1];        if (url == "Businesspartners") {            selectedBusinessPartners.forEach((data) => {                const businesspartnerDetails = allBusinessPartners.filter(businesspartner => businesspartner.id == data.id);                grid.addRecord({ insertion_date: new Date().toDateString(), businesspartner: businesspartnerDetails[0].id, businesspartner_email: businesspartnerDetails[0].email, businesspartner_phone: businesspartnerDetails[0].phone, businesspartner_fulladress: businesspartnerDetails[0].fulladress, customernumber: businesspartnerDetails[0].customernumber, status: 1 });            })        } else if (url == "Contacts") {            selectedContacts.forEach((data) => {                const contactDetails = allContacts.filter(contact => contact.id == data.id);                const businessPartnerDetails = allBusinessPartners.filter(businesspartner => businesspartner.guid == contactDetails[0].companyguid);                grid.addRecord({ insertion_date: new Date().toDateString(), contact: data.id, contact_email: contactDetails[0].email, contact_phone: contactDetails[0].phone, contact_mobilephone: contactDetails[0].mobilephone, businesspartner: businessPartnerDetails[0].id, businesspartner_email: businessPartnerDetails[0].email, businesspartner_phone: businessPartnerDetails[0].phone, businesspartner_fulladress: businessPartnerDetails[0].fulladress, customernumber: businessPartnerDetails[0].customernumber, status: 1 })            });        }    };    const renderComplete = () => {        setInitialFields();        if (grid && (grid.dataSource instanceof Array && grid.dataSource.length <= 1)) {            setCulture("de");            grid.dataSource = new DataManager({                adaptor: new RemoteSaveAdaptor,                json: [],                url: '/api/marketinglists_and_resubmissions/resubmissions/createFromSelectedRows',            });        }    }