diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md
index 82e7f52760..b785734a0d 100644
--- a/blazor/3D-chart/getting-started-with-web-app.md
+++ b/blazor/3D-chart/getting-started-with-web-app.md
@@ -26,7 +26,7 @@ To get started quickly with Blazor 3D Chart component, check on the following vi
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -38,7 +38,7 @@ To add the **Blazor 3D Chart** component in the app, open NuGet package manager
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -60,11 +60,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -115,11 +115,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/Release-Notes/32.1.19.md b/blazor/Release-Notes/32.1.19.md
new file mode 100644
index 0000000000..658b048991
--- /dev/null
+++ b/blazor/Release-Notes/32.1.19.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 4 Main Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v32.1.19 Release Notes
+
+{% include release-info.html date="December 16, 2025" version="v32.1.19" passed="78027" failed="0" %}
+
+{% directory path: _includes/release-notes/v32.1.19 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 198 | 198 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 297 | 297 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 445 | 445 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 176 | 176 | 0 | All Passed |
+| Charts | 5253 | 5253 | 0 | All Passed |
+| ChatUI | 129 | 129 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1013 | 1013 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 248 | 248 | 0 | All Passed |
+| DashboardLayout | 253 | 253 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 8394 | 8394 | 0 | All Passed |
+| DatePicker | 576 | 576 | 0 | All Passed |
+| DateRangePicker | 366 | 366 | 0 | All Passed |
+| DateTimePicker | 474 | 474 | 0 | All Passed |
+| Diagram | 15423 | 15423 | 0 | All Passed |
+| Dialog | 483 | 483 | 0 | All Passed |
+| DropdownList | 586 | 586 | 0 | All Passed |
+| Dropdowntree | 164 | 164 | 0 | All Passed |
+| FileManager | 3108 | 3108 | 0 | All Passed |
+| FileUpload | 330 | 330 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4831 | 4831 | 0 | All Passed |
+| HeatMap | 401 | 401 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 765 | 765 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 379 | 379 | 0 | All Passed |
+| LinearGauge | 797 | 797 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 441 | 441 | 0 | All Passed |
+| Maps | 1570 | 1570 | 0 | All Passed |
+| Mention | 152 | 152 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 386 | 386 | 0 | All Passed |
+| NumericTextbox | 462 | 462 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1239 | 1239 | 0 | All Passed |
+| ProgressBar | 198 | 198 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 494 | 494 | 0 | All Passed |
+| RichTextEditor | 2195 | 2195 | 0 | All Passed |
+| SankeyChart | 17 | 17 | 0 | All Passed |
+| Scheduler | 5713 | 5713 | 0 | All Passed |
+| Sidebar | 144 | 144 | 0 | All Passed |
+| Slider | 271 | 271 | 0 | All Passed |
+| SmithChart | 259 | 259 | 0 | All Passed |
+| Sparkline | 150 | 150 | 0 | All Passed |
+| SparklineChart | 150 | 150 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 344 | 344 | 0 | All Passed |
+| Tabs | 940 | 940 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 674 | 674 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 419 | 419 | 0 | All Passed |
+| Toast | 233 | 233 | 0 | All Passed |
+| Toolbar | 231 | 231 | 0 | All Passed |
+| TreeGrid | 4925 | 4925 | 0 | All Passed |
+| TreeMap | 764 | 764 | 0 | All Passed |
+| TreeView | 1361 | 1361 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md
index 9a0c5b81f1..f8ca8bf489 100644
--- a/blazor/accordion/getting-started-with-web-app.md
+++ b/blazor/accordion/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Accordion](https://ww
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Accordion** component in the app, open the NuGet package man
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,14 +56,14 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
-{% highlight c# tabtitle=".NET CLI" %}
+{% highlight c# tabtitle=".Blazor Web App" %}
dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -260,7 +260,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accordion/BlazorWebapp)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accordion/)
## Initialize Blazor Accordion using Template
diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md
index e5ddb0212e..5f7a4ffb5a 100644
--- a/blazor/accumulation-chart/getting-started-with-web-app.md
+++ b/blazor/accumulation-chart/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include `Blazor Accumulation Chart` c
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Accumulation Chart** component in the app, open the NuGet pa
If using the `WebAssembly or Auto` render modes in the Blazor Web, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -279,7 +279,7 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accumulation%20Chart/BlazorWebApp)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart)
## Add title
diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md
index ac72a3e579..d852c55791 100644
--- a/blazor/accumulation-chart/getting-started.md
+++ b/blazor/accumulation-chart/getting-started.md
@@ -283,7 +283,7 @@ Legend is used for the accumulation chart by setting the [Visible](https://help.
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVzjCVSVyMUwbGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Legend](images/getting-started/blazor-accumulation-chart-legend.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Accumulation%20Chart).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart).
## See also
diff --git a/blazor/accumulation-chart/gradient.md b/blazor/accumulation-chart/gradient.md
new file mode 100644
index 0000000000..d60bf21116
--- /dev/null
+++ b/blazor/accumulation-chart/gradient.md
@@ -0,0 +1,324 @@
+---
+layout: post
+title: Gradient in Blazor Accumulation Chart Component | Syncfusion
+description: Checkout and learn about applying linear and radial gradients to Accumulation Charts in Syncfusion Blazor Charts
+platform: Blazor
+control: Accumulation Chart
+documentation: ug
+---
+
+# Gradient in Blazor Accumulation Chart Component
+
+Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
+
+- Linear gradient
+- Radial gradient
+
+## Linear gradient
+
+A linear gradient blends colors along a straight path from a defined start point to an end point. In accumulation charts, a linear gradient can be applied either to the whole series or to each point via the `OnPointRender` event. An `AccumulationChartLinearGradient` is configured with one or more color stops.
+
+Properties:
+```
+X1 - Horizontal start position of the gradient (0 to 1).
+Y1 - Vertical start position of the gradient (0 to 1).
+X2 - Horizontal end position of the gradient (0 to 1).
+Y2 - Vertical end position of the gradient (0 to 1).
+```
+
+Each color stop (`AccumulationChartGradientColorStop`) supports:
+- Offset - Position along the gradient (0 to 100).
+- Color - Base color at the stop.
+- Opacity - Transparency (0 to 1).
+- Lighten - Adjusts lightness (positive lightens, negative darkens).
+- Brighten - Adjusts brightness (positive increases, negative decreases).
+
+### Apply gradient to the entire series
+
+A linear gradient may be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display orders by category using a Pie series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Series Linear Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryPoint {
+ public string Category { get; set; }
+ public double Share { get; set; }
+ public string DataLabel { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryPoint { Category = "Electronics", Share = 22.5, DataLabel = "Electronics: 22.5%" },
+ new CategoryPoint { Category = "Fashion", Share = 18.0, DataLabel = "Fashion: 18.0%" },
+ new CategoryPoint { Category = "Home & Kitchen", Share = 15.5, DataLabel = "Home & Kitchen: 15.5%" },
+ new CategoryPoint { Category = "Beauty & Health", Share = 10.0, DataLabel = "Beauty & Health: 10.0%" },
+ new CategoryPoint { Category = "Sports & Outdoors", Share = 9.5, DataLabel = "Sports & Outdoors: 9.5%" },
+ new CategoryPoint { Category = "Books", Share = 8.0, DataLabel = "Books: 8.0%" },
+ new CategoryPoint { Category = "Toys & Games", Share = 7.0, DataLabel = "Toys & Games: 7.0%" },
+ new CategoryPoint { Category = "Groceries", Share = 6.0, DataLabel = "Groceries: 6.0%" },
+ new CategoryPoint { Category = "Other", Share = 3.5, DataLabel = "Other: 3.5%" }
+ };
+}
+
+```
+
+
+### Apply a gradient per point using the point render event
+
+A diagonal linear gradient can be applied per data point using the `OnPointRender` event for a clear light-to-shadow transition.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
+
+ @* Point Render: applies a diagonal linear gradient per point *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryShare
+ {
+ public string? Category { get; set; }
+ public double Share { get; set; }
+ public string? DataLabelMappingName { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryShare { Category = "Electronics", Share = 22.5, DataLabelMappingName = "Electronics: 22.5%" },
+ new CategoryShare { Category = "Fashion", Share = 18.0, DataLabelMappingName = "Fashion: 18.0%" },
+ new CategoryShare { Category = "Home & Kitchen", Share = 15.5, DataLabelMappingName = "Home & Kitchen: 15.5%" },
+ new CategoryShare { Category = "Beauty & Health", Share = 10.0, DataLabelMappingName = "Beauty & Health: 10.0%" },
+ new CategoryShare { Category = "Sports & Outdoors", Share = 9.5, DataLabelMappingName = "Sports & Outdoors: 9.5%" },
+ new CategoryShare { Category = "Books", Share = 8.0, DataLabelMappingName = "Books: 8.0%" },
+ new CategoryShare { Category = "Toys & Games", Share = 7.0, DataLabelMappingName = "Toys & Games: 7.0%" },
+ new CategoryShare { Category = "Groceries", Share = 6.0, DataLabelMappingName = "Groceries: 6.0%" },
+ new CategoryShare { Category = "Other", Share = 3.5, DataLabelMappingName = "Other: 3.5%" }
+ };
+
+ private readonly string[] BaseColors = new[]
+ {
+ "#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"
+ };
+
+ private void OnPointRender(AccumulationPointRenderEventArgs args)
+ {
+ string baseColor = BaseColors[args.Point.Index % BaseColors.Length];
+ args.LinearGradient = new AccumulationChartLinearGradient
+ {
+ X1 = 0.05, Y1 = 0.0, X2 = 0.95, Y2 = 1.0,
+ GradientColorStops = new List
+ {
+ new AccumulationChartGradientColorStop { Offset = 0, Color = baseColor, Brighten = 0.85, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 20, Color = baseColor, Brighten = 0.45, Opacity = 0.98 },
+ new AccumulationChartGradientColorStop { Offset = 50, Color = baseColor, Brighten = 0.00, Opacity = 0.96 },
+ new AccumulationChartGradientColorStop { Offset = 80, Color = baseColor, Brighten = -0.30, Opacity = 0.94 },
+ new AccumulationChartGradientColorStop { Offset = 100, Color = baseColor, Brighten = -0.55, Opacity = 0.92 }
+ }
+ };
+ }
+}
+
+```
+
+
+## Radial gradient
+
+Configure a radial gradient by assigning an `AccumulationChartRadialGradient` with one or more color stops inside the `OnPointRender` event. The following properties control the gradient appearance:
+```
+Cx - Normalized horizontal center of the gradient (0 to 1).
+Cy - Normalized vertical center of the gradient (0 to 1).
+Fx - Normalized horizontal focal point from which the gradient appears to originate (0 to 1).
+Fy - Normalized vertical focal point (0 to 1).
+R - Normalized radius of the gradient circle (0 to 1).
+```
+
+Each color stop (`AccumulationChartGradientColorStop`) supports:
+- Offset - Position of the stop along the gradient (0 to 100).
+- Color - Base color at the stop.
+- Opacity - Transparency (0 to 1).
+- Lighten - Adjusts lightness (positive lightens, negative darkens).
+- Brighten - Adjusts brightness (positive increases, negative decreases).
+
+### Apply a radial gradient to the entire series
+
+A radial gradient can be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display orders by category using a Pie series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Series Radial Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryPoint {
+ public string Category { get; set; }
+ public double Share { get; set; }
+ public string DataLabel { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryPoint { Category = "Electronics", Share = 22.5, DataLabel = "Electronics: 22.5%" },
+ new CategoryPoint { Category = "Fashion", Share = 18.0, DataLabel = "Fashion: 18.0%" },
+ new CategoryPoint { Category = "Home & Kitchen", Share = 15.5, DataLabel = "Home & Kitchen: 15.5%" },
+ new CategoryPoint { Category = "Beauty & Health", Share = 10.0, DataLabel = "Beauty & Health: 10.0%" },
+ new CategoryPoint { Category = "Sports & Outdoors", Share = 9.5, DataLabel = "Sports & Outdoors: 9.5%" },
+ new CategoryPoint { Category = "Books", Share = 8.0, DataLabel = "Books: 8.0%" },
+ new CategoryPoint { Category = "Toys & Games", Share = 7.0, DataLabel = "Toys & Games: 7.0%" },
+ new CategoryPoint { Category = "Groceries", Share = 6.0, DataLabel = "Groceries: 6.0%" },
+ new CategoryPoint { Category = "Other", Share = 3.5, DataLabel = "Other: 3.5%" }
+ };
+}
+
+```
+
+
+### Apply a radial gradient per point using the point render event
+
+The following example uses a distinct color palette and an off-center radial gradient to create a clear light-to-shadow effect on each data point. The gradient is configured in `OnPointRender`, so each data point receives its own radial gradient derived from its base color.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the AccumulationChart to display share of e-commerce orders by category using a Pie series *@
+
+ @* Point Render: applies an off-center radial gradient per point *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class CategoryShare
+ {
+ public string? Category { get; set; }
+ public double Share { get; set; }
+ public string? DataLabelMappingName { get; set; }
+ }
+
+ private readonly List CategoryData = new ()
+ {
+ new CategoryShare { Category = "Electronics", Share = 22.5, DataLabelMappingName = "Electronics: 22.5%" },
+ new CategoryShare { Category = "Fashion", Share = 18.0, DataLabelMappingName = "Fashion: 18.0%" },
+ new CategoryShare { Category = "Home & Kitchen", Share = 15.5, DataLabelMappingName = "Home & Kitchen: 15.5%" },
+ new CategoryShare { Category = "Beauty & Health", Share = 10.0, DataLabelMappingName = "Beauty & Health: 10.0%" },
+ new CategoryShare { Category = "Sports & Outdoors", Share = 9.5, DataLabelMappingName = "Sports & Outdoors: 9.5%" },
+ new CategoryShare { Category = "Books", Share = 8.0, DataLabelMappingName = "Books: 8.0%" },
+ new CategoryShare { Category = "Toys & Games", Share = 7.0, DataLabelMappingName = "Toys & Games: 7.0%" },
+ new CategoryShare { Category = "Groceries", Share = 6.0, DataLabelMappingName = "Groceries: 6.0%" },
+ new CategoryShare { Category = "Other", Share = 3.5, DataLabelMappingName = "Other: 3.5%" }
+ };
+
+ private readonly string[] BaseColors = new[]
+ {
+ "#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"
+ };
+
+ private void OnPointRender(AccumulationPointRenderEventArgs args)
+ {
+ string baseColor = BaseColors[args.Point.Index % BaseColors.Length];
+ args.RadialGradient = new AccumulationChartRadialGradient
+ {
+ Cx = 0.35, Cy = 0.35, Fx = 0.35, Fy = 0.35, R = 0.85,
+ GradientColorStops = new List
+ {
+ new AccumulationChartGradientColorStop { Offset = 0, Color = baseColor, Brighten = 0.60, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 35, Color = baseColor, Brighten = 0.30, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 65, Color = baseColor, Brighten = 0.05, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 85, Color = baseColor, Brighten = -0.15, Opacity = 1 },
+ new AccumulationChartGradientColorStop { Offset = 100, Color = baseColor, Brighten = -0.35, Opacity = 1 }
+ }
+ };
+ }
+}
+
+```
+
+
+N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
+
+## See also
+
+- [Data Label](./data-label)
+- [Tooltip](./tool-tip)
+- [Legend](./legend)
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png
new file mode 100644
index 0000000000..91e071617b
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png
new file mode 100644
index 0000000000..2ba054aba2
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png
new file mode 100644
index 0000000000..981af7712d
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-points.png differ
diff --git a/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png
new file mode 100644
index 0000000000..1d4aab7945
Binary files /dev/null and b/blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-radial-gradient-series.png differ
diff --git a/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png
new file mode 100644
index 0000000000..85754962dd
Binary files /dev/null and b/blazor/accumulation-chart/images/legend/blazor-accumulation-chart-legend-template.png differ
diff --git a/blazor/accumulation-chart/legend.md b/blazor/accumulation-chart/legend.md
index c0169e442c..717fc87e61 100644
--- a/blazor/accumulation-chart/legend.md
+++ b/blazor/accumulation-chart/legend.md
@@ -389,6 +389,70 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.png)" %}
+## Legend Template
+
+Legend templates allow you to replace default legend icons and text with custom HTML or Blazor markup for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+
+To use, add a `LegendItemTemplate` inside any [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html) you want to customize. The rendered content becomes the legend item and can be styled with CSS. Legend interactions (click to toggle series) remain unless [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ToggleVisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+
+**Text** : Gets or sets the text to render for the current legend item in the template. Defaults to the value from the field mapped by AccumulationChartSeries.XName.
+
+**Data** : Gets the data item from AccumulationChartSeries.DataSource bound to the current legend item. Use this to access additional fields (for example, images, badges, or localized text) inside the template.
+
+```
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the accumulation chart component and configure its essential features *@
+
+
+ @* Display the legend and allow toggling visibility on interaction *@
+
+
+
+
+ @* Define a pie series with X and Y mappings and color mapping *@
+
+ @* Render a custom legend item using the template context *@
+
+ @{
+ var info = context as AccumulationChartLegendInfo;
+ var browser = info?.Data?["Browser"]?.ToString() ?? "";
+ var users = info?.Data?["Users"] is null ? 0 : Convert.ToDouble(info.Data["Users"]);
+ }
+
+
+ @browser
+ @users million people use @browser
+
+
+
+
+
+
+
+
+@code {
+ public class Statistics
+ {
+ public string Browser { get; set; }
+ public double Users { get; set; }
+ public string Color { get; set; }
+ }
+
+ public List StatisticsDetails = new()
+ {
+ new Statistics { Browser = "Chrome", Users = 37, Color = "#a16ee5" },
+ new Statistics { Browser = "UC Browser", Users = 17, Color = "#f7ce69" },
+ new Statistics { Browser = "iPhone", Users = 19, Color = "#55a5c2" },
+ new Statistics { Browser = "Others", Users = 4, Color = "#7ddf1e" },
+ new Statistics { Browser = "Opera", Users = 11, Color = "#ff6ea6" },
+ new Statistics { Browser = "Android", Users = 12, Color = "#7953ac" },
+ };
+
+}
+```
+
+
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
* [Grouping](./grouping)
diff --git a/blazor/ai-assistview/events.md b/blazor/ai-assistview/events.md
index 1de41ecbaa..a3140663d2 100644
--- a/blazor/ai-assistview/events.md
+++ b/blazor/ai-assistview/events.md
@@ -82,21 +82,20 @@ The [PromptChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inte
}
```
-## AttachmentUploadStart
+## OnAttachmentUploadReady
-The [AttachmentUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadStart) event is triggered before the attached files upload begins in the AI AssistView
+The [OnAttachmentUploadReady](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_OnAttachmentUploadReady) event is triggered before the attached files upload begins in the AI AssistView
```cshtml
@using Syncfusion.Blazor.InteractiveChat
-@using Syncfusion.Blazor.Inputs
-
+
@code {
- private void AttachmentUploadStart(UploadingEventArgs args)
+ private void OnAttachmentUploadReady(AttachmentUploadReadyEventArgs args)
{
// Your required action here
}
@@ -213,3 +212,35 @@ The [AttachmentRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
}
```
+
+## AttachmentClick
+
+The [AttachmentClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentClick) event is triggered when an attached file is clicked in the AI AssistView.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+@code {
+ private void OnAttachmentClick(AttachmentClickEventArgs args)
+ {
+ // Your required action here
+ }
+ private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
+ {
+ Enable = true,
+ SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
+ RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+}
+```
diff --git a/blazor/ai-assistview/file-attachments.md b/blazor/ai-assistview/file-attachments.md
index 0a43a6c681..44adbea63b 100644
--- a/blazor/ai-assistview/file-attachments.md
+++ b/blazor/ai-assistview/file-attachments.md
@@ -127,3 +127,37 @@ You can use the `MaxFileSize` property to allow the maximum file size of the upl
```
+
+### Setting maximum count
+
+Restrict how many files can be attached at once using `MaximumCount` property. The default value is `10`. If users select more than the allowed count, the maximum count reached error will be displayed.
+
+```cshtml
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+@code {
+ private void OnAttachmentClick(AttachmentClickEventArgs args)
+ {
+ // Your required action here
+ }
+ private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
+ {
+ Enable = true,
+ SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
+ RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove",
+ MaximumCount = 5
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+}
+```
+
+
diff --git a/blazor/ai-assistview/images/footer-toolbar-item.png b/blazor/ai-assistview/images/footer-toolbar-item.png
new file mode 100644
index 0000000000..80cb2615b3
Binary files /dev/null and b/blazor/ai-assistview/images/footer-toolbar-item.png differ
diff --git a/blazor/ai-assistview/images/footer-toolbar-position.png b/blazor/ai-assistview/images/footer-toolbar-position.png
new file mode 100644
index 0000000000..9191a78f4c
Binary files /dev/null and b/blazor/ai-assistview/images/footer-toolbar-position.png differ
diff --git a/blazor/ai-assistview/images/maximum-count.png b/blazor/ai-assistview/images/maximum-count.png
new file mode 100644
index 0000000000..e991c98680
Binary files /dev/null and b/blazor/ai-assistview/images/maximum-count.png differ
diff --git a/blazor/ai-assistview/toolbar-items.md b/blazor/ai-assistview/toolbar-items.md
index c38adfacbb..481c4af759 100644
--- a/blazor/ai-assistview/toolbar-items.md
+++ b/blazor/ai-assistview/toolbar-items.md
@@ -9,11 +9,157 @@ documentation: ug
# Toolbar items in Blazor AI AssistView component
-You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) & [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives.
+You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html), [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) & `AssistViewFooterToolbar` tag directives.
+
+## Configure footer toolbar
+
+By default, the footer toolbar renders the `send`, if attachment is enabled the `attachment` item will also be rendered which allows users to send the prompt text or attach files as needed.
+
+In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
+
+```cshtml
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+@code {
+ private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
+ {
+ Enable = true,
+ SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
+ RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+}
+```
+
+
+### Toolbar positioning
+
+You can use the `ToolbarPosition` property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the ToolbarPosition is `Inline`.
+
+By setting ToolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area .
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+
+
+
+
+
+@code {
+ private ToolbarPosition toolbarPosition = ToolbarPosition.Bottom;
+ private List prompts = new List()
+ {
+ new AssistViewPrompt() { Prompt = "What is AI?", Response = "
AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.
" }
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+ private void UpdateToolbarPosition()
+ {
+ toolbarPosition = toolbarPosition == ToolbarPosition.Bottom ? ToolbarPosition.Inline : ToolbarPosition.Bottom;
+ }
+}
+
+
+
+```
+
+
+
+### Adding custom items
+
+You can use the `AssistViewFooterToolbarItem` tag directive within the `AssistViewFooterToolbar` to add custom items for the footer toolbar in the AI AssistView.
+
+> To know more about the items, please refer to the [Items](./toolbar-items#items) section.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Navigations
+
+
+
+
+
+
+
+
+
+@code {
+ private List prompts = new List()
+ {
+ new AssistViewPrompt() { Prompt = "What is AI?", Response = "
AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.
" }
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+}
+
+```
+
+
+
+### Item click
+The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClick) event is triggered when the footer toolbar item is clicked.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+
+
+
+@code {
+ private void FooterToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
+ {
+ // Your required action here
+ }
+ private List prompts = new List()
+ {
+ new AssistViewPrompt() { Prompt = "What is AI?", Response = "
AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.
" }
+ };
+ private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+ {
+ await Task.Delay(1000);
+ var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+ args.Response = defaultResponse;
+ }
+}
+
+```
## Adding header toolbar items
-The AI AssistView component allows you to add header toolbar items using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html) tag directive within the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html).
+The AI AssistView component allows you to add header toolbar items using the `AssistViewToolbarItem` tag directive within the `AssistViewToolbar`.
### Items
diff --git a/blazor/ai-coding-assistant/prompt-library.md b/blazor/ai-coding-assistant/prompt-library.md
new file mode 100644
index 0000000000..433971e8d9
--- /dev/null
+++ b/blazor/ai-coding-assistant/prompt-library.md
@@ -0,0 +1,270 @@
+---
+layout: post
+title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion
+description: Explore the AI Coding Assistant Prompt Library to enhance Blazor development productivity with code generation, configuration examples, and contextual guidance.
+control: Syncfusion AI Coding Assistant Prompt Library
+platform: Blazor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Prompt Library - AI Coding Assistant
+
+Speed up your Blazor projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes.
+
+## How to Use
+
+Before starting, make sure your MCP Server is set up and running.
+
+* Choose a prompt that fits your need.
+* Copy the full prompt with the #SyncfusionBlazorAssistant handle.
+* Customize the prompt for your specific use case.
+* Execute via the MCP Server.
+* Always check and test the code before adding it to your project.
+
+## Component-Specific Prompts
+
+### Grid
+
+The Syncfusion Blazor Data Grid delivers fast, flexible tables for large datasets with built-in interactivity.
+
+{% promptcards %}
+{% promptcard Paging and Sorting %}
+#SyncfusionBlazorAssistant How do I enable paging and sorting in the Syncfusion Blazor Grid?
+{% endpromptcard %}
+{% promptcard Grouping and Filtering %}
+#SyncfusionBlazorAssistant Show me an example of grouping and filtering data in the Grid component.
+{% endpromptcard %}
+{% promptcard CRUD Operations %}
+#SyncfusionBlazorAssistant What’s the code to implement full CRUD operations in Syncfusion Blazor Grid?
+{% endpromptcard %}
+{% promptcard Grid Export to PDF and Excel %}
+#SyncfusionBlazorAssistant How can I add PDF and Excel export options to the Grid toolbar?
+{% endpromptcard %}
+{% promptcard Virtual Scrolling %}
+#SyncfusionBlazorAssistant How do I configure virtual scrolling for large datasets in the Grid?
+{% endpromptcard %}
+{% promptcard Multicolumn Grid Setup %}
+#SyncfusionBlazorAssistant Create a multicolumn Grid to display product details with sorting and filtering.
+{% endpromptcard %}
+{% promptcard Chat Integration %}
+#SyncfusionBlazorAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid?
+{% endpromptcard %}
+{% promptcard Advanced Grid Features %}
+#SyncfusionBlazorAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling
+{% endpromptcard %}
+{% promptcard Troubleshooting Grid Export %}
+#SyncfusionBlazorAssistant Why isn’t my Grid exporting to PDF and Excel correctly?
+{% endpromptcard %}
+{% promptcard Inline Editing %}
+#SyncfusionBlazorAssistant How do I enable inline editing for CRUD operations in the Grid?
+{% endpromptcard %}
+{% promptcard Custom Toolbar %}
+#SyncfusionBlazorAssistant Add custom toolbar buttons for PDF and Excel export in the Grid.
+{% endpromptcard %}
+{% promptcard Dynamic Column Configuration %}
+#SyncfusionBlazorAssistant How can I dynamically configure multicolumn layout with filtering and sorting?
+{% endpromptcard %}
+{% endpromptcards %}
+
+### Chart
+
+The Syncfusion Blazor Chart suite offers versatile visualization tools across various series types for insightful data representation.
+
+{% promptcards %}
+{% promptcard Local and Remote Data %}
+#SyncfusionBlazorAssistant How do I bind both local and remote data sources to a Syncfusion Chart?
+{% endpromptcard %}
+{% promptcard Range Selection %}
+#SyncfusionBlazorAssistant Show me how to enable range selection in a Syncfusion Blazor Chart.
+{% endpromptcard %}
+{% promptcard Chart Types Overview %}
+#SyncfusionBlazorAssistant What chart types are available in Syncfusion Blazor Chart and how to configure them?
+{% endpromptcard %}
+{% promptcard Markers and Data Labels %}
+#SyncfusionBlazorAssistant How can I display markers and data labels on a line chart?
+{% endpromptcard %}
+{% promptcard Annotations %}
+#SyncfusionBlazorAssistant Add custom annotations to highlight specific data points in a chart.
+{% endpromptcard %}
+{% promptcard Chart Export to Image or PDF %}
+#SyncfusionBlazorAssistant How do I export a Syncfusion Chart to PDF or image format?
+{% endpromptcard %}
+{% promptcard Print Support %}
+#SyncfusionBlazorAssistant Enable print functionality for a Syncfusion Blazor Chart component.
+{% endpromptcard %}
+{% promptcard Dynamic Chart with Remote Data %}
+#SyncfusionBlazorAssistant Create a chart that updates dynamically with remote API data.
+{% endpromptcard %}
+{% promptcard Multiple Series Types %}
+#SyncfusionBlazorAssistant How do I combine bar and line chart types in a single Syncfusion Chart?
+{% endpromptcard %}
+{% promptcard Troubleshooting Chart Data Binding %}
+#SyncfusionBlazorAssistant Why isn’t my remote data showing up in the Syncfusion Chart?
+{% endpromptcard %}
+{% promptcard Interactive Range Selector %}
+#SyncfusionBlazorAssistant Configure a range selector for zooming and filtering in a time-series chart.
+{% endpromptcard %}
+{% promptcard Custom Markers and Labels %}
+#SyncfusionBlazorAssistant Show me an example of customizing chart markers and data label styles.
+{% endpromptcard %}
+{% endpromptcards %}
+
+### Schedule
+
+The Syncfusion Blazor Schedule component helps manage events, resources, and timelines with powerful views and customization.
+
+{% promptcards %}
+{% promptcard Remote Data Binding %}
+#SyncfusionBlazorAssistant Bind the Schedule component to a remote API for dynamic event loading.
+{% endpromptcard %}
+{% promptcard CRUD Actions %}
+#SyncfusionBlazorAssistant Show me how to implement full CRUD operations in the Schedule component.
+{% endpromptcard %}
+{% promptcard Virtual Scrolling %}
+#SyncfusionBlazorAssistant Enable virtual scrolling for large event datasets in the Schedule view.
+{% endpromptcard %}
+{% promptcard Timezone Support %}
+#SyncfusionBlazorAssistant How can I configure timezone support in the Syncfusion Blazor Schedule?
+{% endpromptcard %}
+{% promptcard Export Schedule to PDF or Excel %}
+#SyncfusionBlazorAssistant Add export functionality to download the Schedule view as PDF or Excel.
+{% endpromptcard %}
+{% promptcard Timeline Header Rows %}
+#SyncfusionBlazorAssistant How do I customize timeline header rows in the Schedule component?
+{% endpromptcard %}
+{% promptcard Troubleshooting Schedule CRUD %}
+#SyncfusionBlazorAssistant Why aren’t my CRUD actions working correctly in the Schedule component?
+{% endpromptcard %}
+{% promptcard Local and Remote Data %}
+#SyncfusionBlazorAssistant Bind both local and remote event data to the Schedule component.
+{% endpromptcard %}
+{% promptcard Export and Timezone %}
+#SyncfusionBlazorAssistant Configure timezone-aware exporting for the Schedule view.
+{% endpromptcard %}
+{% endpromptcards %}
+
+### Kanban
+
+The Syncfusion Blazor Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows.
+
+{% promptcards %}
+{% promptcard Data Binding %}
+#SyncfusionBlazorAssistant How do I bind local or remote data to the Syncfusion Blazor Kanban board?
+{% endpromptcard %}
+{% promptcard Sorting %}
+#SyncfusionBlazorAssistant Enable sorting of cards within columns in the Kanban component.
+{% endpromptcard %}
+{% promptcard Swimlane View %}
+#SyncfusionBlazorAssistant Show me how to group Kanban cards using swimlane headers.
+{% endpromptcard %}
+{% promptcard Kanban Card Editing %}
+#SyncfusionBlazorAssistant How can I enable inline editing of Kanban cards?
+{% endpromptcard %}
+{% promptcard Virtualization %}
+#SyncfusionBlazorAssistant Configure virtualization for performance with large Kanban datasets.
+{% endpromptcard %}
+{% promptcard Localization %}
+#SyncfusionBlazorAssistant How do I localize labels and messages in the Kanban component?
+{% endpromptcard %}
+{% promptcard Drag and Drop %}
+#SyncfusionBlazorAssistant Enable drag-and-drop functionality for moving cards between columns.
+{% endpromptcard %}
+{% promptcard Sorting and Swimlane %}
+#SyncfusionBlazorAssistant Create a Kanban board with swimlane grouping and sortable cards.
+{% endpromptcard %}
+{% promptcard Editable Cards and Localization %}
+#SyncfusionBlazorAssistant Show me how to edit cards and apply localization in Kanban.
+{% endpromptcard %}
+{% promptcard Troubleshooting Kanban Drag and Drop %}
+#SyncfusionBlazorAssistant Why isn’t drag-and-drop working correctly in my Kanban board?
+{% endpromptcard %}
+{% promptcard Remote Data and Virtualization %}
+#SyncfusionBlazorAssistant Bind remote data to Kanban and enable virtualization for performance.
+{% endpromptcard %}
+{% promptcard Advanced Kanban Setup %}
+#SyncfusionBlazorAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop.
+{% endpromptcard %}
+{% endpromptcards %}
+
+### RichTextEditor
+
+The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features.
+
+{% promptcards %}
+{% promptcard Toolbar Configuration %}
+#SyncfusionBlazorAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor?
+{% endpromptcard %}
+{% promptcard Link Manipulation %}
+#SyncfusionBlazorAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content.
+{% endpromptcard %}
+{% promptcard Iframe Mode %}
+#SyncfusionBlazorAssistant How can I render the RichTextEditor inside an iframe for isolated styling?
+{% endpromptcard %}
+{% promptcard Undo and Redo %}
+#SyncfusionBlazorAssistant Enable undo and redo functionality in the RichTextEditor toolbar.
+{% endpromptcard %}
+{% promptcard Forms Integration %}
+#SyncfusionBlazorAssistant How do I integrate a Blazor form and validate input?
+{% endpromptcard %}
+{% promptcard Content Import and Export %}
+#SyncfusionBlazorAssistant Export RichTextEditor content to HTML or import existing HTML content.
+{% endpromptcard %}
+{% promptcard Advanced Toolbar %}
+#SyncfusionBlazorAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo.
+{% endpromptcard %}
+{% promptcard Iframe and Forms Support %}
+#SyncfusionBlazorAssistant Use RichTextEditor in iframe mode and bind it to a form for submission.
+{% endpromptcard %}
+{% promptcard Undo/Redo and Export %}
+#SyncfusionBlazorAssistant Enable undo/redo and export content to HTML in RichTextEditor.
+{% endpromptcard %}
+{% endpromptcards %}
+
+### Calendar
+
+The Syncfusion Blazor Calendar supports flexible date selection, localization, and custom rendering.
+
+{% promptcards %}
+{% promptcard Date Range Selection %}
+#SyncfusionBlazorAssistant How do I enable date range selection in the Syncfusion Blazor Calendar?
+{% endpromptcard %}
+{% promptcard Globalization Support %}
+#SyncfusionBlazorAssistant Configure the Calendar to support multiple cultures and languages.
+{% endpromptcard %}
+{% promptcard Multi-Date Selection %}
+#SyncfusionBlazorAssistant Show me how to allow users to select multiple dates in the Calendar.
+{% endpromptcard %}
+{% promptcard Islamic Calendar Support %}
+#SyncfusionBlazorAssistant How can I switch the Calendar to use the Islamic calendar system?
+{% endpromptcard %}
+{% promptcard Skip Months Feature %}
+#SyncfusionBlazorAssistant Enable skipping months in the Calendar navigation for faster browsing.
+{% endpromptcard %}
+{% promptcard Calendar Showing Other Month Days %}
+#SyncfusionBlazorAssistant How do I show days from adjacent months in the current Calendar view?
+{% endpromptcard %}
+{% promptcard Custom Day Cell Format %}
+#SyncfusionBlazorAssistant Customize the day cell format in the Calendar to show short weekday names.
+{% endpromptcard %}
+{% promptcard Calendar Highlighting Weekends %}
+#SyncfusionBlazorAssistant Highlight weekends in the Calendar with a different background color.
+{% endpromptcard %}
+{% promptcard Globalization and Islamic Calendar %}
+#SyncfusionBlazorAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization.
+{% endpromptcard %}
+{% promptcard Multi-Selection and Range %}
+#SyncfusionBlazorAssistant Enable both multi-date selection and range selection in the Calendar.
+{% endpromptcard %}
+{% promptcard Troubleshooting Calendar Date Range %}
+#SyncfusionBlazorAssistant Why isn’t my Calendar selecting the correct date range?
+{% endpromptcard %}
+{% promptcard Advanced Calendar Setup %}
+#SyncfusionBlazorAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights.
+{% endpromptcard %}
+{% endpromptcards %}
+
+## See also
+
+* [AI Coding Assistant Overview](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
+* [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server)
diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md
index 2390147e33..12226cc62a 100644
--- a/blazor/appbar/getting-started-with-web-app.md
+++ b/blazor/appbar/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor AppBar](https://www.s
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor AppBar** component in the app, open the NuGet package manage
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -270,7 +270,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AppBar/BlazorWebApp)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AppBar)
## See also
diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md
index 6eca854df2..97f0032a12 100644
--- a/blazor/autocomplete/getting-started-with-web-app.md
+++ b/blazor/autocomplete/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor AutoComplete](https:/
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor AutoComplete** component in the app, open the NuGet package
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -273,7 +273,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete/BlazorWebApp)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete)
## Binding data source
diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md
index 6c729647d7..b74630e9e9 100644
--- a/blazor/avatar/getting-started-with-web-app.md
+++ b/blazor/avatar/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Avatar](https://blazo
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Avatar** component in the app, open the NuGet package manage
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -55,11 +55,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -98,7 +98,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -110,11 +110,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -214,4 +214,4 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar/BlazorWebApp)
\ No newline at end of file
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar)
\ No newline at end of file
diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md
index f18e9de8fc..28dfc80af4 100644
--- a/blazor/badge/getting-started-with-web-app.md
+++ b/blazor/badge/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [`Blazor Badge`](https://blaz
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Badge** component in the app, open the NuGet package manager
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor components NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -55,11 +55,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -98,7 +98,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -110,11 +110,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -195,4 +195,4 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge/BlazorWebApp).
\ No newline at end of file
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge).
\ No newline at end of file
diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md
index d249f8071c..7c09986a25 100644
--- a/blazor/barcode/getting-started-with-web-app.md
+++ b/blazor/barcode/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section explains how to include the [Blazor Barcode](https://www.syncfusion
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Barcode** component in the app, open the NuGet package manag
If using the `WebAssembly or Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, use the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -254,7 +254,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Barcode/BlazorWebApp).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Barcode).
## Adding QR Generator control
diff --git a/blazor/blockeditor/appearance.md b/blazor/blockeditor/appearance.md
new file mode 100644
index 0000000000..7522641478
--- /dev/null
+++ b/blazor/blockeditor/appearance.md
@@ -0,0 +1,284 @@
+---
+layout: post
+title: Appearance in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn here all about Appearance with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Appearance in Blazor Block Editor component
+
+The Block Editor component provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.
+
+## Setting width and height
+
+You can specify the width and height for the Block Editor component using the `Width` and `Height` properties.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+// Or with specific pixel values
+
+
+```
+
+## Setting readonly mode
+
+You can utilize the `ReadOnly` property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+```
+
+## Customization using CSS Class
+
+You can use the `CssClass` property to customize the appearance of the Block Editor component.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+```
+
+The following example demonstrates the usage of `ReadOnly` and `CssClass` properties of the Block Editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
Appearance Configuration Demo
+
+ Toggle Readonly Mode
+ Apply Custom Theme
+
+
+
+ Current Status: @StatusMessage
+
+
+
+
@OutputMessage
+
+
+@code {
+ private SfBlockEditor? BlockEditorRef;
+
+ private bool IsReadonly { get; set; } = false;
+ private string CurrentTheme { get; set; } = "default";
+ private string StatusMessage { get; set; } = "Editable, Default Theme";
+ private string OutputMessage { get; set; } = "";
+ private string CssClasses => $"{CurrentTheme} {(IsReadonly ? "readonly-mode" : "")}".Trim();
+ private List Blocks => new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Appearance Configuration Demo" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "This demo showcases different appearance configurations including readonly mode and a custom CSS theme." }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 2 },
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Configured Custom Theme" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.BulletList,
+ Content = new List
+ {
+ new ContentModel { ContentType = ContentType.Text, Content = "Gradient background with modern styling" }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes."
+ }
+ }
+ }
+ };
+
+ private void ToggleReadonly()
+ {
+ IsReadonly = !IsReadonly;
+
+ UpdateStatus();
+ DisplayOutput($"Readonly mode {(IsReadonly ? "enabled" : "disabled")}. {(IsReadonly ? "Content is now view-only." : "Content is now editable.")}");
+ }
+
+ private void ApplyCustomTheme()
+ {
+ CurrentTheme = "custom-theme";
+ UpdateStatus();
+ DisplayOutput("Custom theme applied. The editor now features a gradient background with modern styling and hover effects.");
+ }
+
+ private void OnEditorFocus()
+ {
+ DisplayOutput("Editor focused. You can now type or edit content.");
+ }
+
+ private void OnEditorBlur()
+ {
+ DisplayOutput("Editor lost focus.");
+ }
+
+ protected override void OnInitialized()
+ {
+ UpdateStatus();
+ }
+
+ private void UpdateStatus()
+ {
+ string mode = IsReadonly ? "Readonly" : "Editable";
+ string theme = CurrentTheme == "default" ? "Default" : "Custom";
+ StatusMessage = $"{mode}, {theme} Theme";
+ }
+
+ private void DisplayOutput(string msg)
+ {
+ OutputMessage = msg;
+ StateHasChanged();
+ }
+}
+
+
+
+```
+
+
+
diff --git a/blazor/blockeditor/built-in-blocks/built-in-blocks.md b/blazor/blockeditor/built-in-blocks/built-in-blocks.md
new file mode 100644
index 0000000000..739ffa18c0
--- /dev/null
+++ b/blazor/blockeditor/built-in-blocks/built-in-blocks.md
@@ -0,0 +1,192 @@
+---
+layout: post
+title: Blocks in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn about Blocks with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Blocks in Blazor Block Editor component
+
+The Syncfusion Block Editor uses **Blocks** as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the `Blocks` property.
+
+## Blocks
+
+Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Callout` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
+
+You can configure blocks with various properties such as `ID`, `BlockType`, `Content` to create a rich, structured editor.
+
+## Block types
+
+The Block Editor supports multiple block types, each offering different formatting options and functionality:
+
+| Built-in Block Types | Description |
+|-----------------------------------------|-----------------------------------------------------------------------------|
+| Paragraph | Default block type for regular text content. |
+| Heading1 to Heading4 | Different levels of headings for document structure. |
+| Table | Block for displaying data in a tabular format with rows and columns. |
+| Checklist | Interactive to-do lists with checkable items. |
+| BulletList | Unordered lists with bullet points. |
+| NumberedList | Ordered lists with sequential numbering. |
+| Quote | Styled block for quotations. |
+| Callout | Highlighted block for important information. |
+| Divider | Horizontal separator line. |
+| CollapsibleParagraph and CollapsibleHeading1-4 | Content blocks that can be expanded or collapsed to show or hide their children. |
+| Image | Block for displaying images. |
+
+## Configure indent
+
+You can specify the indentation level of a block using the `Indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
+
+By default, the `Indent` property is set to `0`.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+@code {
+ private List BlockData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a paragraph with no indentation (indent: 0)"}},
+ Indent = 0
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has one level of indentation (indent: 1)"}},
+ Indent = 1
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This paragraph has two levels of indentation (indent: 2)"}},
+ Indent = 2
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Back to no indentation"}},
+ Indent = 0
+ }
+ };
+}
+
+```
+
+
+
+## Configure CSS Class
+
+You can apply custom styling to individual blocks using the `CssClass` property. This property accepts a string containing one or more CSS class names.
+
+Custom CSS classes allow you to define specialized styling for specific blocks in your editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+
+@code {
+ private List BlockData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Custom CSS Classes in Block Editor"}}
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "Default paragraph block"}}
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is an info block"}},
+ CssClass = "info-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a warning block"}},
+ CssClass = "warning-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a success block"}},
+ CssClass = "success-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a error block"}},
+ CssClass = "error-block"
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = {new ContentModel{ContentType = ContentType.Text, Content = "This is a custom font block"}},
+ CssClass = "custom-font"
+ }
+ };
+}
+
+
+
+```
+
+## Disable Keep format
+
+By default, the editor retains the formatting of pasted content (e.g., bold, italics, links). You can disable this by setting the `KeepFormat` property to `false`. When disabled, the editor primarily pastes content as plain text, regardless of the `AllowedStyles` configuration.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+
+```
+
+## Allowing plain text
+
+To paste content as plain text, stripping all HTML tags and inline styles, set the `PlainText` property to `true` in `BlockEditorPasteCleanup` tag directive. This ensures that only raw text is inserted, which is ideal for maintaining strict content consistency. By default, this property is `false`.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+
+```
+
+Below example demonstrates the usage of paste settings that disables the keep format and allows plain text.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor
+
+
+
+
+
+
+
+
Test Content to Copy and Paste:
+
+
+
Formatted Heading
+
+ This is a bold paragraph with
+ italic text and
+ underlined content.
+
+
+ Heavy text and
+ colored text
+
+
+
+
@output
+
+
+
+@code {
+ private SfBlockEditor blockEditor;
+ private string output = "";
+
+ private List blockData = new List()
+ {
+ new BlockModel { BlockType = BlockType.Paragraph }
+ };
+
+ private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
+ {
+ output = $"After Paste Event: Processed content length: {args.Content.Length} characters";
+ }
+
+ protected override void OnInitialized()
+ {
+ output = @"Paste Cleanup Settings Active:
+ - Keep Format: false
+ - Plain Text: true
+
+ Copy content from the test area above and paste it into the editor to see the cleanup in action.";
+ }
+}
+
+
+
+```
+
+### Events
+
+The Block Editor provides events to monitor and interact with the paste action.
+
+|Name|Args|Description|
+|---|---|---|
+|`PasteCleanupStarting`|PasteCleanupStartingEventArgs|Triggers before the content is pasted into the editor.|
+|`PasteCleanupCompleted`|PasteCleanupCompletedEventArgs|Triggers after the content is pasted into the editor.|
+
+Below example demonstrates how to configure above events in the editor.
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+
+
+@code {
+ private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
+ {
+ // Your actions here
+ }
+
+ private void HandleBeforePaste(PasteCleanupStartingEventArgs args)
+ {
+ // Your actions here
+ }
+}
+
+```
\ No newline at end of file
diff --git a/blazor/blockeditor/undo-redo.md b/blazor/blockeditor/undo-redo.md
new file mode 100644
index 0000000000..1f485936b4
--- /dev/null
+++ b/blazor/blockeditor/undo-redo.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Undo redo in Blazor Block Editor Component | Syncfusion
+description: Checkout and learn about Undo redo with Syncfusion Blazor Block Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: BlockEditor
+documentation: ug
+---
+
+# Undo redo in Blazor Block Editor component
+
+The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience.
+
+## Keyboard shortcuts
+
+| Action | Windows | Mac | Description |
+|------------|--------------|---------|-----------------|
+| Undo | Ctrl + Z | ⌘ + Z | Reverts the last action. |
+| Redo | Ctrl + Y | ⌘ + Y | Reapplies the last undone action. |
+
+## Configuring Undo/Redo stack
+
+The Block Editor stores a history of actions, allowing users to perform undo and redo operations. By default, it saves up to `30` actions. You can customize this limit using the `UndoRedoStack` property to control the maximum number of steps that can be undone or redone.
+
+The example below sets the undo/redo history limit to `20` actions.
+
+
+```cshtml
+
+@using Syncfusion.Blazor.BlockEditor;
+
+
+
+
+@code {
+ private List BlocksData = new List
+ {
+ new BlockModel
+ {
+ BlockType = BlockType.Heading,
+ Properties = new HeadingBlockSettings { Level = 1 },
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Undo/Redo Demo"
+ }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "Try adding new blocks or modifying content below:"
+ }
+ }
+ },
+ new BlockModel
+ {
+ BlockType = BlockType.Paragraph,
+ Content = new List
+ {
+ new ContentModel
+ {
+ ContentType = ContentType.Text,
+ Content = "1. Undo stack set to maximum 40 actions\n2. Press Ctrl+Z to undo\n3. Press Ctrl+Y to redo\n4. Actions include text edits, block moves, additions, deletions"
+ }
+ }
+ }
+ };
+}
+
+
+```
+
+
diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md
index 197482770f..202ce77690 100644
--- a/blazor/breadcrumb/getting-started-with-web-app.md
+++ b/blazor/breadcrumb/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Breadcrumb](https://w
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Breadcrumb** component in the app, open the NuGet package ma
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md
index 422c4955d3..20d2b59ed0 100644
--- a/blazor/bullet-chart/getting-started-with-web-app.md
+++ b/blazor/bullet-chart/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Bullet Chart](https:/
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Bullet Chart** component in the app, open the NuGet package
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -55,11 +55,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -98,7 +98,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -110,11 +110,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -259,7 +259,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart/BlazorWebApp).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart).
## Adding title
diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md
index 665dcc439f..fcc77ff99e 100644
--- a/blazor/button-group/getting-started-with-web-app.md
+++ b/blazor/button-group/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor ButtonGroup](https://
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor ButtonGroup** component in the app, open the NuGet package m
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -258,7 +258,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVftihITUHgzQAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup Component](./images/blazor-button-group-component.png)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ButtonGroup/BlazorWebApp).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ButtonGroup).
## See also
diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md
index ab969480be..2ffeaf1fbe 100644
--- a/blazor/button/getting-started-with-web-app.md
+++ b/blazor/button/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Button](https://www.s
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Button** component in the app, open the NuGet package manage
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -256,7 +256,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows how to render and configure the button.
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button/BlazorWebApp).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button).
## See also
diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md
index ababfebddb..819cb23560 100644
--- a/blazor/calendar/getting-started-with-web-app.md
+++ b/blazor/calendar/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Calendar](https://www
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Calendar** component in the app, open the NuGet package mana
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md
index cd2b850d72..9c1e423ef1 100644
--- a/blazor/calendar/special-dates.md
+++ b/blazor/calendar/special-dates.md
@@ -29,13 +29,15 @@ Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazo
public DateTime? CurrentDate { get; set; } = DateTime.Now;
public void CustomDates(RenderDayCellEventArgs args)
{
- var CurrentMonth = CurrentDate.Value.Month;
- if (args.Date.Month == CurrentMonth && (args.Date.Day == 7 || args.Date.Day == 14 || args.Date.Day == 24 || args.Date.Day == 29)) {
- args.CellData.ClassList += " personal-appointment";
- }
- if (args.Date.Month == CurrentMonth && (args.Date.Day == 3 || args.Date.Day == 11 || args.Date.Day == 17 || args.Date.Day == 22))
- {
- args.CellData.ClassList += " official-appointment";
+ if (args.CurrentView == "Month") {
+ var CurrentMonth = CurrentDate.Value.Month;
+ if (args.Date.Month == CurrentMonth && (args.Date.Day == 7 || args.Date.Day == 14 || args.Date.Day == 24 || args.Date.Day == 29)) {
+ args.CellData.ClassList += " personal-appointment";
+ }
+ if (args.Date.Month == CurrentMonth && (args.Date.Day == 3 || args.Date.Day == 11 || args.Date.Day == 17 || args.Date.Day == 22))
+ {
+ args.CellData.ClassList += " official-appointment";
+ }
}
}
public void OnChange(ChangedEventArgs args)
@@ -89,4 +91,6 @@ Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazo
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.png)" %}
+
+N> The `RenderDayCellEventArgs` includes a `CurrentView` property that identifies the active calendar view during rendering. Possible values are `Month`, `Year`, and `Decade`. Use this to apply view-specific logic within the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) handler. This property is useful for customizing the rendering of day cells based on the calendar's current view.
\ No newline at end of file
diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md
index 3f1af2d7e5..6b90132145 100644
--- a/blazor/card/getting-started-with-web-app.md
+++ b/blazor/card/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Card](https://www.syn
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Card** component in the app, open the NuGet package manager
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md
index 8a4b836fce..cefacef5bb 100644
--- a/blazor/carousel/getting-started-with-web-app.md
+++ b/blazor/carousel/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Carousel](https://www
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Carousel** component in the app, open the NuGet package mana
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md
index cbd7c30275..96787c9356 100644
--- a/blazor/chart/getting-started-with-web-app.md
+++ b/blazor/chart/getting-started-with-web-app.md
@@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor Chart](https://www.sy
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -35,7 +35,7 @@ To add the **Blazor Chart** component in the app, open the NuGet package manager
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -57,11 +57,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
diff --git a/blazor/chart/gradient.md b/blazor/chart/gradient.md
new file mode 100644
index 0000000000..92fe16ee65
--- /dev/null
+++ b/blazor/chart/gradient.md
@@ -0,0 +1,317 @@
+---
+layout: post
+title: Gradient in Blazor Charts Component | Syncfusion
+description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Syncfusion Blazor Charts component.
+platform: Blazor
+control: Chart
+documentation: ug
+---
+
+# Gradient in Blazor Charts Component
+
+Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
+
+- Linear gradient
+- Radial gradient
+
+Gradients can be applied to:
+
+- Series
+- Trendlines
+- Technical Indicators
+
+## Linear gradient
+
+A linear gradient blends colors along a straight path from a defined start point to an end point. Configure it by adding `ChartLinearGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `X1`, `Y1`, `X2`, and `Y2` properties. The color stop values such as `Offset`, `Color`, `Opacity`, `Lighten`, and `Brighten` are set using the `ChartGradientColorStop` property.
+
+In the `ChartLinearGradient`:
+```
+X1 - Sets the horizontal start position of the gradient (0 to 1).
+Y1 - Sets the vertical start position of the gradient (0 to 1).
+X2 - Sets the horizontal end position of the gradient (0 to 1).
+Y2 - Sets the vertical end position of the gradient (0 to 1).
+```
+
+In the `ChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
+- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
+
+### Series
+
+Apply a linear gradient to a series by adding `ChartLinearGradient` inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display monthly sales revenue by month using Column series *@
+
+
+
+
+
+
+ @* Series Linear Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class SalesPoint
+ {
+ public string Month { get; set; }
+ public double Amount { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new SalesPoint { Month = "Jan", Amount = 78 },
+ new SalesPoint { Month = "Feb", Amount = 88 },
+ new SalesPoint { Month = "Mar", Amount = 99 },
+ new SalesPoint { Month = "Apr", Amount = 92 },
+ new SalesPoint { Month = "May", Amount = 95 },
+ new SalesPoint { Month = "Jun", Amount = 102 },
+ new SalesPoint { Month = "Jul", Amount = 110 },
+ new SalesPoint { Month = "Aug", Amount = 105 }
+ };
+}
+
+```
+
+
+### Trendlines
+
+Apply a linear gradient to a trendline by adding `ChartLinearGradient` inside the target Trendline.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display orders processed by month using Spline series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Trendline Linear Gradient: applied to trendline stroke *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class OrdersPoint
+ {
+ public string Month { get; set; }
+ public double Orders { get; set; }
+ }
+
+ public List OrdersData = new ()
+ {
+ new OrdersPoint { Month = "Jan", Orders = 24 },
+ new OrdersPoint { Month = "Feb", Orders = 30 },
+ new OrdersPoint { Month = "Mar", Orders = 27 },
+ new OrdersPoint { Month = "Apr", Orders = 34 },
+ new OrdersPoint { Month = "May", Orders = 41 },
+ new OrdersPoint { Month = "Jun", Orders = 37 },
+ new OrdersPoint { Month = "Jul", Orders = 49 },
+ new OrdersPoint { Month = "Aug", Orders = 45 },
+ new OrdersPoint { Month = "Sep", Orders = 39 },
+ new OrdersPoint { Month = "Oct", Orders = 46 },
+ new OrdersPoint { Month = "Nov", Orders = 54 },
+ new OrdersPoint { Month = "Dec", Orders = 52 }
+ };
+}
+
+```
+
+
+### Technical Indicators
+
+Apply a linear gradient to a technical indicator by adding `ChartLinearGradient` inside the target Indicator.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display equity price by month using Candle series and EMA indicator *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* Indicator Linear Gradient: applied to the EMA indicator line *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class EMAChartData
+ {
+ public DateTime Date { get; set; }
+ public double Open { get; set; }
+ public double High { get; set; }
+ public double Low { get; set; }
+ public double Close { get; set; }
+ public double Volume { get; set; }
+ }
+
+ public List PriceSeries = new ()
+ {
+ new EMAChartData { Date = new DateTime(2025, 01, 01), Open = 103.9, High = 106.8, Low = 102.5, Close = 105.6, Volume = 182540000 },
+ new EMAChartData { Date = new DateTime(2025, 02, 01), Open = 105.2, High = 108.1, Low = 103.4, Close = 106.9, Volume = 176310000 },
+ new EMAChartData { Date = new DateTime(2025, 03, 01), Open = 106.7, High = 110.6, Low = 105.1, Close = 108.7, Volume = 189250000 },
+ new EMAChartData { Date = new DateTime(2025, 04, 01), Open = 108.9, High = 110.9, Low = 106.8, Close = 107.6, Volume = 171900000 },
+ new EMAChartData { Date = new DateTime(2025, 05, 01), Open = 107.8, High = 112.3, Low = 106.9, Close = 111.4, Volume = 196700000 },
+ new EMAChartData { Date = new DateTime(2025, 06, 01), Open = 111.2, High = 114.9, Low = 110.0, Close = 113.6, Volume = 205600000 },
+ new EMAChartData { Date = new DateTime(2025, 07, 01), Open = 113.5, High = 117.3, Low = 112.2, Close = 116.0, Volume = 213400000 },
+ new EMAChartData { Date = new DateTime(2025, 08, 01), Open = 116.1, High = 119.2, Low = 114.6, Close = 118.1, Volume = 221900000 },
+ new EMAChartData { Date = new DateTime(2025, 09, 01), Open = 117.9, High = 120.7, Low = 116.0, Close = 116.8, Volume = 198300000 },
+ new EMAChartData { Date = new DateTime(2025, 10, 01), Open = 116.7, High = 121.6, Low = 116.1, Close = 119.9, Volume = 234600000 },
+ new EMAChartData { Date = new DateTime(2025, 11, 01), Open = 120.2, High = 123.9, Low = 118.8, Close = 122.5, Volume = 226100000 }
+ };
+}
+
+```
+
+
+## Radial gradient
+
+A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding `ChartRadialGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using `ChartRadialGradient` properties. The color stop values such as `Offset`, `Color`, `Opacity`, `Lighten`, and `Brighten` are set using the `ChartGradientColorStop` property.
+
+In the `ChartRadialGradient`:
+```
+Cx - Sets the normalized horizontal center of the gradient (0 to 1).
+Cy - Sets the normalized vertical center of the gradient (0 to 1).
+Fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
+Fy - Sets the normalized vertical focal point (0 to 1).
+R - Sets the normalized radius of the gradient circle (0 to 1).
+```
+
+In the `ChartGradientColorStop`:
+- Offset - Specifies the position of the color stop along the gradient (0 to 100).
+- Color - Sets the color at the stop.
+- Opacity - Defines the transparency of the stop (0 to 1).
+- Lighten - Adjusts lightness at the stop. Positive values lighten the color; negative values darken it.
+- Brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it.
+
+### Series
+
+Apply a radial gradient to a series by adding `ChartRadialGradient` inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.
+
+```
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display monthly sales revenue by month using Column series *@
+
+
+
+
+
+
+ @* Series Radial Gradient: defines color stops for the entire series *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class SalesPoint
+ {
+ public string Month { get; set; }
+ public double Amount { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new SalesPoint { Month = "Jan", Amount = 78 },
+ new SalesPoint { Month = "Feb", Amount = 88 },
+ new SalesPoint { Month = "Mar", Amount = 99 },
+ new SalesPoint { Month = "Apr", Amount = 92 },
+ new SalesPoint { Month = "May", Amount = 95 },
+ new SalesPoint { Month = "Jun", Amount = 102 },
+ new SalesPoint { Month = "Jul", Amount = 110 },
+ new SalesPoint { Month = "Aug", Amount = 105 }
+ };
+}
+
+```
+
+
+N> Radial gradients can also be applied to Trendlines and Technical Indicators in the same way by placing a `ChartRadialGradient` with color stops inside the target `ChartTrendline` or `ChartIndicator`.
+
+## See also
+
+* [Appearance](./chart-appearance.md)
+* [Markers](./data-markers.md)
+* [Legend](./legend.md)
+* [Tooltip](./tool-tip)
+* [Technical Indicators](./technical-indicators.md)
+* [Trendlines](./trend-lines.md)
\ No newline at end of file
diff --git a/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png
new file mode 100644
index 0000000000..9df78ab8f9
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-candle-chart-exponential-moving-average-linear-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png
new file mode 100644
index 0000000000..1bf1f8a744
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-linear-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png
new file mode 100644
index 0000000000..eca1ea288a
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-column-chart-radial-gradient.png differ
diff --git a/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png
new file mode 100644
index 0000000000..418206b197
Binary files /dev/null and b/blazor/chart/images/gradient/blazor-spline-chart-linear-trendlines-linear-gradient.png differ
diff --git a/blazor/chart/images/legend/blazor-column-chart-legend-template.png b/blazor/chart/images/legend/blazor-column-chart-legend-template.png
new file mode 100644
index 0000000000..37c39a29ff
Binary files /dev/null and b/blazor/chart/images/legend/blazor-column-chart-legend-template.png differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png
new file mode 100644
index 0000000000..f2b24acd35
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-customized.png differ
diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png
new file mode 100644
index 0000000000..d1aa5944e5
Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip-default.png differ
diff --git a/blazor/chart/legend.md b/blazor/chart/legend.md
index a4042eb30b..0dd96c3f9c 100644
--- a/blazor/chart/legend.md
+++ b/blazor/chart/legend.md
@@ -678,6 +678,101 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
+## Legend Template
+
+Legend templates allow you to replace default legend icons and text with custom HTML or Blazor markup for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+
+To use, add a `LegendItemTemplate` inside any [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) you want to customize. The rendered content becomes the legend item and can be styled with CSS. Legend interactions (click to toggle series) remain unless [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+
+```
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the chart and configure essential features *@
+
+ @* Set category axis for country names *@
+
+
+ @* Show the legend and enable series toggle *@
+
+
+
+ @* Gold column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥇
+
+ Gold
+ Awarded for first place finishes
+ Total: @GoldTotal
+
+
+
+
+
+ @* Silver column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥈
+
+ Silver
+ Awarded for second place finishes
+ Total: @SilverTotal
+
+
+
+
+
+ @* Bronze column series *@
+
+ @* Custom legend with icon, label, and total count *@
+
+
+ 🥉
+
+ Bronze
+ Awarded for third place finishes
+ Total: @BronzeTotal
+
+
+
+
+
+
+
+
+@code {
+
+ public class ChartData
+ {
+ public string Country { get; set; }
+ public double Gold { get; set; }
+ public double Silver { get; set; }
+ public double Bronze { get; set; }
+ }
+
+ public List MedalDetails = new()
+ {
+ new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
+ new ChartData{ Country= "China", Gold=40, Silver=60, Bronze=55 },
+ new ChartData{ Country= "Japan", Gold=70, Silver=60, Bronze=50 },
+ new ChartData{ Country= "Australia",Gold=60, Silver=56, Bronze=40 },
+ new ChartData{ Country= "France", Gold=50, Silver=45, Bronze=35 },
+ new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
+ new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
+ new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ };
+
+ public int GoldTotal => (int)MedalDetails.Sum(m => m.Gold);
+ public int SilverTotal => (int)MedalDetails.Sum(m => m.Silver);
+ public int BronzeTotal => (int)MedalDetails.Sum(m => m.Bronze);
+}
+```
+
+
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
## See also
diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md
index 0f7a4009d3..7c05b4dc42 100644
--- a/blazor/chart/strip-line.md
+++ b/blazor/chart/strip-line.md
@@ -248,6 +248,192 @@ To create a stripline in a specific region with respect to a segment (segmented
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %}
+## Stripline tooltip
+
+Stripline tooltips provide additional contextual information on interaction with striplines in the chart. To display a tooltip on a stripline, add the **ChartStriplineTooltip** component inside the desired **ChartStripline** and set the **Enable** property to **true**. It is particularly useful for explaining the significance of specific ranges or thresholds marked by striplines.
+
+### Default stripline tooltip code example:
+
+Below is the simplest way to enable a stripline tooltip using default settings. The tooltip will display on interaction with the stripline.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display vehicle traffic by time using a Spline series. *@
+
+
+
+
+ @* Stripline: visual band marking Rush Hour on the X axis *@
+
+
+ @* Stripline Tooltip: shows 'Rush Hour' with band hover/tap *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class TrafficPoint
+ {
+ public DateTime Time { get; set; }
+ public double Vehicles { get; set; }
+ }
+
+ public List Traffic = new ()
+ {
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 06, 00, 00), Vehicles = 380 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 07, 00, 00), Vehicles = 820 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 08, 00, 00), Vehicles = 1200 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 09, 00, 00), Vehicles = 980 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 10, 00, 00), Vehicles = 650 },
+ new TrafficPoint { Time = new DateTime(2024, 01, 01, 11, 00, 00), Vehicles = 520 }
+ };
+}
+
+```
+
+
+
+### Tooltip customization properties
+
+The stripline tooltip offers comprehensive customization options through the following properties:
+
+- **Enable** - A boolean property that enables or disables the stripline tooltip. Default value is **false**.
+
+- **Header** - Defines the title text displayed at the top of the tooltip.
+
+- **Content** - Allows you to specify custom content for the tooltip body using a format string. The format supports token placeholders that are replaced with corresponding values at runtime. Supported tokens:
+ - **${stripline.text}** – The stripline label.
+ - **${stripline.start}** – The stripline start value.
+ - **${stripline.end}** – The stripline end value.
+ - **${axis.name}** – The axis name.
+ - **${stripline.segmentStart}** – The stripline segment start value (if applicable).
+ - **${stripline.segmentEnd}** – The stripline segment end value (if applicable).
+ - **${stripline.segmentAxisName}** – The stripline segment axis name (if applicable).
+ - **${stripline.size}** – The stripline size (if applicable).
+
+- **Fill** - Sets the background color of the tooltip. Accepts any valid CSS color value (hex, rgb, rgba, named colors).
+
+- **Opacity** - Controls the transparency level of the tooltip background. Accepts numeric values between 0 (completely transparent) and 1 (completely opaque). The default value is 0.75.
+
+- **ShowHeaderLine** - A boolean property that controls the visibility of the horizontal separator line between the tooltip header and content. Set to **true** to display the line or **false** to hide it.
+
+The **ChartStriplineTooltipTextStyle** component allows you to customize the appearance of text within the tooltip:
+
+- **Size** - Specifies the font size of the tooltip text. Accepts pixel values (e.g., "12px").
+
+- **Color** - Defines the text color. Accepts any valid CSS color value.
+
+- **FontFamily** - Sets the font family for the tooltip text. Accepts standard CSS font family values (e.g., "Arial", "Segoe UI", "Roboto").
+
+- **FontWeight** - Controls the thickness of the text.
+
+The **ChartStriplineTooltipBorder** component enables you to add and customize borders around the tooltip:
+
+- **Width** - Specifies the thickness of the tooltip border in pixels. Accepts numeric values. Default value is **0**.
+
+- **Color** - Defines the color of the tooltip border. Accepts any valid CSS color value.
+
+### Customized stripline tooltip code example:
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the Chart to display department revenue by quarter using Column and Spline series. *@
+
+
+
+
+
+
+
+
+
+
+ @* Stripline: Highlights the upper revenue target range from 95k to 110k with text style and border customization. *@
+
+
+
+
+ @* Stripline Tooltip: providing interactive context with customizatioon for the target bands over hover/tap *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public class RevenuePoint
+ {
+ public string Quarter { get; set; }
+ public double Revenue { get; set; }
+ }
+
+ public List SalesData = new ()
+ {
+ new RevenuePoint { Quarter = "Q1", Revenue = 78 },
+ new RevenuePoint { Quarter = "Q2", Revenue = 88 },
+ new RevenuePoint { Quarter = "Q3", Revenue = 99 },
+ new RevenuePoint { Quarter = "Q4", Revenue = 92 }
+ };
+
+ public List SupportData = new ()
+ {
+ new RevenuePoint { Quarter = "Q1", Revenue = 70 },
+ new RevenuePoint { Quarter = "Q2", Revenue = 83 },
+ new RevenuePoint { Quarter = "Q3", Revenue = 90 },
+ new RevenuePoint { Quarter = "Q4", Revenue = 85 }
+ };
+}
+
+```
+
+
+
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
## See also
diff --git a/blazor/chat-ui/events.md b/blazor/chat-ui/events.md
index dae839376e..8bce7a6b04 100644
--- a/blazor/chat-ui/events.md
+++ b/blazor/chat-ui/events.md
@@ -73,3 +73,140 @@ The [UserTyping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Interac
}
```
+
+## OnAttachmentUploadReady
+
+The `OnAttachmentUploadReady` event is triggered before the attached files upload begins in the Chat UI component.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+
+
+@code {
+
+ private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
+ private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";
+
+ private void OnAttachmentUploadReady(AttachmentUploadReadyEventArgs args)
+ {
+ // Your required action here
+ }
+}
+```
+
+## AttachmentUploadSuccess
+
+The `AttachmentUploadSuccess` event is triggered when the attached file is successfully uploaded in the Chat UI component.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+@code {
+
+ private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
+ private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";
+
+ private void AttachmentUploadSuccess(SuccessEventArgs args)
+ {
+ // Your required action here
+ }
+}
+
+```
+
+## AttachmentUploadFailed
+
+The `AttachmentUploadFailed` event is triggered when the attached file upload fails in the Chat UI component.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+@code {
+
+ private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
+ private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";
+
+ private void AttachmentUploadFailed(FailureEventArgs args)
+ {
+ // Your required action here
+ }
+}
+
+```
+
+## AttachmentRemoved
+
+The `AttachmentRemoved` event is triggered when an attached file is removed in the Chat UI component.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+@code {
+
+ private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
+ private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";
+
+ private void AttachmentRemoved(RemovingEventArgs args)
+ {
+ // Your required action here
+ }
+}
+
+```
+
+## AttachmentClick
+
+The `AttachmentClick` event is triggered when an attached file is clicked in the Chat UI component.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+
+
+
+
+
+
+
+@code {
+
+ private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
+ private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";
+
+ private void AttachmentClick(ChatAttachmentClickEventArgs args)
+ {
+ // Your required action here
+ }
+}
+
+```
diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md
index 3232999c79..72beda600a 100644
--- a/blazor/chat-ui/getting-started-webapp.md
+++ b/blazor/chat-ui/getting-started-webapp.md
@@ -26,7 +26,7 @@ To get started quickly with the Blazor Chat UI component, refer to the following
## Create a New Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -38,7 +38,7 @@ To add the **Blazor Chat UI** component to your app, open the NuGet package mana
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, the required packages can be installed using the Package Manager Console commands.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -61,11 +61,11 @@ N> Syncfusion® Blazor components are availa
## Create a New Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, to create a Blazor Web App with `Auto` interactive render mode, use the following commands:
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -105,7 +105,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -117,11 +117,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md
index b41bb8f338..f2fb0e854d 100644
--- a/blazor/check-box/getting-started-with-web-app.md
+++ b/blazor/check-box/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section explains how to include the [Blazor CheckBox](https://www.syncfusio
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor CheckBox** component, open the NuGet Package Manager in Visu
If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project.
-Alternatively, use the following Package Manager commands:
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md
index b81cf8644c..a0de05755b 100644
--- a/blazor/chip/getting-started-with-web-app.md
+++ b/blazor/chip/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor Chip](https://www.syn
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Chip** component in the app, open the NuGet package manager
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md
index 3202295f87..fd768bc764 100644
--- a/blazor/circular-gauge/getting-started-with-web-app.md
+++ b/blazor/circular-gauge/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor CircularGauge](https:
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor CircularGauge** component in the app, open the NuGet package
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md
index 71d321c71f..28931ebab8 100644
--- a/blazor/color-picker/getting-started-with-web-app.md
+++ b/blazor/color-picker/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor ColorPicker](https://
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor ColorPicker** component in the app, open the NuGet package m
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md
index bd5e985a46..c512f8e7f3 100644
--- a/blazor/combobox/getting-started-with-web-app.md
+++ b/blazor/combobox/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor ComboBox](https://www
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor ComboBox** component in the app, open the NuGet package mana
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/common/adding-script-references.md b/blazor/common/adding-script-references.md
index d2868302ec..dd954e659d 100644
--- a/blazor/common/adding-script-references.md
+++ b/blazor/common/adding-script-references.md
@@ -339,6 +339,10 @@ The following table lists components and their script file names.
Chart
sf-chart.min.js
+
+
CheckBox
+
sf-checkbox.min.js
+
AccumulationChart
sf-accumulation-chart.min.js
@@ -419,6 +423,10 @@ The following table lists components and their script file names.
Splitter
sf-splitter.min.js
+
+
Switch
+
sf-switch.min.js
+
Toast
sf-toast.min.js
diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md
index 1d8a1a7e20..12f9f5efde 100644
--- a/blazor/context-menu/getting-started-with-web-app.md
+++ b/blazor/context-menu/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor ContextMenu](https://
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor ContextMenu** component in the app, open the NuGet package m
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md
index 24989f8638..633b64579e 100644
--- a/blazor/dashboard-layout/getting-started-with-web-app.md
+++ b/blazor/dashboard-layout/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section describes how to include the Syncfusion [Blazor Dashboard Layout](
## Create a New Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor Dashboard Layout** component in the app, open the NuGet pack
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, the Package Manager Console can be used to install the required NuGet package
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a New Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md
index 6e8a9adf16..881f72f8c9 100644
--- a/blazor/data-form/getting-started-with-web-app.md
+++ b/blazor/data-form/getting-started-with-web-app.md
@@ -21,7 +21,7 @@ This section briefly explains about how to include [Blazor DataForm](https://www
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
@@ -33,7 +33,7 @@ To add the **Blazor DataForm** component in the app, open the NuGet package mana
If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-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-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa
## Prerequisites
-Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
{% tabs %}
{% highlight c# tabtitle=".NET CLI" %}
@@ -112,11 +112,11 @@ dotnet --version
## Create a Blazor Web App using .NET CLI
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
diff --git a/blazor/data/adaptors.md b/blazor/data/adaptors.md
index 8762e5984a..fe1265470a 100644
--- a/blazor/data/adaptors.md
+++ b/blazor/data/adaptors.md
@@ -11,138 +11,126 @@ documentation: ug
# Adaptors in Blazor DataManager Component
-Each data source or remote service uses different way for accepting request and sending back the response. The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) cannot anticipate every way a data source works. To tackle this problem the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses adaptor concept to communicate with the particular data source.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component provides a unified approach for interacting with diverse data sources in Blazor applications. Each data source or remote service may define unique **request** and **response** formats. To manage these variations, the `SfDataManager` uses an **adaptor** mechanism that translates data operations into a format compatible with the target service.
-* For local data sources, the role of the data adaptor is to query the object array based on the Query object and manipulate them.
+* **Local data sources**: An adaptor applies query operations such as **sorting**, **filtering**, and **paging** directly on an **in-memory collection**.
+* **Remote data sources**: An adaptor generates the required H**TTP requests** and processes the corresponding server **responses**.
-* For remote data source, the data adaptor is used to send the request that the server can understand which then processes the server response.
+The adaptor is configured using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component.
-The adaptor can be assigned using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
+**Supported Adaptors**
-## Json adaptor
+The `SfDataManager` component provides several built-in adaptors for integrating remote data services.
-The `JsonAdaptor` is used to query and manipulate object array.
+* **UrlAdaptor** – Base adaptor for remote data services.
+* **ODataAdaptor** – Integrates with services implementing the OData protocol.
+* **ODataV4Adaptor** – Supports OData v4 protocol for advanced query capabilities.
+* **WebApiAdaptor** – Works with Web API endpoints that support OData query options.
+* **GraphQLAdaptor** – Enables interaction with GraphQL services for queries and mutations.
+* **CustomAdaptor** – Allows custom implementations when built-in adaptors do not meet requirements.
-The following sample code demonstrates binding data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using `JsonAdaptor`,
+## UrlAdaptor
-```cshtml
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-@code{
- public class EmployeeData
- {
- public int EmployeeID { get; set; }
- public string Name { get; set; }
- public string Title { get; set; }
- }
-
- public EmployeeData[] Employees = new EmployeeData[]
- {
- new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" },
- new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" },
- new EmployeeData { EmployeeID = 3, Name = "Janet Leverling", Title = "Sales Representative" },
- new EmployeeData { EmployeeID = 4, Name = "Andrew Davolio", Title = "Inside Sales Coordinator" },
- new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" },
- new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" },
- new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" },
- new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinato" },
- new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" },
- new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" }
- };
-}
-```
-
-## Url adaptor
+The **UrlAdaptor** is the base adaptor for remote data services. It converts query operations into **HTTP requests** and processes the corresponding server **responses**. This adaptor is suitable for endpoints that do not implement specialized protocols such as **OData** or **GraphQL**.
+To configure the `UrlAdaptor`, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property.
-The `UrlAdaptor` acts as the base adaptor for interacting with remote data services. Most of the built-in adaptors are derived from the `UrlAdaptor`.
+**Key Points**
-The following sample code demonstrates binding data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using `UrlAdaptor`,
+* Acts as the **base adaptor** for most remote adaptors.
+* Converts query operations into **HTTP requests**.
+* Requires the server to return a **JSON** object with **result** and **count** properties.
+* Supports operations such as **paging**, **sorting**, and **filtering** through `query` parameters.
```cshtml
+
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
-
+
-
-
-
+
+
+
-@code{
+@code {
+
public class EmployeeData
{
public int EmployeeID { get; set; }
- public string Name { get; set; }
- public string Title { get; set; }
+ public string EmployeeName { get; set; }
+ public string Designation { get; set; }
}
}
-```
-N> The above mentioned URL is given for reference purposes. In that place, you can provide your service URL.
+```
-`UrlAdaptor` expects response as a JSON object with properties `result` and `count` which contains the collection of entities and the total number of records respectively.
+The server response must include two properties:
-The sample response object should be as follows,
+* **result** – A collection of entities.
+* **count** – The total number of records.
```
{
- "result": [{..}, {..}, {..}, ...],
+ "result": [{...}, {...}, {...}],
"count": 67
}
```
## OData adaptor
-[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The `ODataAdaptor` helps you to interact with OData service.
+The `ODataAdaptor` is designed for services that implement the [OData](https://www.odata.org/documentation/) protocol. It enables the `SfDataManager` component to send OData-compliant queries and process responses from an **OData** service.
-The following sample code demonstrates binding remote data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using OData service,
+Use this adaptor when integrating with endpoints that follow **OData** standards for data querying and manipulation. It automatically generates query parameters for operations such as **paging**, **sorting**, **filtering**, and **grouping**.
+
+To configure, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to `Adaptors.ODataAdaptor` and provide the OData service URL in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the `SfDataManager` component.
+
+**Key Points**
+
+* Implements the **OData** protocol for standardized data access.
+* Automatically generates **OData** query parameters for supported operations.
+* Requires the server to return a **JSON** object with **result** and **count** properties.
+* Ideal for services exposing **OData** endpoints.
```cshtml
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
-
-
-
+
+
-
-
-
+
+
+
-@code{
- public class EmployeeData
+@code {
+
+ public class OrderData
{
public int OrderID { get; set; }
- public string CustomerID { get; set; }
+ public string? CustomerID { get; set; }
public int EmployeeID { get; set; }
}
}
```
-N> By default, `ODataAdaptor` is used by DataManager.
-
## ODataV4 adaptor
-The ODataV4 is an improved version of OData protocols and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can also retrieve and consume OData v4 services. For more details on OData v4 Services, refer the [odata documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). You can use the `ODataV4Adaptor` to interact with ODataV4 service.
+The `ODataV4Adaptor` enables integration with services that implement the OData v4 protocol. It provides standardized communication between the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component and OData v4-compliant endpoints. This adaptor automatically generates query parameters for common data operations, reducing manual configuration.
+Use this adaptor when the remote service supports **OData v4** and requires advanced query capabilities such as **filtering**, **sorting**, and **paging**.
+
+To configure, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.ODataV4Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_ODataV4Adaptor) and provide the service URL in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the `SfDataManager` component.
-The following sample code demonstrates binding remote data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using ODataV4 service,
+**Key Points**
+
+* Implements OData v4 protocol for standardized data access.
+* Automatically generates query parameters for supported operations.
+* Requires the server to return a **JSON** object with **result** and **count** properties.
```cshtml
@using Syncfusion.Blazor
@@ -170,11 +158,11 @@ The following sample code demonstrates binding remote data to the DataGrid compo
## Web API adaptor
-You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
+The `WebApiAdaptor` is used to interact with Web API endpoints that support **OData query options**. It extends the functionality of the **ODataAdaptor**, enabling the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to send OData-formatted queries and process responses from Web API services.
-To enable OData query option for Web API, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options).
+Use this adaptor when the endpoint understands **OData** queries and returns data in a compatible format.
-The following sample code demonstrates binding remote data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using Web API service,
+To configure, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_WebApiAdaptor) and provide the service URL in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the `SfDataManager` component.
```cshtml
@using Syncfusion.Blazor
@@ -184,14 +172,15 @@ The following sample code demonstrates binding remote data to the DataGrid compo
-
-
-
-
+
+
+
+
-@code{
+@code {
+
public class Order
{
public int? OrderID { get; set; }
@@ -199,65 +188,78 @@ The following sample code demonstrates binding remote data to the DataGrid compo
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
+
}
```
-`WebApiAdaptor` expects JSON response from the server and the response object should contain properties `Items` and `Count` whose values are collection of entities and total count of the entities respectively.
-
-The sample response object should look like below.
+**Expected Server Response**
```csharp
+
{
- "Items": [{..}, {..}, {..}, ...],
- "Count": 830
+ "result": [{...}, {...}, {...}],
+ "count": 830
}
+
```
## GraphQL service binding
-GraphQL is a query language for APIs with which you can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from the GraphQL server. You can also perform CRUD and data operations like paging, sorting, filtering etc by sending the required arguments to the server.
+The `GraphQLAdaptor` enables integration with GraphQL services, allowing precise data retrieval and efficient operations. It supports **queries**, **mutations**, and common data operations such as **paging**, **sorting**, and **filtering** by sending the required arguments to the server.
### Fetching data from GraphQL service
-To bind GraphQL service data to grid, you have to provide the GraphQL query string by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Query) property of the [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html). Also you need to set the [ResolverName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_ResolverName) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html) to map the response. The GraphQLAdaptor expects response as a JSON object with properties of Result, Count and Aggregates which contains the collection of entities, total number of records and value of aggregates respectively. The GraphQL response should be returned in JSON format like { “data”: { … }} with query name as field.
+To bind data from a GraphQL service to the DataGrid:
-```cshtml
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Buttons
+* Configure the [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html) with:
-
+ * [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Query) – Defines the GraphQL query string.
+ * [ResolverName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_ResolverName) – Maps the response to the query.
-
+* Set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [Adaptors.GraphQLAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_GraphQLAdaptor).
-@code{
+The GraphQL response must return a JSON-formatted response with properties:
- SfDataManager DataManager { get; set; }
- public string Content = "Get Data";
+* **Result** – A collection of entities.
+* **Count** – Total number of records.
+* **Aggregates** – Aggregate values, if applicable.
- Query query = new Query().Skip(0).Take(10).RequiresCount();
+```cshtml
- private async Task ClickHandler()
- {
- // You can obtain the response here
- var data = await DataManager.ExecuteQueryAsync(query);
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
- //You can obtain collection from Result property
- var result = (data as DataResult).Result;
+
+
+
- //You can obtain count from Count property
- var count = (data as DataResult).Count;
- }
+
+
+
+
+
+
+
+
+@code {
- private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions
+ private GraphQLAdaptorOptions adaptorOptions = new GraphQLAdaptorOptions
{
+ // GraphQL query that accepts the DataManager request as an input variable
Query = @"
- query ordersData($dataManager: DataManagerRequestInput!){
+ query ordersData($dataManager: DataManagerRequestInput!) {
ordersData(dataManager: $dataManager) {
- count, result { OrderID, CustomerID, OrderDate, Freight } , aggregates
+ count,
+ result { OrderID, CustomerID, OrderDate, Freight },
+ aggregates
}
}",
+ // Resolver field name used in the GraphQL response under data.{ResolverName}
ResolverName = "OrdersData"
+
};
public class Order
@@ -268,11 +270,13 @@ To bind GraphQL service data to grid, you have to provide the GraphQL query stri
public double? Freight { get; set; }
}
}
+
```
+N> Replace sample URL with the actual service endpoint URL.
### Performing data operations
-The following code demonstrates the resolver function used in the GraphQL server to bind data and to perform data operations like paging, sorting, filtering etc.
+The `GraphQLAdaptor` translates DataManager operations into a GraphQL request using [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). Operations such as **paging**, **sorting**, **filtering**, and **searching** can be triggered through Grid UI interactions or programmatically using the `Query` API. The server resolver must consume `DataManagerRequest` and return a JSON-formatted response with **count**, **result**, and optionally **aggregates**.
```cshtml
public class GraphQLQuery
@@ -345,54 +349,77 @@ The following code demonstrates the resolver function used in the GraphQL server
### Performing CRUD operation using mutation
-You can perform the CRUD operations by setting the mutation queries in the [Mutation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html#Syncfusion_Blazor_Data_GraphQLAdaptorOptions_Mutation) property of [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html).
+The Syncfusion® Blazor DataGrid integrates with GraphQL services through `GraphQLAdaptor` to perform **Create**, **Update**, **Delete**, and optional **Batch** operations. Mutations are defined in `GraphQLAdaptorOptions.Mutation` and invoked automatically by Grid editing. The server must expose resolvers that accept mutation variables and return a JSON formatted response with properties representing the updated entity or collection.
-You have to set the Insert mutation query in [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert) property of Mutation in GraphQLAdaptorOptions. Similarly, you have to set the Update and Delete mutation queries in [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update) and [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete) properties of Mutation in `GraphQLAdaptorOptions` respectively.
+**Mutation Queries**
-The following variables are passed as a parameter to the mutation method written for **Insert** operation in server side.
+Each CRUD operation requires a specific mutation query:
-| Properties | Description |
+* [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Insert): Adds a new record.
+* [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Update): Modifies an existing record.
+* [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Delete): Removes a record.
+* [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch): Handles multiple operations (Insert, Update, and Delete) in a single request.
+
+**Insert mutation parameters**
+
+These parameters are passed to the mutation method for the `Insert` operation on the server:
+
+| Parameter | Description |
|--------|----------------|
-| record | The new record which is need to be inserted. |
-| index | Specifies the index at which the newly added record will be inserted. |
-| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
-| additionalParameters | An optional parameter that can be used to perform any operations. |
+| record | Represents the new record to be inserted. |
+| index | Specifies the position at which the record should be inserted. |
+| action | Indicates the type of operation (e.g., Add, Delete, Update). |
+| additionalParameters | Optional parameter for custom logic during the operation. |
-The following variables are passed as a parameter to the mutation method written for **Update** operation in server side.
+**Update mutation parameters**
-| Properties | Description |
+These parameters are passed to the mutation method for the `Update` operation on the server:
+
+| Parameter | Description |
|--------|----------------|
-| record | The new record which is need to be updated. |
-| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
-| primaryColumnName | Specifies the field name of the primary column. |
-| primaryColumnValue | Specifies the primary column value which is needs to be updated in the collection. |
-| additionalParameters | An optional parameter that can be used to perform any operations. |
+| record | Represents the updated record. |
+| action | Indicates the type of operation (e.g., Add, Delete, Update). |
+| primaryColumnName | Specifies the name of the primary key column. |
+| primaryColumnValue | Specifies the value of the primary key for the record to update. |
+| additionalParameters | Optional parameter for custom logic during the operation. |
+
+**Delete mutation parameters**
-The following variables are passed as a parameter to the mutation method written for **Delete** operation in server side.
+These parameters are passed to the mutation method for the **Delete** operation on the server:
-| Properties | Description |
+| Parameter | Description |
|--------|----------------|
-| primaryColumnValue | Specifies the primary column value which is needs to be removed from the collection. |
-| action | Indicates the type of operation being performed. When the same method is used for all CRUD actions, this argument serves to distinguish the action, such as **Add, Delete and Update** |
-| primaryColumnName | specifies the field name of the primary column. |
-| additionalParameters | An optional parameter that can be used to perform any operations. |
+| primaryColumnValue | Specifies the primary key value of the record to delete. |
+| action | Indicates the type of operation (e.g., Add, Delete, Update). |
+| primaryColumnName | Specifies the name of the primary key column. |
+| additionalParameters | Optional parameter for custom logic during the operation. |
```cshtml
+
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
-
+
+
-@code{
- private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions
+@code {
+ // GraphQL adaptor configuration
+ private GraphQLAdaptorOptions _adaptorOptions { get; set; } = new GraphQLAdaptorOptions
{
+ // Data query: passes DataManagerRequestInput ($dataManager) to the resolver
Query = @"
- query ordersData($dataManager: DataManagerRequestInput!){
+ query ordersData($dataManager: DataManagerRequestInput!) {
ordersData(dataManager: $dataManager) {
- count, result { OrderID, CustomerID, OrderDate, Freight } , aggregates
+ count,
+ result { OrderID, CustomerID, OrderDate, Freight },
+ aggregates
}
}",
+
+ // CRUD mutations: Insert, Update, Delete (Batch can be added if required)
Mutation = new GraphQLMutation
{
Insert = @"
@@ -401,12 +428,14 @@ The following variables are passed as a parameter to the mutation method written
OrderID, CustomerID, OrderDate, Freight
}
}",
+
Update = @"
- mutation update($record: OrderInput!, $action: String!, $primaryColumnName: String! , $primaryColumnValue: Int!, $additionalParameters: Any) {
+ mutation update($record: OrderInput!, $action: String!, $primaryColumnName: String!, $primaryColumnValue: Int!, $additionalParameters: Any) {
updateOrder(order: $record, action: $action, primaryColumnName: $primaryColumnName, primaryColumnValue: $primaryColumnValue, additionalParameters: $additionalParameters) {
OrderID, CustomerID, OrderDate, Freight
}
}",
+
Delete = @"
mutation delete($primaryColumnValue: Int!, $action: String!, $primaryColumnName: String!, $additionalParameters: Any) {
deleteOrder(primaryColumnValue: $primaryColumnValue, action: $action, primaryColumnName: $primaryColumnName, additionalParameters: $additionalParameters) {
@@ -414,6 +443,8 @@ The following variables are passed as a parameter to the mutation method written
}
}"
},
+
+ // Resolver mapping name used under data.{ResolverName}
ResolverName = "OrdersData"
};
@@ -425,75 +456,130 @@ The following variables are passed as a parameter to the mutation method written
public double? Freight { get; set; }
}
}
+
```
-The following code demonstrates the mutation methods used in the GraphQL server for CRUD operation.
+This configuration demonstrates the mutation methods implemented on the GraphQL server for performing CRUD operations.
```cshtml
- public class GraphQLMutation
+
+public class GraphQLMutation
+{
+ public Order CreateOrder(
+ Order order,
+ int index,
+ string action,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ {
+ // Defensive insert: clamp index within bounds
+ var list = GraphQLQuery.Orders;
+ var safeIndex = Math.Clamp(index, 0, list.Count);
+ list.Insert(safeIndex, order);
+ return order;
+ }
+
+ public Order UpdateOrder(
+ Order order,
+ string action,
+ string primaryColumnName,
+ int primaryColumnValue,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
{
- public Order CreateOrder(Order order, int index, string action,
- [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ var updatedOrder = GraphQLQuery.Orders.FirstOrDefault(x => x.OrderID == primaryColumnValue);
+ if (updatedOrder == null)
{
- GraphQLQuery.Orders.Insert(index, order);
+ // No matching entity; return the input or handle as needed (e.g., throw graph error)
return order;
}
- public Order UpdateOrder(Order order, string action, string primaryColumnName, int primaryColumnValue,
- [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
- {
- Order updatedOrder = GraphQLQuery.Orders.Where(x => x.OrderID == primaryColumnValue).FirstOrDefault();
- updatedOrder.OrderID = order.OrderID;
- updatedOrder.CustomerID = order.CustomerID;
- updatedOrder.Freight = order.Freight;
- updatedOrder.OrderDate = order.OrderDate;
- return updatedOrder;
- }
- public Order DeleteOrder(int primaryColumnValue, string action, string primaryColumnName,
- [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+
+ // Apply updates
+ updatedOrder.OrderID = order.OrderID;
+ updatedOrder.CustomerID = order.CustomerID;
+ updatedOrder.Freight = order.Freight;
+ updatedOrder.OrderDate = order.OrderDate;
+
+ return updatedOrder;
+ }
+
+ public Order DeleteOrder(
+ int primaryColumnValue,
+ string action,
+ string primaryColumnName,
+ [GraphQLType(typeof(AnyType))] IDictionary additionalParameters)
+ {
+ var deletedOrder = GraphQLQuery.Orders.FirstOrDefault(x => x.OrderID == primaryColumnValue);
+ if (deletedOrder != null)
{
- Order deletedOrder = GraphQLQuery.Orders.Where(x => x.OrderID == primaryColumnValue).FirstOrDefault();
GraphQLQuery.Orders.Remove(deletedOrder);
- return deletedOrder;
}
+ return deletedOrder;
}
+}
+
```
#### Batch editing
-The following sample code demonstrates performing **Batch** operation. You have to set the Batch mutation query in [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch) property of Mutation in `GraphQLAdaptorOptions`.
+Batch editing performs **Insert**, **Update**, and **Delete** operations in a single GraphQL request. Configuration is defined in the [Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLMutation.html#Syncfusion_Blazor_Data_GraphQLMutation_Batch) property of Mutation in [GraphQLAdaptorOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.GraphQLAdaptorOptions.html), and the server must expose a **batchUpdate** resolver that accepts the batch parameters and returns the updated collection.
+
+**Batch mutation parameters**
-The following variables are passed as a parameter to the mutation method written for **Batch** operation in server side.
+These parameters are passed to the mutation method for the **Batch** operation on the server:
-| Properties | Description |
+| Parameter | Description |
|--------|----------------|
-| changed | Specifies the collection of record to be updated. |
-| added | Specifies the collection of record to be inserted. |
-| deleted | Specifies the collection of record to be removed. |
+| changed | Collection of records to update. |
+| added | Collection of records to insert. |
+| deleted | Collection of records to remove. |
| action | Indicates the type of operation being performed. |
-| primaryColumnName | Specifies the field name of the primary column. |
-| additionalParameters | An optional parameter that can be used to perform any operations. |
-| dropIndex | Specifies the record position, from which new records will be added while performing drag and drop. |
+| primaryColumnName | Specifies the name of the primary key column. |
+| additionalParameters | Optional parameter for custom logic during the operation. |
+| dropIndex | Position where new records should be inserted during drag-and-drop. |
+
```cshtml
+
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
-
+
+
-@code{
- private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions
+@code {
+ // GraphQL adaptor configuration
+ private GraphQLAdaptorOptions _adaptorOptions { get; set; } = new GraphQLAdaptorOptions
{
Query = @"
- query ordersData($dataManager: DataManagerRequestInput!){
+ query ordersData($dataManager: DataManagerRequestInput!) {
ordersData(dataManager: $dataManager) {
- count, result { OrderID, CustomerID, OrderDate, Freight } , aggregates
+ count,
+ result { OrderID, CustomerID, OrderDate, Freight },
+ aggregates
}
}",
Mutation = new GraphQLMutation
{
Batch = @"
- mutation batch($changed: [OrderInput!], $added: [OrderInput!], $deleted: [OrderInput!], $action: String!, $primaryColumnName: String!, $additionalParameters: Any, $dropIndex: Int) {
- batchUpdate(changed: $changed, added: $added, deleted: $deleted, action: $action, primaryColumnName :$primaryColumnName, additionalParameters: $additionalParameters, dropIndex: $dropIndex) {
+ mutation batch(
+ $changed: [OrderInput!],
+ $added: [OrderInput!],
+ $deleted: [OrderInput!],
+ $action: String!,
+ $primaryColumnName: String!,
+ $additionalParameters: Any,
+ $dropIndex: Int
+ ) {
+ batchUpdate(
+ changed: $changed,
+ added: $added,
+ deleted: $deleted,
+ action: $action,
+ primaryColumnName: $primaryColumnName,
+ additionalParameters: $additionalParameters,
+ dropIndex: $dropIndex
+ ) {
OrderID, CustomerID, OrderDate, Freight
}
}"
@@ -501,6 +587,7 @@ The following variables are passed as a parameter to the mutation method written
ResolverName = "OrdersData"
};
+ // Entity model
public class Order
{
public int? OrderID { get; set; }
@@ -509,84 +596,115 @@ The following variables are passed as a parameter to the mutation method written
public double? Freight { get; set; }
}
}
+
```
-The following code demonstrates the mutation method used in the GraphQL server for **Batch** operation.
+This example shows how to implement the batch logic on the GraphQL server.
```cshtml
- public class GraphQLMutation
+
+public class GraphQLMutation
+{
+ public List BatchUpdate(
+ List? changed,
+ List? added,
+ List? deleted,
+ string action,
+ string primaryColumnName,
+ [GraphQLType(typeof(AnyType))] IDictionary? additionalParameters,
+ int? dropIndex)
{
- public List BatchUpdate(List? changed, List? added,
- List? deleted, string action, String primaryColumnName,
- [GraphQLType(typeof(AnyType))] IDictionary additionalParameters, int? dropIndex)
+ // Update existing records
+ if (changed != null && changed.Count > 0)
{
- if (changed != null && changed.Count > 0)
+ foreach (var changedOrder in changed)
{
- foreach (var changedOrder in (IEnumerable)changed)
+ var target = GraphQLQuery.Orders.FirstOrDefault(e => e.OrderID == changedOrder.OrderID);
+ if (target != null)
{
- Order order = GraphQLQuery.Orders.Where(e => e.OrderID == changedOrder.OrderID).FirstOrDefault();
- order.OrderID = changedOrder.OrderID;
- order.CustomerID = changedOrder.CustomerID;
- order.OrderDate = changedOrder.OrderDate;
- order.Freight = changedOrder.Freight;
+ // Primary key updates are typically avoided; update non-key fields
+ target.CustomerID = changedOrder.CustomerID;
+ target.OrderDate = changedOrder.OrderDate;
+ target.Freight = changedOrder.Freight;
}
}
- if (added != null && added.Count > 0)
+ }
+
+ // Insert new records
+ if (added != null && added.Count > 0)
+ {
+ if (dropIndex.HasValue)
{
- if (dropIndex != null)
- {
- //for Drag and Drop feature
- GraphQLQuery.Orders.InsertRange((int)dropIndex, added);
- }
- else {
- foreach (var newOrder in (IEnumerable)added)
- {
- GraphQLQuery.Orders.Add(newOrder);
- }
- }
+ var index = Math.Clamp(dropIndex.Value, 0, GraphQLQuery.Orders.Count);
+ GraphQLQuery.Orders.InsertRange(index, added);
}
- if (deleted != null && deleted.Count > 0)
+ else
{
- foreach (var deletedOrder in (IEnumerable)deleted)
+ GraphQLQuery.Orders.AddRange(added);
+ }
+ }
+
+ // Delete records
+ if (deleted != null && deleted.Count > 0)
+ {
+ foreach (var deletedOrder in deleted)
+ {
+ var target = GraphQLQuery.Orders.FirstOrDefault(e => e.OrderID == deletedOrder.OrderID);
+ if (target != null)
{
- GraphQLQuery.Orders.Remove(GraphQLQuery.Orders.Where(e => e.OrderID == deletedOrder.OrderID).FirstOrDefault());
+ GraphQLQuery.Orders.Remove(target);
}
}
- return GraphQLQuery.Orders;
}
+
+ return GraphQLQuery.Orders;
}
+}
+
```
### Configuration in GraphQL server application
-The following code is the configuration in GraphQL server application to set GraphQL query, mutation type and to enable CORS.
+The following configuration sets the GraphQL query and mutation types and enables CORS for a specific client origin in **Program.cs**.
-Program.cs
+{% tabs %}
+{% highlight c# tabtitle="~/Program.cs" %}
-```cshtml
+
+// Program.cs
var builder = WebApplication.CreateBuilder(args);
-//GraphQL resolver is defined in GraphQLQuery class and mutation methods are defined in GraphQLMutation class
-builder.Services.AddGraphQLServer().AddQueryType().AddMutationType();
+// GraphQL schema: register query and mutation types
+builder.Services
+ .AddGraphQLServer()
+ .AddQueryType()
+ .AddMutationType();
-//CORS is enabled to access the GraphQL server from the client application
+// CORS: allow a specific client origin to access this server
builder.Services.AddCors(options =>
{
- options.AddPolicy("AllowSpecificOrigin", builder =>
+ options.AddPolicy("AllowSpecificOrigin", cors =>
{
- builder.WithOrigins("https://xxxxxx")
- .AllowAnyHeader()
- .AllowAnyMethod()
- .AllowCredentials().Build();
+ cors.WithOrigins("https://xxxxxx")
+ .AllowAnyHeader()
+ .AllowAnyMethod()
+ .AllowCredentials();
});
});
-```
+var app = builder.Build();
-The following code demonstrates the **DataManagerRequest** class which is passed as an argument to the resolver function.
+app.UseCors("AllowSpecificOrigin");
+app.MapGraphQL();
-```cshtml
+{% endhighlight %}
+{% endtabs %}
+
+The **resolver** method accepts an instance of [DataManagerRequestInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html), which encapsulates query parameters from the DataManager request. These parameters are used to shape the response returned to the client application.
+
+{% tabs %}
+{% highlight cs tabtitle="DataManagerRequest.cs" %}
public class DataManagerRequest
{
[GraphQLName("Skip")]
@@ -712,69 +830,19 @@ The following code demonstrates the **DataManagerRequest** class which is passed
public List? predicates { get; set; }
}
-```
-
-### Note
-
-You can get the entire code in the [github](https://github.com/SyncfusionExamples/GraphQLAdaptor-Binding-Blazor-DataGrid) sample.
-
-## WebMethod adaptor
-
-You can use the `WebApiAdaptor` to interact with Web APIs created with OData endpoint. The `WebApiAdaptor` is extended from the `ODataAdaptor`. Hence to use `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with request.
-
-To enable OData query option for Web API, refer to this [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options).
-
-The following sample code demonstrates binding remote data to the DataGrid component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using Web method service,
-
-```cshtml
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public class EmployeeData
- {
- public int EmployeeID { get; set; }
- public string FirstName { get; set; }
- public string Designation { get; set; }
- public string Country { get; set; }
- }
-}
-```
-
-N> The above mentioned URL is given for reference purposes. In that place, you can provide your service URL.
-
-`WebMethodAdaptor` expects JSON response from the server and the response object should contain properties `result` and `count` whose values are collection of entities and total count of the entities respectively.
-
-The sample response object should look like below.
-
-```csharp
-{
- "result": [{..}, {..}, {..}, ...],
- "count": 830
-}
-```
+{% endhighlight %}
+{% endtabs %}
-N> The controller method’s data parameter name must be `value`.
+N> The complete implementation is available in the [GitHub](https://github.com/SyncfusionExamples/GraphQLAdaptor-Binding-Blazor-DataGrid) sample.
## Writing custom adaptor
-Sometimes the built-in adaptors do not meet your requirements and in such cases you can create your own adaptor.
+When the built-in adaptors do not meet specific requirements, a **custom adaptor** can be implemented.
-To create and use custom adaptor, follow the following steps,
+**Steps to create and use a custom adaptor**:
-* Create a class which extended from DataAdaptor class. DataAdaptor class will act as base class for your custom adaptor.
-* Override the desired method to achieve your requirement.
-* Assign the custom adaptor class to the **AdaptorInstance** property of SfDataManager component.
+1. Create a class that inherits from the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) base class.
+2. Override the required methods to implement the desired functionality.
+3. Assign the custom adaptor instance to the [AdaptorInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_AdaptorInstance) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [CustomAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor).
-You can refer to this [link](custom-binding) for more details on the working of custom adaptor.
+For detailed implementation guidance, refer to the [custom binding documentation](custom-binding).
diff --git a/blazor/data/custom-binding.md b/blazor/data/custom-binding.md
index eed7f3fc31..dd4d0f712f 100644
--- a/blazor/data/custom-binding.md
+++ b/blazor/data/custom-binding.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Custom Binding in Blazor DataManager Component | Syncfusion
-description: Checkout and learn here all about Custom Binding in Syncfusion Blazor DataManager component and more.
+title: Custom Binding in Blazor DataManager | Syncfusion
+description: Learn how to implement custom binding in Syncfusion Blazor DataManager for flexible data operations and CRUD integration with DataGrid.
platform: Blazor
control: DataManager
documentation: ug
@@ -11,213 +11,258 @@ documentation: ug
# Custom Binding in Blazor DataManager Component
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This is demonstrated below by implementing custom data binding and editing operations in the DataGrid component.
+Custom binding in the Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.htm) component provides a mechanism to implement custom logic for data retrieval and manipulation. It allows defining how data operations are executed by creating a [custom adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor) that overrides default behavior.
-For implementing custom data binding in DataGrid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor.
+Custom binding is applicable in scenarios where:
-The **DataAdaptor** abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
+* Data originates from sources that do not conform to standard adaptors, such as **REST APIs** or **in-memory collections**.
+* Complete control over data operations is required, including applying custom business rules during **CRUD** operations.
+* Built-in adaptors do not meet requirements for data transformation or filtering.
+
+The [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class is an abstract base that defines the interaction between the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component and an external data source. A custom adaptor derived from this class can override its virtual members to implement custom **data retrieval** and **CRUD** operations. These members include both synchronous and asynchronous methods such as **Read**, **Insert**, **Update**, **Remove**, and **BatchUpdate**, providing complete flexibility for integrating any data source while maintaining compatibility with Blazor [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) and other bound controls.
```csharp
public abstract class DataAdaptor
{
///
- /// Performs data Read operation synchronously.
+ /// Performs data read operation synchronously.
///
public virtual object Read(DataManagerRequest dataManagerRequest, string key = null)
///
- /// Performs data Read operation asynchronously.
+ /// Performs data read operation asynchronously.
///
public virtual Task