diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md
index e8d7fdf6ba..b8c793514b 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md
@@ -66,7 +66,7 @@ Add the stylesheet and script references to the `` section of the `~/Pages
N> To learn other ways to load themes or scripts (such as NPM packages or [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)), see the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) and [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) documentation.
## Register Syncfusion® Script Manager
-Register the script manager `` at the end of the `` element in the ASP.NET Core application, as shown in the following example.
+Register the script manager `` at the end of the `` element in the ASP.NET Core application, as shown in the following example.
{% tabs %}
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -94,7 +94,7 @@ Add the Syncfusion® ASP.NET Core Spreadshee
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core Spreadsheet control will be rendered in the default web browser.
-
+
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/Spreadsheet/ASP.NET%20Core%20Tag%20Helper%20Examples).
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG
index 354af75d2a..c885b458c3 100644
Binary files a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md
index 15f900e1a9..244f4b9f3f 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the EJ2 ASP.NET Core Syncfusion Spreadsheet Component
-description: Learn here all about Overview of the Syncfusion EJ2 ASP.NET CORE Spreadsheet component of Syncfusion Essential JS 2 and more.
+title: Overview of the ASP.NET Core Spreadsheet Control | Syncfusion
+description: Learn here all about Overview of the Syncfusion EJ2 ASP.NET CORE Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the EJ2 ASP.NET CORE Spreadsheet control
+# Overview of the ASP.NET Core Spreadsheet Control
-The Spreadsheet is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md
index 2749a0c9c2..92c1826a41 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md
@@ -18,12 +18,14 @@ This section briefly explains about how to include [Syncfusion® ASP.NET MVC package in the application
Open the NuGet package manager UI in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and then install it. Alternatively, you can utilize the following package manager command to achieve the same.
+> Make sure that the `Microsoft.AspNet.Mvc` package and its dependency packages are updated to the latest version.
+
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -36,10 +38,12 @@ N> Syncfusion® ASP.NET MVC controls are ava
## Add namespace
-Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
+Add **Syncfusion.EJ2** namespace reference in `~/Views/Web.config` file, as shown in the following example.
```
+...
+ ...
```
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet.PNG b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet.PNG
index 354af75d2a..c885b458c3 100644
Binary files a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet.PNG and b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/images/spreadsheet.PNG differ
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md
index bc14b939ed..95c3742236 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the EJ2 ASP.NET MVC Syncfusion Spreadsheet Component
-description: Learn here all about Overview of the Syncfusion EJ2 ASP.NET MVC Spreadsheet component of Syncfusion Essential JS 2 and more.
+title: Overview of the ASP.NET MVC Spreadsheet Control | Syncfusion
+description: Learn here all about Overview of the Syncfusion EJ2 ASP.NET MVC Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the EJ2 ASP.NET MVC Spreadsheet control
+# Overview of the ASP.NET MVC Spreadsheet Control
-The Spreadsheet is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [ASP.NET MVC Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-mvc-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
index 01f99eb911..cc38385167 100644
--- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
@@ -32,6 +32,8 @@ ng new spreadsheet-app
cd spreadsheet-app
```
+> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
+
## Install the Syncfusion® Angular Spreadsheet package
The [Angular Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet) package uses the [Ivy](https://docs.angular.lat/guide/ivy) library distribution [format](https://angular.dev/tools/libraries/angular-package-format) and is compatible with `Angular 12` and above. Use the following command to install the package:
@@ -48,7 +50,7 @@ npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save
## Add CSS references
-Add the following style references to the `[src/styles.css]` file.
+Add the following Spreadsheet and dependent component style references to the `[src/styles.css]` file.
```css
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@@ -59,8 +61,8 @@ Add the following style references to the `[src/styles.css]` file.
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css';
```
> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
@@ -71,11 +73,16 @@ Now, import the required Spreadsheet module into your application file and rende
{% tabs %}
{% highlight ts tabtitle="app.ts" %}
-{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/app.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/spreadsheet/angular/spreadsheet-cs1/src/main.ts %}
+import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
+import { Component } from '@angular/core';
+
+@Component({
+ imports: [SpreadsheetAllModule],
+ standalone: true,
+ selector: 'app-root',
+ template: ''
+})
+export class App { }
{% endhighlight %}
{% endtabs %}
@@ -89,12 +96,15 @@ Run the following command to start the development server:
ng serve
```
-After the application starts, open the local URL shown in the terminal to view the Angular Spreadsheet component in the browser.
+After the application starts, open the localhost URL shown in the terminal to view the Angular Spreadsheet component in the browser. The output will appear as follows:
+
-Use the following live preview to explore the Spreadsheet component.
+You can also explore the Spreadsheet interactively using the live sample below.
{% previewsample "/document-processing/samples/spreadsheet/angular/spreadsheet-cs1" %}
+> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-angular-spreadsheet-component).
+
## Video tutorial
To get started quickly with Angular Spreadsheet, you can watch this video:
diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/Angular/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet.png b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Angular/images/spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Angular/overview.md b/Document-Processing/Excel/Spreadsheet/Angular/overview.md
index 9b1105e30c..8654407dbf 100644
--- a/Document-Processing/Excel/Spreadsheet/Angular/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/Angular/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the Angular Spreadsheet component | Syncfusion
+title: Overview of the Angular Spreadsheet Component| Syncfusion
description: Learn here all about overview of the Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the Angular Spreadsheet component
+# Overview of the Angular Spreadsheet Component
-The Angular Spreadsheet is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md
index 0dc6afd6e6..b68372b74d 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md
@@ -31,45 +31,58 @@ Add the required Syncfusion® Spreadsheet style and script references to the `in
{% tabcontent Using Local Resources %}
-Create a `resources` folder under `spreadsheet-app`, and then copy the required script and style files from the [Spreadsheet Editor SDK](https://www.syncfusion.com/account/manage-trials/start-trials) build into it.
+To use local scripts and styles for the Syncfusion® Spreadsheet, follow these steps:
+
+1. Download and install the [Spreadsheet Editor SDK](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+2. Create a `resources` folder in your application (for example, `spreadsheet-app/resources`).
+
+3. From the installed SDK location, copy the required packages from the following folder into the `resources` folder:
+
+```
+/Syncfusion/Essential Studio/Spreadsheet Editor SDK/{VERSION}/Web (Essential JS 2)/JavaScript
+```
+
+4. After copying the files, add the Spreadsheet and its dependent control style and script references inside the `` section of your `index.html` file, as shown below.
{% tabs %}
{% highlight html tabtitle="index.html" %}
...
+...
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
...
@@ -92,6 +105,7 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM
...
+...
@@ -126,6 +140,7 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM
...
+
{% endhighlight %}
{% endtabs %}
@@ -174,9 +189,11 @@ spreadsheet.appendTo('#element');
## Run the application
-Now, open the `index.html` file in a web browser to render the JavaScript Spreadsheet editor.
+Open the `index.html` file in a web browser to launch the JavaScript Spreadsheet editor. The image below shows how the spreadsheet is rendered in the browser:
+
+
-Use the following live preview to explore the Spreadsheet control.
+You can also explore the Spreadsheet interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/spreadsheet/es5-getting-started-cs1" %}
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/images/spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md
index f3b776d37f..84362ac0d2 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the EJ2 Javascript Spreadsheet control | Syncfusion
+title: Overview of the JavaScript (ES5) Spreadsheet Control | Syncfusion
description: Learn here all about Overview of the Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the EJ2 Javascript Spreadsheet control
+# Overview of the JavaScript (ES5) Spreadsheet Control
-The Spreadsheet is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Javascript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md
index 52c0bfead7..1a79bf1c9f 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md
@@ -54,7 +54,7 @@ npm install
## Add CSS references
-Add the following style references to the file.
+Add the following Spreadsheet and dependent component style references.
{% tabs %}
{% highlight css tabtitle="~/src/styles/styles.css" %}
@@ -77,7 +77,7 @@ Add the following style references to the file.
## Add the Syncfusion® Spreadsheet control to the application
-Add a container element for the Spreadsheet control in the `index.html` file and then initialize the control in the `index.ts` file.
+Add a container element for the Spreadsheet control in the `index.html` file and then initialize the control in the `app.ts` file.
{% tabs %}
{% highlight html tabtitle="index.html" %}
@@ -100,7 +100,7 @@ Add a container element for the Spreadsheet control in the `index.html` file and
{% endhighlight %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.ts" %}
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
@@ -130,10 +130,16 @@ npm start
{% endhighlight %}
{% endtabs %}
-Use the following live preview to explore the Spreadsheet control.
+The image below shows how the spreadsheet is rendered in the browser:
+
+
+
+You can also explore the Spreadsheet interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/spreadsheet/getting-started-cs1" %}
+> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-spreadsheet-control).
+
## See also
* [Data Binding](./data-binding)
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet.png b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/images/spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md
index fa815780bd..42f6d0548e 100644
--- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the EJ2 TypeScript Spreadsheet control | Syncfusion
+title: Overview of the JavaScript (ES6) Spreadsheet Control | Syncfusion
description: Learn here all about Overview of the Syncfusion EJ2 TypeScript Spreadsheet control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the EJ2 TypeScript Spreadsheet control
+# Overview of the JavaScript (ES6) Spreadsheet Control
-The Spreadsheet is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [JavaScript Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md
new file mode 100644
index 0000000000..98edae5358
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/agentic-builder.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: React Spreadsheet getting started with Agentic UI Builder | Syncfusion
+description: Checkout and learn about how to use React Spreadsheet component of Syncfusion Essential JS 2 with Agentic UI Builder.
+control: Spreadsheet
+platform: document-processing
+documentation: ug
+---
+
+# Create a React Spreadsheet Application with Agentic UI Builder
+
+This guide shows you how to create a Syncfusion® React Spreadsheet component simply by typing what you want using natural language commands — with the [**Syncfusion® React Agentic UI Builder**](https://www.syncfusion.com/explore/mcp-servers/) (powered by Syncfusion's MCP Server). Just describe it, and the tool builds the complete implementation of the spreadsheet component for you.
+
+### Prerequisite
+- Make sure the **React Agentic UI Builder** is installed in your IDE. Refer to the official [Getting Started](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started) and [installation guide](https://ej2.syncfusion.com/react/documentation/mcp-server/installation).
+- Ensure you have a [React project](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) set up (JavaScript or TypeScript, any supported version) before using the Agentic UI Builder.
+
+### Usage
+
+Once installed, open your React project in your preferred IDE, launch the AI assistant, and describe what you want to build using the ```#sf_react_ui_builder``` command, as shown below:
+
+**Example:**
+
+```
+#sf_react_ui_builder Create an empty React Spreadsheet using the Bootstrap 5 theme. Install the required packages, import the theme CSS in the correct order, and initialize the spreadsheet.
+```
+
+The UI Builder delivers full implementations, covering layout, components, and styling. The following illustration shows the generated output:
+
+
+
+### Individual Tools
+
+You can directly invoke individual tools by name for more targeted assistance (especially useful for specialized tasks). In addition to the main UI Builder, tools like layout, style, and component are available. For more details, see the [individual tools documentation](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/getting-started#individual-tools).
+
+### Tips & Best Practices
+
+- Enable **Agent mode** in your IDE for smooth, multi-step execution with confirmation prompts.
+- Use higher-capability models (**Claude Sonnet 4.5 or newer, GPT-5**) as they typically produce more accurate, higher-quality code.
+- If a step times out or becomes unresponsive, cancel it and retry the current step.
+- Always review the generated code and commands before accepting or applying them in production.
+
+### See also
+
+- To explore customization options for layouts, components, styles, and more examples of effective prompts, refer to the [prompt Library](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/prompt-library).
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
index f12c59175a..c102f627b0 100644
--- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with React Spreadsheet component | Syncfusion
-description: Checkout and learn about getting started with the Syncfusion React Spreadsheet component in the Spreadsheet Editor SDK and more details.
+description: Checkout and learn about Getting started with React Spreadsheet component of Syncfusion Essential JS 2 and more details.
control: Getting started
platform: document-processing
documentation: ug
@@ -46,7 +46,7 @@ npm install @syncfusion/ej2-react-spreadsheet --save
## Add CSS references
-Add the following style references to the `src/App.css` file.
+Add the following Spreadsheet and dependent component style references to the `src/index.css` file.
```css
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@@ -61,18 +61,34 @@ Add the following style references to the `src/App.css` file.
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css';
```
-> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a React project.
-
## Add the Syncfusion® React Spreadsheet component to the application
Now, import the `SpreadsheetComponent` into your `src/App.jsx` or `src/App.tsx` file and render it.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx %}
+{% raw %}
+
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+export default function App() {
+ return ();
+}
+
+{% endraw %}
{% endhighlight %}
{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx %}
+{% raw %}
+
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+export default function App() {
+ return ();
+}
+
+{% endraw %}
{% endhighlight %}
{% endtabs %}
@@ -86,12 +102,16 @@ Run the following command to start the development server:
npm run dev
```
-After the application starts, open the local URL shown in the terminal to view the React Spreadsheet Editor in the browser.
+After the application starts, open the localhost URL shown in the terminal to view the React Spreadsheet Editor in the browser. The output will appear as follows:
-Use the following live preview to explore the Spreadsheet component.
+
+
+You can also explore the Spreadsheet interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/spreadsheet/react/getting-started-cs1" %}
+> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-react-spreadsheet-component) to explore the complete source code. You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-components/react-spreadsheet) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/react/#/tailwind3/spreadsheet/default) that shows you how to present and manipulate data.
+
## Video tutorial
To get started quickly with React Spreadsheet, you can watch this video:
@@ -103,4 +123,4 @@ To get started quickly with React Spreadsheet, you can watch this video:
* [Data Binding](./data-binding)
* [Open Excel files](./open-excel-files)
* [Save Excel files](./save-excel-files)
-* [Web Services](./web-services/webservice-overview)
+* [Web Services](./web-services/webservice-overview)
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/agentic-builder-output.png b/Document-Processing/Excel/Spreadsheet/React/images/agentic-builder-output.png
new file mode 100644
index 0000000000..e2c8a30d84
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/agentic-builder-output.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/React/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet.png b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/React/overview.md b/Document-Processing/Excel/Spreadsheet/React/overview.md
index 16e8270c15..791d7bb02f 100644
--- a/Document-Processing/Excel/Spreadsheet/React/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/React/overview.md
@@ -11,6 +11,8 @@ documentation: ug
The React Spreadsheet is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
* [Data sources](data-binding): Bind the Spreadsheet component with an array of objects or data from a web service using `DataManager`.
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md
index 26157cc15c..80c9b35fc8 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with the Vue Spreadsheet Component in Vue 2
-This article provides a step-by-step guide for setting up a Vue 2 project and integrating the Syncfusion® Vue Spreadsheet component using the Composition API or Options API.
+This article provides a step-by-step guide for setting up a Vue 2 project and integrating the Syncfusion® Vue Spreadsheet component.
## Prerequisites
@@ -44,7 +44,7 @@ npm install @syncfusion/ej2-vue-spreadsheet --save
## Add CSS references
-Add the following style references.
+Add the following Spreadsheet and dependent component style references.
{% tabs %}
{% highlight html tabtitle="~/src/App.vue" %}
@@ -68,27 +68,10 @@ Add the following style references.
## Add the Syncfusion® Vue Spreadsheet component to the application
-Import and register the Spreadsheet component directives in the `script` section of **src/App.vue**. If you use the `Composition API`, add the `setup` attribute to the `script` tag. Then, define the component in the `template` section.
+Import and register the Spreadsheet component directives in the `script` section of **src/App.vue**. Then, define the component in the `template` section.
{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% raw %}
-
-
-
-
-
-
-
-{% endraw %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% raw %}
+{% highlight html tabtitle="~/src/App.vue" %}
@@ -111,7 +94,6 @@ export default {
}
-{% endraw %}
{% endhighlight %}
{% endtabs %}
@@ -125,9 +107,11 @@ Run the following command to start the application:
npm run serve
```
-After the application starts, open the local URL shown in the terminal to view the Vue Spreadsheet Editor in the browser.
+After the application starts, open the localhost URL shown in the terminal to view the Vue Spreadsheet Editor in the browser. The output will appear as follows:
+
+
-Use the following live preview to explore the Spreadsheet component.
+You can also explore the Spreadsheet interactively using the live sample below.
{% previewsample "/document-processing/code-snippet/spreadsheet/vue/getting-started-cs1" %}
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/Vue3-spreadsheet-demo.png b/Document-Processing/Excel/Spreadsheet/Vue/images/Vue3-spreadsheet-demo.png
deleted file mode 100644
index 0b5e934668..0000000000
Binary files a/Document-Processing/Excel/Spreadsheet/Vue/images/Vue3-spreadsheet-demo.png and /dev/null differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/Vue/images/overview-banner.png
new file mode 100644
index 0000000000..458f1816f3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/overview-banner.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet.png b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/images/vue3-spreadsheet.png b/Document-Processing/Excel/Spreadsheet/Vue/images/vue3-spreadsheet.png
new file mode 100644
index 0000000000..c885b458c3
Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/Vue/images/vue3-spreadsheet.png differ
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/overview.md b/Document-Processing/Excel/Spreadsheet/Vue/overview.md
index 2e26a72766..cd084c54e5 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/overview.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/overview.md
@@ -1,15 +1,17 @@
---
layout: post
-title: Overview of the Vue Spreadsheet component | Syncfusion
+title: Overview of the Vue Spreadsheet Component | Syncfusion
description: Learn here all about overview of the Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Index
documentation: ug
---
-# Overview of the Vue Spreadsheet component
+# Overview of the Vue Spreadsheet Component
-The Vue Spreadsheet is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Vue Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+
+
## Key features
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md
index 2b9d85b45e..cfa1be6996 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md
@@ -34,12 +34,12 @@ npm install @syncfusion/ej2-vue-spreadsheet --save
## Add CSS references
-Add the following style references.
+Add the following Spreadsheet and dependent component style references.
{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
+{% highlight html tabtitle="~/src/style.css" %}
-
+```
{% endhighlight %}
{% endtabs %}
@@ -65,35 +65,15 @@ Import and register the Spreadsheet component directives in the `script` section
{% raw %}
-
-
-
-
-
-
-
-
-
+
{% endraw %}
@@ -102,48 +82,24 @@ const data = [
{% raw %}
-
-
-
-
-
-
-
-
-
+
@@ -162,11 +118,11 @@ To run the project, use the following command:
npm run dev
```
-The output will appear as follows:
+After the application starts, open the localhost URL shown in the terminal to view the Vue Spreadsheet Editor in the browser. The output will appear as follows:
-
+
-After the application starts, open the local URL shown in the terminal to view the Vue Spreadsheet Editor in the browser.
+> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-vue-spreadsheet-component).
## See also
diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs
index 3a3300bf82..3c6858023c 100644
--- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs
+++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs
@@ -1,4 +1,4 @@
public IActionResult Index()
{
return View();
-}
\ No newline at end of file
+}
diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper
index c6d8de4136..0e5ff2e179 100644
--- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper
+++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper
@@ -1,3 +1,3 @@
-
+@page
-
\ No newline at end of file
+
diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/getting-started-mvc/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/getting-started-mvc/razor
index 0ac89bec32..f2202634de 100644
--- a/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/getting-started-mvc/razor
+++ b/Document-Processing/code-snippet/spreadsheet/asp-net-mvc/getting-started-mvc/razor
@@ -1 +1 @@
-@Html.EJS().Spreadsheet("spreadsheet").Render()
\ No newline at end of file
+@Html.EJS().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()
\ No newline at end of file
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..5687580e5f 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..9c449269de 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,9 @@
-// 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..5687580e5f 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..5687580e5f 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');
diff --git a/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx
index f93d76fb05..fab8c47329 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.jsx
@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
export default function App() {
- return ();
+ return ();
}
const root = createRoot(document.getElementById('root'));
-root.render();
\ No newline at end of file
+root.render();
diff --git a/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx
index 115f35040b..d73494be5d 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/getting-started-cs1/app/app.tsx
@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
export default function App() {
- return ();
+ return ();
}
const root = createRoot(document.getElementById('root')!);
-root.render();
\ No newline at end of file
+root.render();
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/getting-started-cs1/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/getting-started-cs1/app-composition.vue
index e6644d8688..0f676c61ec 100644
--- a/Document-Processing/code-snippet/spreadsheet/vue/getting-started-cs1/app-composition.vue
+++ b/Document-Processing/code-snippet/spreadsheet/vue/getting-started-cs1/app-composition.vue
@@ -1,9 +1,12 @@
-
+