From 87c05ec0f35e7d5563568697c4f9cef7018bf38b Mon Sep 17 00:00:00 2001 From: EswaranSuyamprakasam Date: Fri, 24 Apr 2026 14:42:28 +0530 Subject: [PATCH 1/4] 1013149: Modified the getting started content --- .../Javascript-ES5/getting-started.md | 349 +++++++----------- .../Javascript-ES6/getting-started.md | 76 ++-- 2 files changed, 153 insertions(+), 272 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index 9cb6496631..54502082a6 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -11,252 +11,161 @@ documentation: ug 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. ## Run the application diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index dafb0127cc..e930e0a4f0 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -13,63 +13,41 @@ This section explains the steps to create a simple Spreadsheet component using E > 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. + ## 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. From e2130e0a79c4794965c3c1d3ad08457d0830208c Mon Sep 17 00:00:00 2001 From: EswaranSuyamprakasam Date: Fri, 24 Apr 2026 14:59:36 +0530 Subject: [PATCH 2/4] 1013149: Modified the content of getting started --- .../Excel/Spreadsheet/getting-started-es5.md | 192 ++++++++++++++++++ .../Excel/Spreadsheet/getting-started-es6.md | 130 ++++++++++++ 2 files changed, 322 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/getting-started-es5.md create mode 100644 Document-Processing/Excel/Spreadsheet/getting-started-es6.md diff --git a/Document-Processing/Excel/Spreadsheet/getting-started-es5.md b/Document-Processing/Excel/Spreadsheet/getting-started-es5.md new file mode 100644 index 0000000000..54502082a6 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/getting-started-es5.md @@ -0,0 +1,192 @@ +--- +layout: post +title: Getting started with EJ2 Javascript Spreadsheet control | Syncfusion +description: Checkout and learn about Getting started with EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Getting started +documentation: ug +--- + +# Getting started in EJ2 Javascript Spreadsheet control + +This section explains the steps to create a simple Essential® JS 2 Spreadsheet control in a JavaScript application. + +## Prerequisites + +To get started, ensure the following software is installed on your machine: + +- [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. + +## Create the JavaScript application + +Create a simple JavaScript application to render the Spreadsheet control. + +**Step 1:** Create a root folder named `myapp`. + +**Step 2:** Inside the `myapp` folder, create the following files: + +- `index.html` +- `index.js` + +## Add Syncfusion Spreadsheet resources + +Add the required Syncfusion Essential® JS 2 Spreadsheet theme style and script references to the `index.html` file before rendering the Spreadsheet control. + +You can access Syncfusion® Spreadsheet control resources using either of the following methods: + +- **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. + + Your application structure should look like this: + + ```text + myapp/ + ├── index.html + ├── index.js + └── resources/ + ``` + +- **Using CDN link for scripts and styles** – Reference the scripts and styles directly from the CDN. + +{% tabs %} +{% highlight html tabtitle="Local script and style" %} + +... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +... + +{% endhighlight %} +{% highlight html tabtitle="CDN link for script and style" %} + +... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +... +{% endhighlight %} +{% endtabs %} + +## Add the Syncfusion® Spreadsheet component to the application + +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. + +Add the following markup inside the `` element of the `index.html` file. + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + + + Essential JS 2 Spreadsheet + + + + +
+ + + + +{% endhighlight %} +{% highlight js tabtitle="index.js" %} + +// Initialize the Spreadsheet control +var spreadsheet = new ej.spreadsheet.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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. + +## Run the application + +Now, run the `index.html` in web browser, it will render the Essential® JS 2 Spreadsheet control. + +Output will be displayed as follows. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% 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 + +* [Data Binding](./data-binding) +* [Open and Save](./open-save) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/getting-started-es6.md b/Document-Processing/Excel/Spreadsheet/getting-started-es6.md new file mode 100644 index 0000000000..e930e0a4f0 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/getting-started-es6.md @@ -0,0 +1,130 @@ +--- +layout: post +title: Getting started with EJ2 TypeScript Spreadsheet control | Syncfusion +description: Checkout and learn about Getting started with EJ2 TypeScript Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Getting started +documentation: ug +--- + +# Getting started in 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/). + +## Prerequisites + +To get started, ensure the following software is installed on your machine: + +- [Visual Studio Code](https://code.visualstudio.com/) +- Node `v14.15.0` or higher + +## Create the TypeScript application + +Create a simple TypeScript application using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. + +**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 +``` + +**Step 2:** Navigate to the `ej2-quickstart` folder. + +```bash +cd ej2-quickstart +``` + +**Step 3:** Install the dependent npm packages. + +```bash +npm install +``` + +## Add CSS references + +The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight css tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2/material.css"; + +{% endhighlight %} +{% endtabs %} + +> 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 the Syncfusion® Spreadsheet Editor component to the application + +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" %} + + + + + Essential JS 2 + + + + + + + + + +
+ + + +{% endhighlight %} +{% highlight ts tabtitle="index.ts" %} + +import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; + +// Initialize Spreadsheet component +let spreadsheet: Spreadsheet = new Spreadsheet(); + +// Render 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. + +## 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. + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npm start + +{% endhighlight %} +{% endtabs %} + +The following example shows a basic Spreadsheet component. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% 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 + +* [Data Binding](./data-binding) +* [Open and Save](./open-save) \ No newline at end of file From b91eec87e83bbc7df36776a9e778e41fbb0f24e6 Mon Sep 17 00:00:00 2001 From: EswaranSuyamprakasam Date: Fri, 24 Apr 2026 16:46:30 +0530 Subject: [PATCH 3/4] 1013149: Corrected the changes in title and removed note --- .../Excel/Spreadsheet/Javascript-ES5/getting-started.md | 5 ++--- .../Excel/Spreadsheet/Javascript-ES6/getting-started.md | 5 ++--- .../spreadsheet/es5-getting-started-cs1/index.js | 7 +++++-- .../spreadsheet/es5-getting-started-cs1/index.ts | 7 +++++-- .../spreadsheet/getting-started-cs1/index.js | 7 +++++-- .../spreadsheet/getting-started-cs1/index.ts | 5 ++++- .../spreadsheet/es5-getting-started-cs1/index.js | 7 +++++-- .../spreadsheet/es5-getting-started-cs1/index.ts | 7 +++++-- .../spreadsheet/getting-started-cs1/index.js | 7 +++++-- .../spreadsheet/getting-started-cs1/index.ts | 5 ++++- 10 files changed, 42 insertions(+), 20 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index 54502082a6..ed8d2dfb96 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -7,7 +7,7 @@ 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. @@ -165,7 +165,7 @@ 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. +> **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 @@ -184,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 e930e0a4f0..531bd27208 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -7,7 +7,7 @@ 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. @@ -95,7 +95,7 @@ spreadsheet.appendTo('#element'); {% 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. +> **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 @@ -122,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'); From 60930c10d5b232b73cc7c1edc9bbb67bd5b848dd Mon Sep 17 00:00:00 2001 From: EswaranSuyamprakasam Date: Fri, 24 Apr 2026 17:05:38 +0530 Subject: [PATCH 4/4] 1013149: Removed the duplicate files --- .../Excel/Spreadsheet/getting-started-es5.md | 192 ------------------ .../Excel/Spreadsheet/getting-started-es6.md | 130 ------------ 2 files changed, 322 deletions(-) delete mode 100644 Document-Processing/Excel/Spreadsheet/getting-started-es5.md delete mode 100644 Document-Processing/Excel/Spreadsheet/getting-started-es6.md diff --git a/Document-Processing/Excel/Spreadsheet/getting-started-es5.md b/Document-Processing/Excel/Spreadsheet/getting-started-es5.md deleted file mode 100644 index 54502082a6..0000000000 --- a/Document-Processing/Excel/Spreadsheet/getting-started-es5.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -layout: post -title: Getting started with EJ2 Javascript Spreadsheet control | Syncfusion -description: Checkout and learn about Getting started with EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more details. -platform: document-processing -control: Getting started -documentation: ug ---- - -# Getting started in EJ2 Javascript Spreadsheet control - -This section explains the steps to create a simple Essential® JS 2 Spreadsheet control in a JavaScript application. - -## Prerequisites - -To get started, ensure the following software is installed on your machine: - -- [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. - -## Create the JavaScript application - -Create a simple JavaScript application to render the Spreadsheet control. - -**Step 1:** Create a root folder named `myapp`. - -**Step 2:** Inside the `myapp` folder, create the following files: - -- `index.html` -- `index.js` - -## Add Syncfusion Spreadsheet resources - -Add the required Syncfusion Essential® JS 2 Spreadsheet theme style and script references to the `index.html` file before rendering the Spreadsheet control. - -You can access Syncfusion® Spreadsheet control resources using either of the following methods: - -- **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. - - Your application structure should look like this: - - ```text - myapp/ - ├── index.html - ├── index.js - └── resources/ - ``` - -- **Using CDN link for scripts and styles** – Reference the scripts and styles directly from the CDN. - -{% tabs %} -{% highlight html tabtitle="Local script and style" %} - -... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -... - -{% endhighlight %} -{% highlight html tabtitle="CDN link for script and style" %} - -... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -... -{% endhighlight %} -{% endtabs %} - -## Add the Syncfusion® Spreadsheet component to the application - -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. - -Add the following markup inside the `` element of the `index.html` file. - -{% tabs %} -{% highlight html tabtitle="index.html" %} - - - - - Essential JS 2 Spreadsheet - - - - -
- - - - -{% endhighlight %} -{% highlight js tabtitle="index.js" %} - -// Initialize the Spreadsheet control -var spreadsheet = new ej.spreadsheet.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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. - -## Run the application - -Now, run the `index.html` in web browser, it will render the Essential® JS 2 Spreadsheet control. - -Output will be displayed as follows. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% 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 - -* [Data Binding](./data-binding) -* [Open and Save](./open-save) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/getting-started-es6.md b/Document-Processing/Excel/Spreadsheet/getting-started-es6.md deleted file mode 100644 index e930e0a4f0..0000000000 --- a/Document-Processing/Excel/Spreadsheet/getting-started-es6.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -layout: post -title: Getting started with EJ2 TypeScript Spreadsheet control | Syncfusion -description: Checkout and learn about Getting started with EJ2 TypeScript Spreadsheet control of Syncfusion Essential JS 2 and more details. -platform: document-processing -control: Getting started -documentation: ug ---- - -# Getting started in 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/). - -## Prerequisites - -To get started, ensure the following software is installed on your machine: - -- [Visual Studio Code](https://code.visualstudio.com/) -- Node `v14.15.0` or higher - -## Create the TypeScript application - -Create a simple TypeScript application using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. - -**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 -``` - -**Step 2:** Navigate to the `ej2-quickstart` folder. - -```bash -cd ej2-quickstart -``` - -**Step 3:** Install the dependent npm packages. - -```bash -npm install -``` - -## Add CSS references - -The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: - -{% tabs %} -{% highlight css tabtitle="styles.css" %} - -@import "../../node_modules/@syncfusion/ej2/material.css"; - -{% endhighlight %} -{% endtabs %} - -> 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 the Syncfusion® Spreadsheet Editor component to the application - -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" %} - - - - - Essential JS 2 - - - - - - - - - -
- - - -{% endhighlight %} -{% highlight ts tabtitle="index.ts" %} - -import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; - -// Initialize Spreadsheet component -let spreadsheet: Spreadsheet = new Spreadsheet(); - -// Render 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 [blog](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) post. - -## 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. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Spreadsheet component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% 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 - -* [Data Binding](./data-binding) -* [Open and Save](./open-save) \ No newline at end of file