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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132248 Aug 22,2017 10:47 PM UTC Aug 28,2017 11:06 AM UTC ASP.NET MVC 7
loading
Tags: TreeGrid
Matthew Gordon
Asked On August 22, 2017 10:47 PM UTC

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 [Syncfusion]
Replied On August 23, 2017 10:19 AM UTC

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, 
 
Please let us know if you require any other assistance on this. 
Regards, 
Suriyaprasanth R. 


Matthew Gordon
Replied On August 23, 2017 11:10 PM UTC

Thanks for the help, it works great!

Matthew


Jonesherine Stephen [Syncfusion]
Replied On August 24, 2017 05:00 AM UTC

Hi Matthew, 
Thanks for the update. 
Please let us know if you need further assistance on this. 
 
Regards, 
Jone sherine P S 


Matthew Gordon
Replied On August 25, 2017 01:40 AM UTC

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 [Syncfusion]
Replied On August 25, 2017 04:52 PM UTC

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
Replied On August 28, 2017 12:10 AM UTC

Thanks again, it works well.


Suriyaprasanth Ravikumar [Syncfusion]
Replied On August 28, 2017 11:06 AM UTC

 
Hi Matthew 
 
Thanks for the update.  
 
Please let us know if you need further assistance on this.  
  
Regards,  
Suriyaprasanth R 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;