Copy from Excel

[Ignacio]

Hi,
Is it possible to copy cells from MS Excel and paste them in ejGrid? or maybe i have to use other type of javascript grid?

Thanks!

[Karthick Kuppusamy]

Hi Ignacio, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we have created a sample based on your requirement.In that sample we have converted the excel data to the Json data and we binded that data to the grid. 

Please find the code example. 

 

<script type="text/javascript"> 

        var data = [{ ID: 10248,Name: "Nancy", Address: "132,Capitalway,USA",MobileNumber:9898934539 }, 

                       { ID: 10249, Name:"andrew",Address: "4746,Seattle,USA",MobileNumber:9898432464 }, 

           ]; 

 

        $(function () { 

            $("#Grid").ejGrid({ 

                dataSource: data, 

                allowPaging: true, 

                columns: [ 

                         { field: "ID", headerText: "ID", textAlign: ej.TextAlign.Right, width: 65 }, 

                         { field: "Name", headerText: "Name", width: 90 }, 

                         { field: "Address", headerText: "Address", width: 90 }, 

                         { field: "MobileNumber", headerText: "Mobile Number", width: 90, textAlign: ej.TextAlign.Right }, 

                         ] 

            }); 

Converting Pasted Data to JSON 

The HTML markup and jQuery scripts play a vital role in getting clipboard Excel information and converting it to JSON. Also, for this purpose, We have written the jquery.pastable.js file in the jQuery plug-in style. 

 

Note: The jquery.pastable.js file is attached with the sample at the end of this post. 

The final script and HTML mark up are as follows.  

 

HTML 

<b>Paste your Excel data here:</b> <br> 

                <div id="pastable" contenteditable="true" style="width: 0; height: 40px; padding-left: 250px; overflow: hidden; border: solid 1px; text-indent: 100px; font-size: 0;"> </div> 

  

JQUERY 

$("#pastable").pastable({ 

                OnPasteComplete: function (data) { 

                    var jsonData = []; 

                    // Ensuring the pasted information is Excel data or HTML table data. 

                    if (data instanceof Object) { 

                        for (i = 0; i < data.length; i++) { 

                            jsonData.push(data[i]); 

                        } 

                      

                    } 

                    var gridData = JSON.stringify(jsonData); 

                    var gridObj = $("#Grid").data("ejGrid"); 

                    gridObj.dataSource(ej.parseJSON(gridData));//binding the excel data to the grid  

                } 

 

Please find the Snapshots for your reference. 

Excel data. 

 

Before Pasting. 

 

After pasting. 

 

Note:Grid column and the pasted excel data columns are must same order. 

Please refer the following UG Link for your reference. 

https://help.syncfusion.com/api/js/ejgrid#methods:datasource. 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1553587620.zip. 

Regards, 

K.Karthick.