diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index 9cb6496631..ed8d2dfb96 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -7,256 +7,165 @@ control: Getting started documentation: ug --- -# Getting started in EJ2 Javascript Spreadsheet control +# Getting Started with EJ2 Javascript Spreadsheet control This section explains the steps to create a simple Essential® JS 2 Spreadsheet control in a JavaScript application. -## Dependencies +## Prerequisites -The following list of dependencies is required to use the Spreadsheet control in your application: +To get started, ensure the following software is installed on your machine: -```js -|-- @syncfusion/ej2-spreadsheet - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-grids +- [Visual Studio Code](https://code.visualstudio.com/) +- [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) -``` +> **Note:** If you are using Syncfusion® CDN resources to build your web application, you can skip the Essential Studio® JavaScript prerequisite. -## Setup for local development +## Create the JavaScript application -Refer to the following steps to setup your local environment. +Create a simple JavaScript application to render the Spreadsheet control. -**Step 1:** Create a root folder `myapp` for your application. +**Step 1:** Create a root folder named `myapp`. -**Step 2:** Create `myapp/resources` folder to store local scripts and styles files. +**Step 2:** Inside the `myapp` folder, create the following files: -**Step 3:** Create `myapp/index.js` and `myapp/index.html` files for initializing Essential® JS 2 Spreadsheet control. +- `index.html` +- `index.js` -## Adding Syncfusion® resources +## Add Syncfusion Spreadsheet resources -The Essential® JS 2 Spreadsheet control can be initialized by using any of the following two ways: +Add the required Syncfusion Essential® JS 2 Spreadsheet theme style and script references to the `index.html` file before rendering the Spreadsheet control. -* Using local script and style. -* Using CDN link for script and style. +You can access Syncfusion® Spreadsheet control resources using either of the following methods: -### Using local script and style +- **Using local scripts and styles** – Copy the required scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build to the `resources` folder in your application. -You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. + Your application structure should look like this: -After installing the Essential® JS 2 product build, you can copy the Spreadsheet and its dependencies scripts and style file into the resources folder. + ```text + myapp/ + ├── index.html + ├── index.js + └── resources/ + ``` -Refer to the following code to find Spreadsheet's script and style file location. +- **Using CDN link for scripts and styles** – Reference the scripts and styles directly from the CDN. -**Syntax:** +{% tabs %} +{% highlight html tabtitle="Local script and style" %} + +... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +... -> Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript-EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> -> Styles: `**(installed location)**/Syncfusion/Essential Studio/JavaScript-EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/styles/material.css` +{% endhighlight %} +{% highlight html tabtitle="CDN link for script and style" %} + +... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +... +{% endhighlight %} +{% endtabs %} -**Example:** +## Add the Syncfusion® Spreadsheet component to the application -> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript-EJ2/23.1.36/Web(Essential JS 2)/JavaScript/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js` -> -> Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript-EJ2/23.1.36/Web(Essential JS 2)/JavaScript/ej2-spreadsheet/styles/material.css` +After adding the required style references, add a container element for the Spreadsheet control in the `index.html` file and then initialize the control in the `index.js` file. -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. +Add the following markup inside the `` element of the `index.html` file. + +{% tabs %} +{% highlight html tabtitle="index.html" %} -```html - - - - Essential JS 2 Spreadsheet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -### Using CDN link for script and style - -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/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> -> Styles: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/styles/material.css` - -**Example:** - -> Script: [`http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js`](http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js) -> -> Styles: [`http://cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css) - -The following HTML code example shows the minimal dependency of Spreadsheet. - -```html - - - - Essential JS 2 Spreadsheet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -## Add Spreadsheet control - -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. - -```html - - - Essential JS 2 Spreadsheet - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -``` - -Place the following Spreadsheet code in the `index.js`. - -```javascript - -//Initialize the Spreadsheet control + + + Essential JS 2 Spreadsheet + + + + +
+ + + + +{% endhighlight %} +{% highlight js tabtitle="index.js" %} + +// Initialize the Spreadsheet control var spreadsheet = new ej.spreadsheet.Spreadsheet(); -//Render the initialized Spreadsheet +// Render the initialized Spreadsheet spreadsheet.appendTo('#element'); -``` +{% endhighlight %} +{% endtabs %} + +> **Note:** The [openUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#openurl) and [saveUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveurl) properties are used to connect the Spreadsheet control to a server-side service for Excel import and export operations. For development and production use, we recommend configuring your own local or hosted service instead of relying on demo endpoints. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). ## Run the application @@ -275,7 +184,6 @@ Output will be displayed as follows. {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1" %} -> You can refer to our [JavaScript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/javascript-es5/#/tailwind3/spreadsheet/default.html) to knows how present and manipulate data, including editing, formulas, formatting, importing, and exporting. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index dafb0127cc..531bd27208 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -7,69 +7,47 @@ control: Getting started documentation: ug --- -# Getting started in EJ2 TypeScript Spreadsheet control +# Getting Started with EJ2 TypeScript Spreadsheet control This section explains the steps to create a simple Spreadsheet component using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Spreadsheet component in your application: +To get started, ensure the following software is installed on your machine: -```js -|-- @syncfusion/ej2-spreadsheet - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-grids +- [Visual Studio Code](https://code.visualstudio.com/) +- Node `v14.15.0` or higher -``` - -## Set up development environment +## Create the TypeScript application -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Create a simple TypeScript application using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -{% tabs %} -{% highlight bash tabtitle="CMD" %} +**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub. +```bash git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +**Step 2:** Navigate to the `ej2-quickstart` folder. +```bash cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +**Step 3:** Install the dependent npm packages. +```bash npm install +``` -{% endhighlight %} -{% endtabs %} - -## Import the Syncfusion® CSS styles - -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +## Add CSS references -The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: +The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight css tabtitle="styles.css" %} @import "../../node_modules/@syncfusion/ej2/material.css"; @@ -78,11 +56,9 @@ The quickstart application is preconfigured to use the `Material` theme in the ` > You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section to know more about built-in themes and CSS reference for individual controls. -## Add Spreadsheet component - -Add the HTML `div` element with ID attribute as `element` in your `index.html` file. +## Add the Syncfusion® Spreadsheet Editor component to the application -`[src/index.html]` +Add the HTML `div` element with ID attribute as `element` in your `index.html` file, and initialize the Spreadsheet control in `app.ts`. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -105,14 +81,7 @@ Add the HTML `div` element with ID attribute as `element` in your `index.html` f {% endhighlight %} -{% endtabs %} - -Now, import the Spreadsheet component into your `app.ts` to instantiate a spreadsheet and append the spreadsheet instance to the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +{% highlight ts tabtitle="index.ts" %} import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; @@ -125,6 +94,9 @@ spreadsheet.appendTo('#element'); {% endhighlight %} {% endtabs %} + +> **Note:** The [openUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#openurl) and [saveUrl](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveurl) properties are used to connect the Spreadsheet control to a server-side service for Excel import and export operations. For development and production use, we recommend configuring your own local or hosted service instead of relying on demo endpoints. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). + ## Run the application The `quickstart` project is configured to compile and run the application in the browser. Use the following command to run the application. @@ -150,7 +122,6 @@ The following example shows a basic Spreadsheet component. {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1" %} -> You can refer to our [JavaScript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/javascript/#/tailwind3/spreadsheet/default.html) that shows you how present and manipulate data, including editing, formulas, formatting, importing, and exporting. ## See Also diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js index 0ff45051ae..10fe25f869 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js @@ -1,5 +1,8 @@ -// Initialize the Spreadsheet componenet. -var spreadsheet = new ej.spreadsheet.Spreadsheet({}); +// Initialize the Spreadsheet component +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet. spreadsheet.appendTo('#element'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.ts index 1f0858fd66..27b7a2329a 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.ts +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.ts @@ -2,8 +2,11 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; -// Initialize the Spreadsheet control -let spreadsheet: Spreadsheet = new Spreadsheet(); +// Initialize the Spreadsheet component +let spreadsheet: Spreadsheet = new Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet spreadsheet.appendTo('#element'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.js index 0ff45051ae..10fe25f869 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.js @@ -1,5 +1,8 @@ -// Initialize the Spreadsheet componenet. -var spreadsheet = new ej.spreadsheet.Spreadsheet({}); +// Initialize the Spreadsheet component +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet. spreadsheet.appendTo('#element'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.ts index 8bdfd9e07d..27b7a2329a 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.ts +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/getting-started-cs1/index.ts @@ -3,7 +3,10 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; // Initialize the Spreadsheet component -let spreadsheet: Spreadsheet = new Spreadsheet(); +let spreadsheet: Spreadsheet = new Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet spreadsheet.appendTo('#element'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.js index 0ff45051ae..10fe25f869 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.js @@ -1,5 +1,8 @@ -// Initialize the Spreadsheet componenet. -var spreadsheet = new ej.spreadsheet.Spreadsheet({}); +// Initialize the Spreadsheet component +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet. spreadsheet.appendTo('#element'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.ts index 1f0858fd66..27b7a2329a 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.ts +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/es5-getting-started-cs1/index.ts @@ -2,8 +2,11 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; -// Initialize the Spreadsheet control -let spreadsheet: Spreadsheet = new Spreadsheet(); +// Initialize the Spreadsheet component +let spreadsheet: Spreadsheet = new Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet spreadsheet.appendTo('#element'); diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.js index 0ff45051ae..10fe25f869 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.js +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.js @@ -1,5 +1,8 @@ -// Initialize the Spreadsheet componenet. -var spreadsheet = new ej.spreadsheet.Spreadsheet({}); +// Initialize the Spreadsheet component +var spreadsheet = new ej.spreadsheet.Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet. spreadsheet.appendTo('#element'); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts index 8bdfd9e07d..27b7a2329a 100644 --- a/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts +++ b/Document-Processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts @@ -3,7 +3,10 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; // Initialize the Spreadsheet component -let spreadsheet: Spreadsheet = new Spreadsheet(); +let spreadsheet: Spreadsheet = new Spreadsheet({ + openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open', + saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +}); // Render initialized Spreadsheet spreadsheet.appendTo('#element');