This section explains the steps to create a simple Essential JS 2 Spreadsheet control in a JavaScript application.
The following list of dependencies is required to use the Spreadsheet control in your application:
|-- @syncfusion/ej2-spreadsheet
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-dropdowns
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-grids
Refer to the following steps to setup your local environment.
Step 1: Create a root folder myapp
for your application.
Step 2: Create myapp/resources
folder to store local scripts and styles files.
Step 3: Create myapp/index.js
and myapp/index.html
files for initializing Essential JS 2 Spreadsheet control.
The Essential JS 2 Spreadsheet control can be initialized by using any of the following two ways:
You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
After installing the Essential JS 2 product build, you can copy the Spreadsheet and its dependencies scripts and style file into the resources/scripts and resources/styles folder.
Refer to the following code to find Spreadsheet’s script and style file location.
Syntax:
Script:
**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles:
**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css
Example:
Script:
C:/Program Files (x86)/Syncfusion/Essential Studio/17.2.0.34/Essential JS 2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js
Styles:
C:/Program Files (x86)/Syncfusion/Essential Studio/17.2.0.34/Essential JS 2/ej2-spreadsheet/styles/material.css
After copying the files, then you can refer the Spreadsheet’s scripts and styles into the index.html
file. The following html code example shows the minimal dependency of Spreadsheet.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Spreadsheet</title>
<!-- Essential JS 2 Spreadsheet's dependents material theme -->
<link href="resources/base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="resources/grids/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet's material theme -->
<link href="resources/spreadsheet/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet's dependents script -->
<script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-grid.min.js" type="text/javascript"></script>
<!-- Essential JS 2 Spreadsheet global script -->
<script src="resources/scripts/ej2-spreadsheet.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Using CDN link, you can directly refer the Spreadsheet control’s script and style into the index.html
.
Refer to the Spreadsheet’s CDN links as follows.
Syntax:
Script:
https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles:
https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script:
http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js
Styles:
http://cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css
The following HTML code example shows the minimal dependency of Spreadsheet.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Spreadsheet</title>
<!-- Essential JS 2 Spreadsheet's dependents material theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet material theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet's dependents script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<!-- Essential JS 2 Spreadsheet's global script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Now, you can start adding Spreadsheet control in the application. For getting started, add a div
element for Spreadsheet control in index.html
. Then, refer the index.js
file into the index.html
file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Spreadsheet</title>
<!-- Essential JS 2 Spreadsheet's dependents material theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet material theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Spreadsheet's dependents script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
<!-- Essential JS 2 Spreadsheet global script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <div> element for Spreadsheet -->
<div id="element"></div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
Place the following Spreadsheet code in the index.js
.
//Initialize the Spreadsheet control
var spreadsheet = new ej.spreadsheet.Spreadsheet();
//Render the initialized Spreadsheet
spreadsheet.appendTo('#element');
Now, run the index.html
in web browser, it will render the Essential JS 2 Spreadsheet control.
Output will be displayed as follows.
// Initialize the Spreadsheet componenet.
var spreadsheet = new ej.spreadsheet.Spreadsheet({});
// Render initialized Spreadsheet.
spreadsheet.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Spreadsheet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Spreadsheet Control">
<meta name="author" content="Syncfusion">
<link rel="shortcut icon" href="resources/favicon.ico">
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!--Element which is going to render-->
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>