Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-electron-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Creating a Blazor Desktop App with Electron | Syncfusion
title: Creating a Blazor Desktop App with Electron | Syncfusion®
description: Learn to build a cross-platform desktop app using a Blazor Web App (Server) with Electron integrating Blazor DataGrid.
platform: Blazor
component: Common
Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-server-side-visual-studio.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting started with Syncfusion Blazor Server App in Visual Studio
title: Getting started with Server App in Visual Studio | Syncfusion®
description: Check out the documentation for getting started with Blazor Components in Visual Studio and much more.
platform: Blazor
component: Common
Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-web-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting Started with Blazor Web App | Syncfusion
title: Getting Started with Blazor Web App | Syncfusion®
description: Learn how to get started with the Blazor DataGrid component in a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI.
platform: Blazor
component: Common
Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-webassembly-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting Started with Syncfusion Blazor WASM App in Visual Studio
title: Getting Started with Blazor WASM App in Visual Studio | Syncfusion®
description: Check out the documentation for getting started with Blazor WebAssembly App and Blazor Components in Visual Studio and much more.
platform: Blazor
component: Common
Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/blazor-webassembly-jetbrains.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting Started with Syncfusion® Blazor WASM App in JetBrains Rider
title: Getting Started with Blazor WASM App in JetBrains Rider | Syncfusion®
description: Step-by-step guide to integrate Blazor DataGrid in Blazor WASM applications in JetBrains Rider.
platform: Blazor
control: common
Expand Down
22 changes: 11 additions & 11 deletions blazor/getting-started/maui-blazor-app.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting Started with MAUI Blazor App in Visual Studio | Syncfusion
description: Check out the documentation for getting started with MAUI Blazor App and Syncfusion Blazor Components in Visual Studio and much more.
title: Getting Started with MAUI Blazor App in Visual Studio | Syncfusion®
description: Check out the documentation for getting started with MAUI Blazor App and Blazor Components in Visual Studio and much more.
platform: Blazor
component: Common
documentation: ug
---

# Getting Started with .NET MAUI Blazor Hybrid App

This section explains how to create and run the .NET Multi-platform Blazor App UI (.NET MAUI Blazor App) with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
This section explains how to create and run the .NET Multi-platform Blazor App UI (.NET MAUI Blazor App) with Blazor components.

To get started quickly with a .NET MAUI Blazor App, review the following video.

Expand Down Expand Up @@ -61,7 +61,7 @@ In `MainPage.xaml`, the `BlazorWebView` is added and points to the root of the B

