Trying to implement copy and paste a row of data from excel into the row being currently edited

[Matthew Gordon]

Hi there,

Our users are asking for the ability to paste a row of data from Microsoft Excel into the row being currently edited in the Syncfusion TreeGrid.

Let's say I have three columns of data in the TreeGrid: Column201708, Column201709 and Column201710.  In Excel I have three values in three separate but adjacent cells in the same horizontal row, say 10, 20 and 30.

I select these three cells in excel, press CTRL+C (Copy) and then I want to paste these into the Syncfusion TreeGrid, so I double click the first cell to begin editing.  I then press CTRL+V (Paste).  The value 10 should go into Column201708, the value 20 should go into Column201709 and the value 30 should go into Column201710.  But the editor should remain active, because I want the user to then have the option to push ENTER to save the data (like a standard edit), or press ESC to cancel the edit.

Here's what I have so far:

document.addEventListener("paste", function (e) { doPaste(e); });

function doPaste(e) {

    var pastedText = e.clipboardData.getData('text/plain').split("\t");

    $("#TreeGridContainerDataColumn201708").val(pastedText[0]);

    $("#TreeGridContainerDataColumn201709").val(pastedText[1]);

    $("#TreeGridContainerDataColumn201710").val(pastedText[2]);

    e.preventDefault();

}

This works, EXCEPT the value does not appear in the input until it gets the focus.  The first value 10 pastes successfully into Column201708, and it appears, because the input already had the focus.  The values 20 and 30 do get pasted into Column201709 and Column201710 in the background however these don't actually appear until the user either presses TAB to move the focus to those columns or the user clicks into the input directly.

What can I add to this code to get the three pasted values to appear in the three columns without the user then needing to click into each column?

I hope this question makes sense.  Let me know if you need more information and I'll get a sample project together.

Thanks very much in advance,

Matthew

[Suriyaprasanth Ravikumar]

Hi Matthew, 

 

We have analyzed the provided code snippet and we found that the pasted value is not get visible in successive columns. 

The way of updating value to the HTML controls and Syncfusion controls are different. 

 

We have prepared a sample to paste the content from excel sheet, please refer the below code snippet to update the values in Syncfusion controls like ejDatePicker, ejNumericTextbox. 

 

<script type="text/javascript"> 

 

        document.addEventListener("paste", function (e) { doPaste(e); }); 

 

        function doPaste(e) { 

 

            $("#TreeGridContainerTaskName").val("test"); 

            $("#TreeGridContainerStartDate").ejDatePicker('model.value', "03/09/2014"); 

            $("#TreeGridContainerColumn201708").ejNumericTextbox('model.value', 10); 

            $("#TreeGridContainerColumn201709").ejNumericTextbox('model.value', 20); 

            e.preventDefault(); 

        } 

 

</script> 

 

Please find the sample location as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC_1322481679122426 

 

Please let us know if you require any other assistance on this. 

Regards, 

Suriyaprasanth R. 

[Matthew Gordon]

Thanks for the help, it works great!

Matthew

[Jonesherine Stephen]

Hi Matthew, 

Thanks for the update. 

Please let us know if you need further assistance on this. 

 

Regards, 

Jone sherine P S 

[Matthew Gordon]

Hi, actually I do have one more question,

Once I set the value of the ejNumericTextbox like this:

$("#TreeGridContainerColumn201709").ejNumericTextbox('model.value', 20); 

How do I then set focus to it?  I would expect something like this:

$("#TreeGridContainerColumn201709").focus(); 

But that doesn't work :)  Any ideas?

[Jonesherine Stephen]

Hi Matthew,  

We have analyzed your problem. In our Numeric, Currency, Percentage Textboxes having two inputs (hidden and input element). Both the inputs are switching while interact the numeric textbox. Initially hidden Input is displayed to the user, while interact numeric textbox, element was shown.so you can apply the JQuery focus on hidden input to focusing the Numeric Textbox. 

Please find the code example below: 

 

var numericObj = $("#TreeGridContainerNumeric").ejNumericTextbox("instance"); 

numericObj.option("model.value", 20); 

numericObj._hiddenInput.focus(); 

 

 

Regards,  

Jone sherine P S 

[Matthew Gordon]

Thanks again, it works well.

[Suriyaprasanth Ravikumar]

 

Hi Matthew,  

 

Thanks for the update.  

 

Please let us know if you need further assistance on this.  

  

Regards,  

Suriyaprasanth R