1. Home
  2. Forum
  3. ASP.NET Core
  4. Using the spreadsheet control

Using the spreadsheet control

I am just getting started with the spreadsheet control.  I used your getting started example but all I get is a line around where the spreadsheet should be.  I am using the following code:

<!DOCTYPE html>
<html>
<head>
    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/14.2.0.26/js/web/flat-azure/ej.web.all.min.css" />
    <!--  jquery script  -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <!--  jsrender script  -->
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <!-- Essential JS UI widget -->
    <script src="http://cdn.syncfusion.com/14.2.0.26/js/web/ej.web.all.min.js"></script>
    <!--Add custom scripts here -->
</head>
<body>
    <div id="Spreadsheet"></div>
    <script>
        $(function () {
            $("#Spreadsheet").ejSpreadsheet({
                allowImport: true,
                importSettings: {
                    importMapper: "http://js.syncfusion.com/demos/ejservices/api/JSXLExport/Import"
                }
            });
        });
    </script>
</body>
</html>

9 Replies
SK Shanmugaraja K Syncfusion Team October 14, 2016 10:08 AM UTC

Hi Kirk, 

Thanks for using Syncfusion products, 

We have analyzed your provided code examples, with your code the Spreadsheet control rendered properly in our end. Could you please provide more information about your issue? We have demonstrated Spreadsheet sample with your code examples in js playground. Please refer the below link. 


Regards, 
Shanmugaraja K 


KT Kirk Thacker October 17, 2016 08:48 PM UTC

Thanks for your reply.  I have done some additional testing in the playground you provided.  I am running windows 7, with IE ver. 11.  The results I get are in the attached file IEPlayground14.2.0.26.  If I change the Library to version 14.3.0.49 and the jQuery to version 3.1.1 the results are in IEPlayground14.3.0.49. 

Any ideas or suggestions?

Thanks
Kirk

Attachment: IEPlayground14.3.0.49_506e44e6.zip

SI Silambarasan I Syncfusion Team October 18, 2016 08:38 AM UTC

Hi Kirk,  
 
Thanks for your update. 
 
We have checked the reported issue and we are unable to reproduce it in our end.  We have checked this issue with IE v11.0.9600.18163 in Windows 7.  Please refer the following screenshot.  
 
 
 
And, we would like to know the following information. 
 
1. IE 11 version details. 
2. Windows 7 edition details. 
3. Console error details if found. 
 
Could you please share the above information and so that we can analyzed based on that and provide you a better solution? The information provided would be great help for us to resolve your issue. 
 
 
Regards, 
Silambarasan I 


KT Kirk Thacker October 18, 2016 03:56 PM UTC

My IE version is: 11.0.9600.18449
Update Versions: 11.0.35 (KB3185319)

 Windows 7 Enterprise, Service Pack 1

Console Message:  SEC7118: XMLHttpRequest for http://js.syncfusion.com/demos/ejservices/api/JSXLExport/Import required Cross Origin Resource Sharing (CORS).
File: b3qlkvqv


Thanks,
Kirk

KT Kirk Thacker October 18, 2016 04:19 PM UTC

When I run this from Visual Studio 2015 and Chrome I get the following console messages:

jQuery.Deferred exception: $(...).ejSpreadsheet is not a function TypeError: $(...).ejSpreadsheet is not a function
    at HTMLDocument.<anonymous> (http://localhost:32255/Home/Contact:57:27)
    at j (http://code.jquery.com/jquery-3.1.1.min.js:2:29948)
    at k (http://code.jquery.com/jquery-3.1.1.min.js:2:30262) undefined


jquery-3.1.1.min.js:2 Uncaught TypeError: $(...).ejSpreadsheet is not a function(anonymous function) @ Contact:57j @ jquery-3.1.1.min.js:2k @ jquery-3.1.1.min.js:2


If I take out the $(Function() call then there are no errors.

Here is my original code:

<script>

    $(function () {

       $("#Spreadsheet").ejSpreadsheet({

          allowImport: true,

          importSettings: {

             importMapper: "http://js.syncfusion.com/demos/ejservices/api/JSXLExport/Import",

          },

      });

});

</script>


Here is my changed code:

<script>

$("#Spreadsheet").ejSpreadsheet({

allowImport: true,


ImportSettings: {


importMapper: http://js.syncfusion.com/demos/ejservices/api/JSXLExport/Import,




},


});



</script>



KT Kirk Thacker October 18, 2016 04:46 PM UTC

Another question, in the playground example the spreadsheet control only displays 4 rows, how do I change the control height to display more rows?

Thanks,
Kirk

SI Silambarasan I Syncfusion Team October 19, 2016 11:50 AM UTC

Hi Kirk, 
 
Thanks for your update. 
 
Query 1# “My IE version is: 11.0.9600.18449… Console Message:  SEC7118: XMLHttpRequest” 
 
We have checked the reported issue (in IEPlayground14.3.0.49_506e44e6.zip) with IE v11.0.9600.18449 in Windows 7 Enterprise, Service Pack 1 and the Spreadsheet rendered properly.  After that, we have import a sample excel file and it loaded successfully with the message as same like the reported console message.  Could you please confirm that you mentioned this message as an issue?  Please refer the below screenshot. 
 
 
  
Query 2# “When I run this from Visual Studio 2015 and Chrome I get the following console messages:….” 
 
We have checked the reported issue and we suspect that the cause of the issue is due to loading two jQuery scripts i.e. jquery-3.1.1.min.js from View (Contact.cshtml) and another jquery-x.x.x from project layout page (eg: _Layout.cshtml).  So, we would like to suggest you to refer single jQuery script file.    
 
Also, we have prepared a sample to demonstrate this in JS Playground.  Please refer the below link. 
 
 
 
Query 3# “how do I change the control height to display more rows?” 
 
Your requirement to change the height of the Spreadsheet can be achieved by using ‘height’ property under ‘scrollSettings’.  Please refer the following code example. 
 
 
$("#Spreadsheet").ejSpreadsheet({ 
    scrollSettings: { 
        width: 650, 
        height: 500                   
    }, 
    allowImport: true, 
    importSettings: { 
        importMapper: "https://js.syncfusion.com/demos/ejservices/api/JSXLExport/Import" 
    } 
}); 
 
 
We have created a sample to demonstrate this in JS Playground.  Please refer the below sample link. 
 
Online Help Doc Link: 
  
 
 
Regards, 
Silambarasan I 


KT Kirk Thacker October 19, 2016 04:09 PM UTC

With your help all of my issues have been solved.
Thank you,
Kirk

SI Silambarasan I Syncfusion Team October 20, 2016 11:01 AM UTC

Hi Kirk, 
 
Thanks for your update.  We are happy to hear that your issue has been resolved. 
Kindly get back to us if you need any further assistance. 
 
Regards, 
Silambarasan I 


Loader.
Up arrow icon