For more details, refer to the [Create a .NET MAUI Blazor App](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid and Themes NuGet in the App
## Install Blazor Grid and Themes NuGet in the App

To add the **Blazor DataGrid** component to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following commands in the Package Manager Console to achieve the same.

Expand All @@ -74,7 +74,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> 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 the available NuGet package list with component details.
N> 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 the available NuGet package list with component details.

## Add Import Namespaces

Expand All @@ -89,9 +89,9 @@ Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor` and `Syncfus
{% endhighlight %}
{% endtabs %}

## Register Syncfusion Blazor Service
## Register Blazor Service

Register the Syncfusion Blazor service in the `MauiProgram.cs` file of the MAUI Blazor App.
Register the Blazor service in the `MauiProgram.cs` file of the MAUI Blazor App.

{% tabs %}
{% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 3" %}
Expand Down Expand Up @@ -122,9 +122,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A

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 the Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Add a Syncfusion Blazor component to any Razor file in the Blazor project. The example below adds the Blazor Grid component into `Pages/Home.razor` file.
Add a Blazor component to any Razor file in the Blazor project. The example below adds the Blazor Grid component into `Pages/Home.razor` file.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -163,7 +163,7 @@ In the Visual Studio toolbar, click the **Windows Machine** to build and run the

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.

![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-datagrid.webp)
![MAUI Blazor App with Blazor Components](images/maui/maui-blazor-datagrid.webp)

N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components).

Expand Down Expand Up @@ -195,7 +195,7 @@ If the error dialog “There were deployment errors” appears, enable Developer

### How to solve deployment errors in iOS?

In iOS, code is statically compiled ahead of time. Configure Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor assemblies in the `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploying to a real device.
In iOS, code is statically compiled ahead of time. Configure Blazor assemblies in the `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploying to a real device.

```
<PropertyGroup Condition="$(TargetFramework.Contains('-ios')) And $(Configuration.Contains('Release')) ">
Expand Down
2 changes: 1 addition & 1 deletion blazor/getting-started/maui-blazor-web-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Integrating Syncfusion® Blazor Components in .NET MAUI and Web App
title: Integrating Components in .NET MAUI and Web App | Syncfusion®
description: Steps to create a .NET MAUI Blazor Hybrid and Blazor Web App and integrate Blazor components.
platform: Blazor
component: Common
Expand Down
20 changes: 10 additions & 10 deletions blazor/getting-started/microsoft-teams-app.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting Started with Microsoft Teams App in Visual Studio | Syncfusion
description: Check out the documentation for getting started with Microsoft Teams App using Syncfusion Blazor Components in Visual Studio and much more.
title: Getting Started with Microsoft Teams App in VS | Syncfusion®
description: Check out the documentation for getting started with Microsoft Teams App using Blazor Components in Visual Studio and much more.
platform: Blazor
component: Common
documentation: ug
---

# Getting Started with Microsoft Teams Application

This section explains how to create and run a Microsoft Teams application (Tab App) with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
This section explains how to create and run a Microsoft Teams application (Tab App) with Blazor components.

## Prerequisites

Expand Down Expand Up @@ -55,7 +55,7 @@ This section explains how to create and run a Microsoft Teams application (Tab A
5. Click Open to create the new Microsoft application with a personal tab.
![New Teams application with a personal tab](images/MSTeams/new-app-personal-tab.webp)

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban and Themes NuGet in the App
## Install Blazor Kanban and Themes NuGet in the App

Here's an example of how to add **Blazor Kanban** 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.Kanban](https://www.nuget.org/packages/Syncfusion.Blazor.Kanban) 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.

Expand All @@ -68,9 +68,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details.
N> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details.

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Blazor Service

Open **~/_Imports.razor** file and import the `Syncfusion.Blazor.Buttons` and `Syncfusion.Blazor.Kanban` namespace.

Expand All @@ -81,7 +81,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor.Buttons` and `S

```

Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the created Microsoft Teams tab app. Open the `~/Program.cs` file and register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service as follows
Now, register the Blazor Service in the created Microsoft Teams tab app. Open the `~/Program.cs` file and register the Blazor service as follows

{% tabs %}
{% highlight c# tabtitle="~/Program.cs" hl_lines="2 16" %}
Expand Down Expand Up @@ -128,9 +128,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
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.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
## Add Blazor component

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban component in the `Tab.razor` page under the `~/Components/Pages/Tab.razor` folder.
Now, add the Blazor Kanban component in the `Tab.razor` page under the `~/Components/Pages/Tab.razor` folder.

{% tabs %}
{% highlight razor tabtitle="~/Components/Pages/Tab.razor" %}
Expand Down Expand Up @@ -210,4 +210,4 @@ Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Kanban comp

![Microsoft Teams application with Syncfusion Blazor controls](images/MSTeams/output-msteams-syncfusion.webp)

N> [View the complete Microsoft Teams application with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components)
N> [View the complete Microsoft Teams application with Blazor controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components)
32 changes: 16 additions & 16 deletions blazor/getting-started/razor-class-library.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Getting Started with Razor Class Library in Visual Studio | Syncfusion
description: Check out the documentation for Creating Razor Class Library (RCL) using Syncfusion Blazor components.
title: Getting Started with Razor Class Library in VS | Syncfusion®
description: Check out the documentation for Creating Razor Class Library (RCL) using Blazor components and much more details.
platform: Blazor
component: Common
documentation: ug
---

# Creating Razor Class Library (RCL) using Syncfusion® Blazor components
# Creating Razor Class Library (RCL) using Blazor components

This guide explains how to create a Razor Class Library (RCL) that includes Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
This guide explains how to create a Razor Class Library (RCL) that includes Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).

{% tabcontents %}

Expand Down Expand Up @@ -37,7 +37,7 @@ This guide explains how to create a Razor Class Library (RCL) that includes Sync

![select framework](images/VS2022/blazor-select-template-rcl.webp)

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid and Themes NuGet in the App
## Install Blazor Grid and Themes NuGet in the App

To add the **Blazor DataGrid** component to the library, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.

Expand All @@ -50,11 +50,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

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 the available NuGet package list with component details.
N> 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 the available NuGet package list with component details.

## Importing Syncfusion Blazor component in Razor Class Library
## Importing Blazor component in Razor Class Library

Import and add the Syncfusion Blazor components in the `~/Component1.razor` file. For example, the Blazor DataGrid component is imported and added in the **~/Component1.razor** page.
Import and add the Blazor components in the `~/Component1.razor` file. For example, the Blazor DataGrid component is imported and added in the **~/Component1.razor** page.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -120,9 +120,9 @@ cd RazorUIClassLib

{% endtabs %}

## Install Syncfusion Blazor Grid and Themes NuGet in the App
## Install Blazor Grid and Themes NuGet in the App

If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion Blazor component NuGet packages in the client project.
If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Blazor component NuGet packages in the client project.

* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
Expand All @@ -140,11 +140,11 @@ dotnet restore

{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
N> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.

## Importing Syncfusion Blazor component in Razor Class Library
## Importing Blazor component in Razor Class Library

Import and add the Syncfusion Blazor components in the `~/Component1.razor` file. For example, the Blazor DataGrid component is imported and added in the **~/Component1.razor** page.
Import and add the Blazor components in the `~/Component1.razor` file. For example, the Blazor DataGrid component is imported and added in the **~/Component1.razor** page.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -217,9 +217,9 @@ Create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAssembly App
@using RazorClassLibrary
```

2. Register the Syncfusion Blazor Service in the **~/Program.cs** file of the Blazor App.
2. Register the Blazor Service in the **~/Program.cs** file of the Blazor App.

* If you select an **Interactive render mode** as `WebAssembly` or `Auto`, need to register the Syncfusion Blazor service in both **~/Program.cs** files of the Blazor Web App.
* If you select an **Interactive render mode** as `WebAssembly` or `Auto`, need to register the Blazor service in both **~/Program.cs** files of the Blazor Web App.

```cshtml

Expand Down Expand Up @@ -259,6 +259,6 @@ Create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAssembly App

```

5. Run the application, The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component will be rendered in the default web browser.
5. Run the application, The Blazor Grid component will be rendered in the default web browser.

![RCL output](images/blazor-grid-with-rcl.webp)
Loading