From 7ad285bdaf42f4c61c044bfbc0fab7e64be510ba Mon Sep 17 00:00:00 2001 From: PrakashRajKumar Date: Mon, 18 May 2026 21:34:30 +0530 Subject: [PATCH] 000000: Resolved the overview and getting started review correction for spreadsheet platforms. --- .../ASP-NET-CORE/getting-started-core.md | 8 +- .../Spreadsheet/ASP-NET-CORE/overview.md | 4 +- .../ASP-NET-MVC/getting-started-mvc.md | 16 ++-- .../Excel/Spreadsheet/ASP-NET-MVC/overview.md | 4 +- .../Spreadsheet/Angular/getting-started.md | 16 ++-- .../Excel/Spreadsheet/Angular/overview.md | 4 +- .../Blazor/blazor-hybrid-maui-app.md | 87 ++++++++++++++----- .../Blazor/getting-started-webapp.md | 11 ++- .../Spreadsheet/Blazor/getting-started.md | 17 ++-- .../Excel/Spreadsheet/Blazor/overview.md | 4 +- .../Javascript-ES5/getting-started.md | 4 +- .../Spreadsheet/Javascript-ES5/overview.md | 4 +- .../Javascript-ES6/getting-started.md | 18 ++-- .../Spreadsheet/Javascript-ES6/overview.md | 4 +- .../Spreadsheet/React/getting-started.md | 14 +-- .../Excel/Spreadsheet/React/overview.md | 10 ++- .../Excel/Spreadsheet/Vue/getting-started.md | 14 +-- .../Excel/Spreadsheet/Vue/overview.md | 4 +- 18 files changed, 161 insertions(+), 82 deletions(-) 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 b8c793514b..f2e3149b3a 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 @@ -38,7 +38,7 @@ N> Syncfusion® ASP.NET Core controls are av Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. {% tabs %} -{% highlight C# tabtitle="~/_ViewImports.cshtml" %} +{% highlight C# tabtitle="_ViewImports.cshtml" %} @addTagHelper *, Syncfusion.EJ2 @@ -50,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe Add the stylesheet and script references to the `` section of the `~/Pages/Shared/_Layout.cshtml` file, as shown in the following example. {% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} +{% highlight cshtml tabtitle="_Layout.cshtml" %} ... @@ -69,7 +69,7 @@ N> To learn other ways to load themes or scripts (such as NPM packages or [CRG]( 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" %} +{% highlight cshtml tabtitle="_Layout.cshtml" %} ... @@ -90,7 +90,7 @@ Add the Syncfusion® ASP.NET Core Spreadshee {% endhighlight %} {% endtabs %} -> **Note:** The [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) and [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save) section. +N> The [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) and [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save) section. 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. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md index 7adf8bdec8..a72d8cdeda 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the ASP.NET Core Spreadsheet Control -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. +The [Syncfusion® 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. + +![ASP.NET Core Spreadsheet Control](images/overview-banner.png) ## 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 92c1826a41..16369e70b9 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 @@ -24,7 +24,7 @@ This section briefly explains about how to include [Syncfusion Syncfusion® ASP.NET MVC controls are ava Add **Syncfusion.EJ2** namespace reference in `~/Views/Web.config` file, as shown in the following example. -``` +{% tabs %} +{% highlight cshtml tabtitle="Web.config" %} + ... ... -``` + +{% endhighlight %} +{% endtabs %} ## Add stylesheet and script resources Add the stylesheet and script references to the `` section of `~/Views/Shared/_Layout.cshtml` file, as shown in the following example. {% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} +{% highlight cshtml tabtitle="_Layout.cshtml" %} ... @@ -73,7 +77,7 @@ N> To learn other ways to load themes or scripts (such as NPM packages or [CRG]( Register the script manager `EJS().ScriptManager()` at the end of the `` element in the `~/Views/Shared/_Layout.cshtml` file, as shown in the following example. {% tabs %} -{% highlight cshtml tabtitle="~/_Layout.cshtml" %} +{% highlight cshtml tabtitle="_Layout.cshtml" %} ... @@ -94,7 +98,7 @@ Add the Syncfusion® ASP.NET MVC Spreadsheet {% endhighlight %} {% endtabs %} -> **Note:** The [`openUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#open) and [`saveUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#save) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save) section. +N> The [`openUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#open) and [`saveUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#save) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save) section. Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Spreadsheet control will be rendered in the default web browser. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md index 4fbccbd401..2855d75f1b 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the ASP.NET MVC Spreadsheet Control -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. +The [Syncfusion® 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. + +![ASP.NET MVC Spreadsheet Control](images/overview-banner.png) ## Key features diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index cc38385167..2a42361f0b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -32,7 +32,7 @@ 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. +N> 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 @@ -52,7 +52,9 @@ npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save Add the following Spreadsheet and dependent component style references to the `[src/styles.css]` file. -```css +{% tabs %} +{% highlight css tabtitle="styles.css" %} + @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; @@ -63,9 +65,11 @@ Add the following Spreadsheet and dependent component style references to the `[ @import '../node_modules/@syncfusion/ej2-dropdowns/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. +{% endhighlight %} +{% endtabs %} + +N> 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. ## Add the Syncfusion® Angular Spreadsheet component to the application @@ -86,7 +90,7 @@ export class App { } {% endhighlight %} {% endtabs %} -> **Note:** The [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). +N> The [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). ## Run the application @@ -103,7 +107,7 @@ 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). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-angular-spreadsheet-component). ## Video tutorial diff --git a/Document-Processing/Excel/Spreadsheet/Angular/overview.md b/Document-Processing/Excel/Spreadsheet/Angular/overview.md index 05685656ee..144d14d0a4 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the Angular Spreadsheet Component -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. +The [Syncfusion® 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. + +![Angular Spreadsheet Component](./images/overview-banner.png) ## Key features diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md index 049a1a55f4..1d29ca7b31 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md @@ -73,10 +73,10 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. +In the **~/_Imports.razor** file, add the following namespaces: {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -84,52 +84,91 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Next, register the Syncfusion® Blazor Service in the MauiProgram.cs file of the MAUI Blazor App. +Register Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. {% tabs %} -{% highlight C# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="3 26" %} +using Microsoft.Extensions.Logging; +using MauiBlazorWindow.Data; using Syncfusion.Blazor; - .... - builder.Services.AddSyncfusionBlazor(); - .... + +namespace MauiBlazorWindow; + +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + builder.Services.AddMauiBlazorWebView(); + +#if DEBUG + builder.Services.AddBlazorWebViewDeveloperTools(); + builder.Logging.AddDebug(); +#endif + + builder.Services.AddSingleton(); + builder.Services.AddSyncfusionBlazor(); + return builder.Build(); + } +} {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` of the **~wwwroot/index.html** file. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~wwwroot/index.html** file as shown below: + +{% tabs %} +{% highlight html tabtitle="index.html" %} -```html .... -``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +{% endhighlight %} +{% endtabs %} + +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Blazor Spreadsheet component -Add the Syncfusion® Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the ~/Home.razor page under the **~/Components/Pages** folder. +Add the Syncfusion® Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the **~/Home.razor** page under the **~/Components/Pages** folder. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} - +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + -@code { - public byte[] DataSourceBytes { get; set; } - - protected override void OnInitialized() - { - string filePath = "wwwroot/Sample.xlsx"; - DataSourceBytes = File.ReadAllBytes(filePath); - } -} - {% endhighlight %} {% endtabs %} + +In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app. + +![Maui Tool](images/maui-build.png) + +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions. + +![Blazor Spreadsheet](images/getting-started.png) + +N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save.md). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). + +## See Also + +- [Getting started with the Blazor Spreadsheet in a Blazor WebAssembly App](./getting-started.md) +- [Getting started with the Blazor Spreadsheet in a Blazor Web app Server app](./getting-started-webapp.md) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 37e0fd7a6b..3e50dc9094 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with the Blazor Spreadsheet in Web App -This section briefly explains how to include the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -102,7 +102,7 @@ dotnet restore After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -134,7 +134,9 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the section and the script reference at the end of the in the **~/Components/App.razor** file as shown below. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + .... @@ -144,7 +146,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A -``` +{% endhighlight %} +{% endtabs %} N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index e048b1b748..ba83f7339a 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Spreadsheet Component -This section briefly explains how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -93,7 +93,7 @@ dotnet restore After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Spreadsheet @@ -106,7 +106,7 @@ After the packages are installed, open the **~/_Imports.razor** file and import Register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} +{% highlight C# tabtitle="Program.cs" hl_lines="3 11" %} .... using Syncfusion.Blazor; @@ -123,13 +123,18 @@ builder.Services.AddSyncfusionBlazor(); The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} + .... -``` + +{% endhighlight %} +{% endtabs %} + N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Blazor Spreadsheet component @@ -137,7 +142,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app Add the Syncfusion® Blazor Spreadsheet component in the **~/Pages/Home.razor** file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} @page "/" @using Syncfusion.Blazor.Spreadsheet diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/overview.md b/Document-Processing/Excel/Spreadsheet/Blazor/overview.md index 61a5a89b87..6b93536d25 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the Blazor Spreadsheet Control -The [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) is a user-interactive component designed to organize and analyze data in a tabular format with configuration options for customization. It will load data by importing an Excel file or from local file paths and Base64 string data. The populated data can be exported as Excel files in `.xlsx` format. +The [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) is a user-interactive component designed to organize and analyze data in a tabular format with configuration options for customization. It will load data by importing an Excel file or from local file paths and Base64 string data. The populated data can be exported as Excel files in XLSX format. + +![Blazor Spreadsheet](images/blazor-overview.png) ## 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 b68372b74d..64b98b3cc2 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -148,7 +148,7 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM {% endtabcontents %} -> **Note:** To learn more about other ways to load themes or scripts, see the [Themes topic](https://ej2.syncfusion.com/javascript/documentation/appearance/theme) and [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) documentation. +N> To learn more about other ways to load themes or scripts, see the [Themes topic](https://ej2.syncfusion.com/javascript/documentation/appearance/theme) and [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) documentation. ## Add the Syncfusion® Spreadsheet control @@ -185,7 +185,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 [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). +N> 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 diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md index 8191d2ba02..2b1f5a6b98 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the JavaScript (ES5) Spreadsheet Control -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. +The [Syncfusion® 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. + +![JavaScript ES5 Spreadsheet Control](./images/overview-banner.png) ## 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 1a79bf1c9f..47dee7e436 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -23,7 +23,7 @@ To get started, ensure the following software is installed on your machine: Create a simple TypeScript application using the 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). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +N> 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). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). **Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub. @@ -40,11 +40,15 @@ cd ej2-quickstart To install only the Spreadsheet component, replace the dependency with [@syncfusion/ej2-spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-spreadsheet), as shown below: -```bash +{% tabs %} +{% highlight json tabtitle="package.json" %} + "dependencies": { "@syncfusion/ej2-spreadsheet": "*" } -``` + +{% endhighlight %} +{% endtabs %} **Step 4:** Install the dependent npm packages. @@ -57,7 +61,7 @@ npm install Add the following Spreadsheet and dependent component style references. {% tabs %} -{% highlight css tabtitle="~/src/styles/styles.css" %} +{% highlight css tabtitle="styles.css" %} @import '../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; @import '../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; @@ -73,7 +77,7 @@ Add the following Spreadsheet and dependent component style references. {% endhighlight %} {% endtabs %} -> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. +N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. ## Add the Syncfusion® Spreadsheet control to the application @@ -116,7 +120,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 [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). +N> 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 @@ -138,7 +142,7 @@ 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). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-spreadsheet-control). ## See also diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md index 73d2cbadd2..5021492062 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the JavaScript (ES6) Spreadsheet Control -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. +The [Syncfusion® 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. + +![JavaScript Spreadsheet Control](./images/overview-banner.png) ## Key features diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index c102f627b0..b0aa59f95f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -38,7 +38,7 @@ cd spreadsheet-app ## Install the Syncfusion® React Spreadsheet package -Install the [React Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet) package from npm using the following command: +Install the [Syncfusion® React Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet) package from npm using the following command: ``` npm install @syncfusion/ej2-react-spreadsheet --save @@ -48,7 +48,9 @@ npm install @syncfusion/ej2-react-spreadsheet --save Add the following Spreadsheet and dependent component style references to the `src/index.css` file. -```css +{% tabs %} +{% highlight css tabtitle="index.css" %} + @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; @@ -59,7 +61,9 @@ Add the following Spreadsheet and dependent component style references to the `s @import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; -``` + +{% endhighlight %} +{% endtabs %} ## Add the Syncfusion® React Spreadsheet component to the application @@ -92,7 +96,7 @@ export default function App() { {% endhighlight %} {% endtabs %} -> **Note:** The [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Web Services`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/web-services/webservice-overview) section. +N> The [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Web Services`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/web-services/webservice-overview) section. ## Run the application @@ -110,7 +114,7 @@ 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. +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-react-spreadsheet-component) to explore the complete source code. 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 diff --git a/Document-Processing/Excel/Spreadsheet/React/overview.md b/Document-Processing/Excel/Spreadsheet/React/overview.md index c65dfdae06..05dec3d732 100644 --- a/Document-Processing/Excel/Spreadsheet/React/overview.md +++ b/Document-Processing/Excel/Spreadsheet/React/overview.md @@ -9,7 +9,9 @@ documentation: ug # Overview of the React Spreadsheet Component -The [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-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. +The [Syncfusion® React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-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. + +![React Spreadsheet Component](images/overview-banner.PNG) ## Key features @@ -21,15 +23,15 @@ The [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react- * [Clipboard](clipboard): Provides the option to perform clipboard operations. * [Cell formatting](formatting#text-and-cell-formatting): Provides the option to customize the appearance of cells. * [Number formatting](formatting#number-formatting): Provides the option to format the cell value. -* [Open](open-save#open): Provides the option to open Excel and CSV files in Spreadsheet. -* [Save](open-save#save): Provides the option to save Spreadsheet data as Excel, CSV, and PDF documents. +* [Open](open-excel-files): Provides the option to open Excel and CSV files in Spreadsheet. +* [Save](save-excel-files): Provides the option to save Spreadsheet data as Excel, CSV, and PDF documents. * [Sorting](sort): Helps you to arrange the data to particular order in a selected range of cells. * [Filtering](filter): Helps you to view specific rows in the Spreadsheet by hiding the other rows. * [Undo Redo](undo-redo): Provides the option to perform undo redo operations in Spreadsheet. * [Hyperlink](link): Provides the option to navigate to web link or cell reference within the sheet or to other sheet in Spreadsheet. * [Resize](mobile-responsiveness): Allows you to change the row height and column width. Auto fit the rows and columns based on its content. * [Wrap text](cell-range#wrap-text): Provides the option to display the large content as multiple lines in a single cell. -* [Data validation](cell-range#data-validation): Provides the option to validate edited values based on data validation rules defined for a cell or range of cells. +* [Data validation](data-validation): Provides the option to validate edited values based on data validation rules defined for a cell or range of cells. * [Find and replace](searching): Provides the option to find the data and replace it across all sheets in Spreadsheet. * [Protect sheet](protect-sheet): Provides the option to restrict user actions like cell editing, row and column insertion, deletion, and resizing. * [Borders](formatting#borders): Provides the option to customize cell gridlines such as color and its style for enhanced UI. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index 80c9b35fc8..71c0ed4f08 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. +This article provides a step-by-step guide for setting up a Vue 2 project and integrating the [Syncfusion® Vue Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor). ## Prerequisites @@ -32,11 +32,11 @@ vue create quickstart cd quickstart ``` -> When prompted during project creation, select **Default ([Vue 2] babel, eslint)**. +N> When prompted during project creation, select **Default ([Vue 2] babel, eslint)**. ## Install the Syncfusion® Vue Spreadsheet package -Install the [Vue Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: +Install the [Syncfusion® Vue Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: ``` npm install @syncfusion/ej2-vue-spreadsheet --save @@ -47,7 +47,7 @@ npm install @syncfusion/ej2-vue-spreadsheet --save Add the following Spreadsheet and dependent component style references. {% tabs %} -{% highlight html tabtitle="~/src/App.vue" %} +{% highlight html tabtitle="App.vue" %}