You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ documentation: ug
9
9
10
10
# Getting Started with Blazor Spreadsheet in Web App
11
11
12
-
This section briefly explains about how to include [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
12
+
This section briefly explains about how to include [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
13
13
14
14
{% tabcontents %}
15
15
@@ -25,11 +25,11 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
25
25
26
26
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
27
27
28
-
## Install Syncfusion® Blazor Spreadsheet and Themes NuGet packages in the App
28
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Spreadsheet and Themes NuGet in the App
29
29
30
30
To add **Syncfusion Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
31
31
32
-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
32
+
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
33
33
34
34
Alternatively, you can utilize the following package manager command to achieve the same.
N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
45
+
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
46
46
47
47
{% endtabcontent %}
48
48
@@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget
54
54
55
55
## Create a new Blazor Web App in Visual Studio Code
56
56
57
-
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
57
+
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
58
58
59
-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating the Blazor Web Application.
59
+
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
60
60
61
61
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
62
62
@@ -72,7 +72,7 @@ cd BlazorWebApp.Client
72
72
73
73
N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](./getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
74
74
75
-
## Install Syncfusion® Blazor Spreadsheet and Themes NuGet packages in the App
75
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Spreadsheet and Themes NuGet in the App
76
76
77
77
If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
78
78
@@ -92,13 +92,13 @@ dotnet restore
92
92
93
93
{% endtabs %}
94
94
95
-
N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the[NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
95
+
N> Syncfusion<supstyle="font-size:70%">®</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
96
96
97
97
{% endtabcontent %}
98
98
99
99
{% endtabcontents %}
100
100
101
-
## Register Syncfusion® Blazor Service
101
+
## Register Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service
102
102
103
103
| Interactive Render Mode | Description |
104
104
| -- | -- |
@@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespace.
118
118
119
119
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
120
120
121
-
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App.
121
+
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
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 `<head>` section and the script reference at the end of the `<body>`section within the **~/Components/App.razor** file as shown below:
178
+
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 `<head>` section and the script reference at the end of the `<body>`in the **~/Components/App.razor** file as shown below:
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md
+11-16Lines changed: 11 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,21 +9,21 @@ documentation: ug
9
9
10
10
# Getting Started with Blazor Spreadsheet Component
11
11
12
-
This section explains how to add the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component to a Blazor WebAssembly app using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
12
+
This section briefly explains about 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.
13
13
14
14
{% tabcontents %}
15
15
16
16
{% tabcontent Visual Studio %}
17
17
18
18
## Prerequisites
19
19
20
-
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
20
+
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
21
21
22
22
## Create a new Blazor App in Visual Studio
23
23
24
-
You can create a **Blazor WebAssembly App**in Visual Studio using either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
24
+
You can create a **Blazor WebAssembly App**using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
25
25
26
-
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Spreadsheet and Themes NuGet packages in the App
26
+
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Spreadsheet and Themes NuGet in the App
27
27
28
28
To add **Blazor Spreadsheet** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
47
+
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
48
48
49
49
## Create a new Blazor App in Visual Studio Code
50
50
51
-
You can create a **Blazor WebAssembly App**in Visual Studio Code using either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
51
+
You can create a **Blazor WebAssembly App**using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
52
52
53
53
Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
111
-
112
110
using Syncfusion.Blazor;
113
111
114
112
var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -119,11 +117,12 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.
119
117
120
118
builder.Services.AddSyncfusionBlazor();
121
119
await builder.Build().RunAsync();
120
+
....
122
121
123
122
{% endhighlight %}
124
123
{% endtabs %}
125
124
126
-
## Add Stylesheet and Script Resources
125
+
## Add stylesheet and script resources
127
126
128
127
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 `<head>` section of the **~/index.html** file.
129
128
@@ -138,8 +137,6 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
138
137
139
138
## Add Blazor Spreadsheet component
140
139
141
-
Please note that due to WebAssembly’s browser restrictions, File.ReadAllBytes is not supported. Therefore, the samples provided use a base64-encoded Excel file to import data. Here is the code example:
142
-
143
140
Add the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Spreadsheet component in the **~/Pages/Index.razor** file.
0 commit comments