diff --git a/blazor/Release-Notes/34.2.2.md b/blazor/Release-Notes/34.2.2.md
new file mode 100644
index 0000000000..89da5ba102
--- /dev/null
+++ b/blazor/Release-Notes/34.2.2.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor 2026 Volume 2 SP Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v34.2.2 Release Notes
+
+{% include release-info.html date="August 05, 2026" version="v34.2.2" passed="99290" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.2.2 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 376 | 376 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 464 | 464 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 533 | 533 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6818 | 6818 | 0 | All Passed |
+| ChartWizard | 482 | 482 | 0 | All Passed |
+| ChatUI | 244 | 244 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 115 | 115 | 0 | All Passed |
+| ComboBox | 622 | 622 | 0 | All Passed |
+| DashboardLayout | 266 | 266 | 0 | All Passed |
+| DataForm | 548 | 548 | 0 | All Passed |
+| DataGrid | 11245 | 11245 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 17316 | 17316 | 0 | All Passed |
+| Dialog | 488 | 488 | 0 | All Passed |
+| DropdownList | 921 | 921 | 0 | All Passed |
+| Dropdowntree | 214 | 214 | 0 | All Passed |
+| FileManager | 3461 | 3461 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 9387 | 9387 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3745 | 3745 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 544 | 544 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 141 | 141 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1756 | 1756 | 0 | All Passed |
+| Mention | 156 | 156 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 1107 | 1107 | 0 | All Passed |
+| NumericTextbox | 467 | 467 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1846 | 1846 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 107 | 107 | 0 | All Passed |
+| Ribbon | 550 | 550 | 0 | All Passed |
+| RichTextEditor | 3398 | 3398 | 0 | All Passed |
+| Scheduler | 6832 | 6832 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 194 | 194 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 359 | 359 | 0 | All Passed |
+| Tabs | 1088 | 1088 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 685 | 685 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 421 | 421 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 236 | 236 | 0 | All Passed |
+| Tooltip | 135 | 135 | 0 | All Passed |
+| TreeGrid | 8138 | 8138 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/accordion/getting-started-with-server-app.md b/blazor/accordion/getting-started-with-server-app.md
index eeb5cfad69..db8b437a90 100644
--- a/blazor/accordion/getting-started-with-server-app.md
+++ b/blazor/accordion/getting-started-with-server-app.md
@@ -237,7 +237,7 @@ The following code explains how to initialize Blazor Accordion using header and
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLHNnsCsGnvTpBG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.webp)" %}
-N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) to learn how to render and configure the component.
+N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=fluent2) to learn how to render and configure the component.
## See also
diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md
index ebcbc9d3d4..d613856762 100644
--- a/blazor/accordion/getting-started-with-web-app.md
+++ b/blazor/accordion/getting-started-with-web-app.md
@@ -243,7 +243,7 @@ The following code explains how to initialize Blazor Accordion using header and
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhRtdCisHGggBvI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.webp)" %}
-N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) to learn how to render and configure the component.
+N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=fluent2) to learn how to render and configure the component.
## See also
diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md
index 75bd60ea2e..f8e25d43a9 100644
--- a/blazor/accordion/getting-started.md
+++ b/blazor/accordion/getting-started.md
@@ -229,7 +229,7 @@ The following code explains how to initialize Blazor Accordion using header and
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBxXxMWWmPLNxjK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.webp)" %}
-N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) to learn how to render and configure the component.
+N> You can refer to the [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) feature tour to explore its key features and capabilities. You can also browse the [Blazor Accordion examples](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=fluent2) to learn how to render and configure the component.
## See also
diff --git a/blazor/ai-assistview/ai-integrations/gemini-integration.md b/blazor/ai-assistview/ai-integrations/gemini-integration.md
index ea51b26be6..281d635b3e 100644
--- a/blazor/ai-assistview/ai-integrations/gemini-integration.md
+++ b/blazor/ai-assistview/ai-integrations/gemini-integration.md
@@ -9,7 +9,7 @@ documentation: ug
# Integrate Gemini AI With Blazor AI AssistView component
-The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs/quickstart) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences.
+The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs/get-started) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences.
## Prerequisites
@@ -19,8 +19,6 @@ Before starting, ensure you have the following:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.
-* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.
-
## Set Up the AI AssistView Component
Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.
@@ -37,17 +35,9 @@ Nuget\Install-Package Mscc.GenerativeAI
```
-* Install the `Markdig` nuget packages in the application.
-
-```bash
-
-Nuget\Install-Package Markdig
-
-```
-
## Generate API Key
-1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed.
+1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/api-keys) with a Google account or create a new account if needed.
2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button.
@@ -75,10 +65,8 @@ const string GeminiApiKey = 'Place your API key here';
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Navigations
@using Mscc.GenerativeAI
-@using Markdig
-// Initializes the AI Assist component
@@ -116,14 +104,9 @@ const string GeminiApiKey = 'Place your API key here';
var model = gemini.GenerativeModel(model: "gemini-2.5-flash"); // Select the Gemini model (update model name as needed)
var response = await model.GenerateContent(args.Prompt);
var responseText = response.Text;
- var pipeline = new MarkdownPipelineBuilder()
- .UseAdvancedExtensions()
- .UsePipeTables()
- .UseTaskLists()
- .Build();
// Add the response to the AIAssistView
await Task.Delay(1000); // Simulate delay as in original code
- args.Response = Markdown.ToHtml(responseText, pipeline);
+ args.Response = responseText;
}
catch (Exception ex)
{
diff --git a/blazor/ai-assistview/ai-integrations/lite-llm-integration.md b/blazor/ai-assistview/ai-integrations/lite-llm-integration.md
index cc18a302b2..65a321b7c0 100644
--- a/blazor/ai-assistview/ai-integrations/lite-llm-integration.md
+++ b/blazor/ai-assistview/ai-integrations/lite-llm-integration.md
@@ -28,14 +28,6 @@ Before starting, ensure you have the following:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.
-* **Markdig**: For parsing Markdown responses.
-
-```bash
-
-Nuget\Install-Package Markdig
-
-```
-
## Set Up the AI AssistView Component
Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.
@@ -76,7 +68,7 @@ In the following example:
* The [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event sends the user prompt to the LiteLLM proxy at `/v1/chat/completions`.
* The proxy uses the **model alias** defined in `config.yaml` (e.g., `openai/gpt-4o-mini`) and routes the request to the actual LLM provider.
-* The response is parsed as **Markdown** using the `Markdig` library and displayed in the AI AssistView component.
+* The response is parsed as **Markdown** and displayed in the AI AssistView component.
{% tabs %}
{% highlight razor %}
@@ -84,7 +76,6 @@ In the following example:
@rendermode InteractiveAuto
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Navigations
-@using Markdig
@using System.Text.Json
@using System.Text
@inject HttpClient Http
@@ -162,15 +153,9 @@ In the following example:
.GetProperty("content")
.GetString()?.Trim() ?? "No response received.";
- var pipeline = new MarkdownPipelineBuilder()
- .UseAdvancedExtensions()
- .UsePipeTables()
- .UseTaskLists()
- .Build();
-
// Add the response to the AIAssistView
await Task.Delay(1000); // Simulate delay as in original code
- args.Response = Markdown.ToHtml(responseText, pipeline);
+ args.Response = responseText;
}
catch (Exception ex)
{
diff --git a/blazor/ai-assistview/ai-integrations/ollama-llm-integration.md b/blazor/ai-assistview/ai-integrations/ollama-llm-integration.md
index aca49806d6..28463b8536 100644
--- a/blazor/ai-assistview/ai-integrations/ollama-llm-integration.md
+++ b/blazor/ai-assistview/ai-integrations/ollama-llm-integration.md
@@ -19,16 +19,10 @@ Before starting, ensure you have the following:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.
-* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses.
-
## Set Up the AI AssistView Component
Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.
-## Install Dependency
-
-To install the Markdig package by run `NuGet\Install-Package Markdig` in Package Manager Console.
-
## Configuring Ollama
Install Ollama for your operating system:
@@ -140,7 +134,6 @@ app.Run();
{% highlight razor %}
@rendermode InteractiveServer
-@using Markdig
@using Microsoft.Extensions.AI
@using Syncfusion.Blazor.Navigations
@@ -191,11 +184,6 @@ app.Run();
try
{
- var pipeline = new MarkdownPipelineBuilder()
- .UseAdvancedExtensions()
- .UsePipeTables()
- .UseTaskLists()
- .Build();
var messages = new List
{
@@ -216,7 +204,7 @@ app.Run();
if (buffer.Length - lastLenPushed >= updateRateChars)
{
- string html = Markdown.ToHtml(buffer.ToString(), pipeline);
+ string html = buffer.ToString();
await AIAssist.UpdateResponseAsync(html);
await AIAssist.ScrollToBottomAsync();
lastLenPushed = buffer.Length;
@@ -225,7 +213,7 @@ app.Run();
if (!responseStopped)
{
- string finalHtml = Markdown.ToHtml(buffer.ToString(), pipeline);
+ string finalHtml = buffer.ToString();
await AIAssist.UpdateResponseAsync(finalHtml);
await AIAssist.ScrollToBottomAsync();
}
diff --git a/blazor/ai-assistview/ai-integrations/openai-integration.md b/blazor/ai-assistview/ai-integrations/openai-integration.md
index 68184c87a9..f3302aed95 100644
--- a/blazor/ai-assistview/ai-integrations/openai-integration.md
+++ b/blazor/ai-assistview/ai-integrations/openai-integration.md
@@ -19,8 +19,6 @@ Before starting, ensure you have the following:
* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.
-* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code).
-
## Set Up the AI AssistView Component
Follow the [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met.
@@ -39,14 +37,6 @@ NuGet\Install-Package Azure.Core
```
-* Install the `Markdig` nuget packages in the application.
-
-```bash
-
-Nuget\Install-Package Markdig
-
-```
-
Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs.
## Configure Azure OpenAI
@@ -155,7 +145,6 @@ Modify the razor file to integrate the Azure OpenAI with the AI AssistView compo
{% highlight c# tabtitle="cs" %}
using System.Text.Json;
-using Markdig;
using System.Text.RegularExpressions;
namespace AIAssistView_AzureAI.Components.Services
@@ -201,7 +190,7 @@ namespace AIAssistView_AzureAI.Components.Services
if (choices.GetArrayLength() > 0)
{
var content = choices[0].GetProperty("message").GetProperty("content").GetString();
- var htmlContent = Markdown.ToHtml(content);
+ var htmlContent = content;
htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim();
// Collect each character to the results list before yielding
foreach (var chunk in htmlContent)
diff --git a/blazor/ai-assistview/how-to/integration-with-ai.md b/blazor/ai-assistview/how-to/integration-with-ai.md
index c01962ef52..c2453537ea 100644
--- a/blazor/ai-assistview/how-to/integration-with-ai.md
+++ b/blazor/ai-assistview/how-to/integration-with-ai.md
@@ -30,7 +30,6 @@ To add the required NuGet packages, use the NuGet Package Manager in Visual Stud
* `Azure.Identity`
* `Microsoft.Extensions.AI`
* `Microsoft.Extensions.AI.OpenAI`
-* `Markdig`
Alternatively, run the following commands in your terminal:
@@ -41,7 +40,6 @@ dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI
-dotnet add package Markdig
{% endhighlight %}
{% endtabs %}
@@ -90,7 +88,7 @@ var app = builder.Build();
The AI AssistView component is designed to integrate seamlessly with external AI services. When an `IChatClient` is registered via Microsoft.Extensions.AI, the component automatically uses it to process user prompts without additional component configuration.
-In the following example, user input is sent to the injected `IChatClient`. The AI model’s response is returned in Markdown, converted to HTML using the `Markdig` library, and rendered in the AI AssistView component.
+In the following example, user input is sent to the injected `IChatClient`. The AI model’s response is returned in Markdown, converted to HTML, and rendered in the AI AssistView component.
{% tabs %}
{% highlight razor %}
@@ -99,7 +97,6 @@ In the following example, user input is sent to the injected `IChatClient`. The
@using Syncfusion.Blazor.InteractiveChat
@using Microsoft.Extensions.AI
-@using Markdig;
@using System.Text.RegularExpressions;
@inject IChatClient ChatClient
@@ -113,8 +110,7 @@ In the following example, user input is sent to the injected `IChatClient`. The
{
// Send the user’s prompt to the AI model
var chatResponse = await ChatClient.GetResponseAsync(args.Prompt, new ChatOptions());
- // Convert markdown to HTML
- var htmlContent = Markdown.ToHtml(chatResponse.Text);
+ var htmlContent = chatResponse.Text;
// Clean up extra whitespace
htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim();
// Set the cleaned HTML as the response
diff --git a/blazor/ai-assistview/speech/text-to-speech.md b/blazor/ai-assistview/speech/text-to-speech.md
index 7dcca147f6..115bd39345 100644
--- a/blazor/ai-assistview/speech/text-to-speech.md
+++ b/blazor/ai-assistview/speech/text-to-speech.md
@@ -137,7 +137,7 @@ To enable the built-in Text-to-Speech functionality, add the `e-assist-audio` ic
## Configuring the speech settings
-You can use the [TextToSpeechSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_TextToSpeechSettings) tag to customize the speech synthesis behavior using the following available properties such as [Language](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AIAssistViewTextToSpeechSettings.html#Syncfusion_Blazor_InteractiveChat_AIAssistViewTextToSpeechSettings_Language), [SpeechPitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AIAssistViewTextToSpeechSettings.html#Syncfusion_Blazor_InteractiveChat_AIAssistViewTextToSpeechSettings_SpeechPitch), [SpeechRate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AIAssistViewTextToSpeechSettings.html#Syncfusion_Blazor_InteractiveChat_AIAssistViewTextToSpeechSettings_SpeechRate), [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AIAssistViewTextToSpeechSettings.html#Syncfusion_Blazor_InteractiveChat_AIAssistViewTextToSpeechSettings_Volume) and [Voice](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AIAssistViewTextToSpeechSettings.html#Syncfusion_Blazor_InteractiveChat_AIAssistViewTextToSpeechSettings_Voice).
+You can use the [TextToSpeechSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html) tag to customize the speech synthesis behavior using the following available properties such as [Language](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html#Syncfusion_Blazor_InteractiveChat_AssistViewTextToSpeech_Language), [SpeechPitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html#Syncfusion_Blazor_InteractiveChat_AssistViewTextToSpeech_SpeechPitch), [SpeechRate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html#Syncfusion_Blazor_InteractiveChat_AssistViewTextToSpeech_SpeechRate), [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html#Syncfusion_Blazor_InteractiveChat_AssistViewTextToSpeech_Volume) and [Voice](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewTextToSpeech.html#Syncfusion_Blazor_InteractiveChat_AssistViewTextToSpeech_Voice).
{% tabs %}
{% highlight c# tabtitle="razor" %}
diff --git a/blazor/ai-tools/release-notes.md b/blazor/ai-tools/release-notes.md
new file mode 100644
index 0000000000..afdc66b48c
--- /dev/null
+++ b/blazor/ai-tools/release-notes.md
@@ -0,0 +1,82 @@
+---
+layout: post
+title: Release Notes - Syncfusion Blazor AI Coding Assistants | Syncfusion
+description: Explore the release notes for Syncfusion Blazor AI Coding Assistants, covering MCP Server, Skills, and Agentic UI Builder updates across all versions.
+platform: Blazor
+control: Syncfusion Blazor AI Coding Assistants Release Notes
+documentation: ug
+---
+
+# Syncfusion Blazor AI Coding Assistants Release Notes
+
+This document provides information about the changes and new features included in each version of the Syncfusion Blazor AI Coding Assistants, including the [Syncfusion.Blazor.MCP](https://www.nuget.org/packages/Syncfusion.Blazor.MCP) MCP Server, Skills, Agentic UI Builder and so on.
+
+## MCP Server
+
+**(v1.0.0) - August 3, 2026**
+
+**Breaking Changes**
+
+- The [@syncfusion/blazor-assistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) npm package has been migrated to the [Syncfusion.Blazor.MCP](https://www.nuget.org/packages/Syncfusion.Blazor.MCP) .NET package. As part of this transition, [@syncfusion/blazor-assistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) package has been deprecated and will no longer receive updates.
+
+- The coding assistant tool identifier has been changed from **`sf_blazor_assistant`** to **`search_docs`** for a better naming convention.
+
+**(v3.0.0) - July 21, 2026**
+
+**Breaking Changes**
+
+- The **UI Builder** tool has been redefined as an agent-skill based experience and is no longer available within this server. For more information about the **Agentic UI Builder**, refer to this [link](https://www.syncfusion.com/explore/agentic-ui-builder).
+
+**(v2.0.0) – February 23, 2026**
+
+**Features**
+
+- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete Blazor applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
+- Agentic UI Builder sub-tools:
+ - **Layout Tool** (#sf_blazor_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
+ - **Component Tool** (#sf_blazor_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Blazor components.
+ - **Styling Tool** (#sf_blazor_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
+- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
+
+**Breaking Changes**
+
+- Renamed the coding assistant tool identifier from **`SyncfusionBlazorAssistant`** to **`sf_blazor_assistant`** for consistency, brevity, and improved user experience.
+
+**(v1.0.1) – February 10, 2026**
+
+**Features**
+
+- Updated package dependencies to resolve security vulnerabilities and enhance stability.
+
+**(v1.0.0) – December 16, 2025**
+
+**Features**
+
+- Added support for API key validation through file path reference.
+- Updated package dependencies and security standards for improved reliability and safety.
+
+**(v0.1.0) – October 10, 2025**
+
+**Features**
+
+- Initial release of AI Coding Assistant for Blazor components.
+- Provides context-aware assistance for building Blazor applications with Blazor components.
+- Includes support for component APIs, properties, and troubleshooting guidance.
+
+## Skills
+
+**Features**
+
+- Introduced [Agent Skills](https://www.syncfusion.com/explore/agent-skills) — a set of lightweight, modular capabilities that extend the AI Coding Assistants with specialized knowledge, including pre-defined instructions, best practices, and curated code patterns for building Blazor applications with Syncfusion components.
+- Each skill is defined in a simple, readable `SKILL.md` file that specifies the correct setup, required modules, current APIs and patterns, and what a valid implementation looks like for a given component.
+- Works as a standard, lightweight approach supported by modern AI development tools: install skills, the tool detects them, and the relevant skill is automatically applied to the user's prompt.
+
+## Agentic UI Builder
+
+**(v1.0.0) - Jun 5, 2026**
+
+**Features**
+
+- Evolved the [Agentic UI Builder](https://www.syncfusion.com/explore/agentic-ui-builder) architecture with Agent Skills, bringing implementation guidance directly into the project environment for more project-aware, context-grounded UI generation.
+- Made UI generation easier to customize and align with internal coding standards and conventions.
+- Streamlined the local development experience while preserving the same AI-assisted UI generation workflow developers already rely on.
\ No newline at end of file
diff --git a/blazor/appbar/getting-started-with-server-app.md b/blazor/appbar/getting-started-with-server-app.md
index 1feb8ab0c7..5d6cec4eaf 100644
--- a/blazor/appbar/getting-started-with-server-app.md
+++ b/blazor/appbar/getting-started-with-server-app.md
@@ -233,5 +233,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
+1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md
index 25d2b709d6..10b508483b 100644
--- a/blazor/appbar/getting-started-with-web-app.md
+++ b/blazor/appbar/getting-started-with-web-app.md
@@ -239,6 +239,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/autocomplete/data-binding.md b/blazor/autocomplete/data-binding.md
index c6833c8892..8b07a133a1 100644
--- a/blazor/autocomplete/data-binding.md
+++ b/blazor/autocomplete/data-binding.md
@@ -187,7 +187,7 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval for the AutoComplete.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval for the AutoComplete.
```csharp
public abstract class DataAdaptor
@@ -228,7 +228,7 @@ The following example shows remote data binding with offline mode enabled.
### Entity Framework
-Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the AutoComplete component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-orm/entityframework) in the AutoComplete component.
#### Create DBContext class
diff --git a/blazor/autocomplete/localization.md b/blazor/autocomplete/localization.md
index 2a86132191..ac298c7289 100644
--- a/blazor/autocomplete/localization.md
+++ b/blazor/autocomplete/localization.md
@@ -15,9 +15,9 @@ documentation: ug
### Enable RTL mode
-The direction can be switched to right-to-left by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) property to `true`. The default value is `false`. Enable RTL for right-to-left languages such as Arabic and Hebrew; the component layout and icon alignment will mirror automatically based on Syncfusion styles.
+The direction can be switched to right-to-left by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableRtl) property to `true`. The default value is `false`. Enable RTL for right-to-left languages such as Arabic and Hebrew; the component layout and icon alignment will mirror automatically based on Syncfusion styles.
-Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) as a boolean value that enables or disables rendering the component in a right-to-left direction.
+Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableRtl) as a boolean value that enables or disables rendering the component in a right-to-left direction.
{% highlight cshtml %}
diff --git a/blazor/autocomplete/multicolumn.md b/blazor/autocomplete/multicolumn.md
index 4e0e65ae44..17d2eac7eb 100644
--- a/blazor/autocomplete/multicolumn.md
+++ b/blazor/autocomplete/multicolumn.md
@@ -9,7 +9,7 @@ documentation: ug
# Multicolumn in AutoComplete
-Provide two or more visual columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_CssClass) property, and render the layout using an item template. This approach uses templates and CSS to display data in multiple columns; it is not a data grid and does not add grid features.
+Provide two or more visual columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property, and render the layout using an item template. This approach uses templates and CSS to display data in multiple columns; it is not a data grid and does not add grid features.
* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Use `ItemTemplate` to define the content for each row and arrange fields into multiple visual columns in the popup.
diff --git a/blazor/autocomplete/placeholder-and-floatlabel.md b/blazor/autocomplete/placeholder-and-floatlabel.md
index 3435d620a4..7eed171209 100644
--- a/blazor/autocomplete/placeholder-and-floatlabel.md
+++ b/blazor/autocomplete/placeholder-and-floatlabel.md
@@ -13,7 +13,7 @@ This section describes how to configure the placeholder and float label behavior
## Placeholder
-Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_Placeholder) property to display guidance text for the expected input value. In the following example, setting `Select a game` as the `Placeholder` value applies it to the input element’s placeholder attribute.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display guidance text for the expected input value. In the following example, setting `Select a game` as the `Placeholder` value applies it to the input element’s placeholder attribute.
{% highlight Razor %}
@@ -49,7 +49,7 @@ Apply a mandatory indicator (*) to the floating label by targeting the `.e-float
## FloatLabel
-Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_FloatLabelType) property to control how the `Placeholder` text floats above the AutoComplete. `FloatLabelType` applies only when `Placeholder` is set. The default value is `Never`.
+Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to control how the `Placeholder` text floats above the AutoComplete. `FloatLabelType` applies only when `Placeholder` is set. The default value is `Never`.
The floating label supports the following modes:
diff --git a/blazor/autocomplete/popup-setting.md b/blazor/autocomplete/popup-setting.md
index 65acee8800..4932921db8 100644
--- a/blazor/autocomplete/popup-setting.md
+++ b/blazor/autocomplete/popup-setting.md
@@ -11,7 +11,7 @@ documentation: ug
## Popup resize
-Can dynamically adjust the size of the popup in the AutoComplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_AllowResize) property. When enabled, users can resize the popup by dragging the resize handle to improve visibility and control.
+Can dynamically adjust the size of the popup in the AutoComplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowResize) property. When enabled, users can resize the popup by dragging the resize handle to improve visibility and control.
{% highlight Razor %}
@@ -24,7 +24,7 @@ Can dynamically adjust the size of the popup in the AutoComplete component by us
## Change the popup width
-Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupWidth) property. The default value of `PopupWidth` is `100%`. When unspecified, the popup width is based on the AutoComplete component’s width. This property accepts standard CSS units (for example, px, %, rem).
+Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of `PopupWidth` is `100%`. When unspecified, the popup width is based on the AutoComplete component’s width. This property accepts standard CSS units (for example, px, %, rem).
In the following sample, the `PopupWidth` is set as `300px`.
@@ -38,7 +38,7 @@ In the following sample, the `PopupWidth` is set as `300px`.
## Change the popup height
-Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupHeight) property. The default value of `PopupHeight` is `300px`. This property accepts standard CSS units (for example, px, %, rem).
+Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of `PopupHeight` is `300px`. This property accepts standard CSS units (for example, px, %, rem).
In the following sample, the `PopupHeight` is set as `200px`.
@@ -58,7 +58,7 @@ Defaults to `1000`.
## Show popup on initial loading
-Display the popup at initial load by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) event.
+Display the popup at initial load by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) event.
{% highlight Razor %}
diff --git a/blazor/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md
index d383290893..b646f73a87 100644
--- a/blazor/breadcrumb/breadcrumb-items.md
+++ b/blazor/breadcrumb/breadcrumb-items.md
@@ -44,7 +44,7 @@ The Breadcrumb items can be generated based on the current URL of the page when
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLRZdCsfeBjfFYF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.webp)" %}
-N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample.
+N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location?theme=fluent2) sample.
## Absolute URL
diff --git a/blazor/button/accessibility.md b/blazor/button/accessibility.md
index 6d1089da9a..b9631224e3 100644
--- a/blazor/button/accessibility.md
+++ b/blazor/button/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
# Accessibility in Blazor Button component
-The Blazor Button component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Button component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor Button component is outlined below.
@@ -38,7 +38,7 @@ The accessibility compliance for the Blazor Button component is outlined below.
## WAI-ARIA attributes
-The Blazor Button component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Button component:
+The Blazor Button component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) patterns to meet accessibility standards. The following ARIA attributes are used in the Blazor Button component:
| Attributes | Purpose |
| --- | --- |
@@ -46,20 +46,23 @@ The Blazor Button component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/
## Keyboard interaction
-The Blazor Button component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Button component.
+The Blazor Button component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and people who rely entirely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Button component.
| Windows | Mac | Actions |
| --- | --- | --- |
-| Space | Space | When the button has focus, pressing the space key changes the state of the button. |
+| Space | Space | When the button has focus, pressing the Space key activates the button. |
+| Enter | Enter | When the button has focus, pressing the Enter key activates the button. |
## Ensuring accessibility
-The Blazor Button component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Button component's accessibility compliance is verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
The accessibility compliance of the Blazor Button component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/button) in a new window to evaluate the accessibility of the Blazor Button component with accessibility tools.
-{% previewsample "https://ej2.syncfusion.com/accessibility/button.html" %}
+{% previewsample "https://blazor.syncfusion.com/accessibility/button" %}
## See also
-* [Accessibility Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* [Types and Styles in Blazor Button](types-and-styles.md)
+* [Native Events in Blazor Button](native-event.md)
\ No newline at end of file
diff --git a/blazor/button/how-to/create-a-block-button.md b/blazor/button/how-to/create-a-block-button.md
index d9734cbf05..a81bfef9c2 100644
--- a/blazor/button/how-to/create-a-block-button.md
+++ b/blazor/button/how-to/create-a-block-button.md
@@ -9,7 +9,7 @@ documentation: ug
# Create a Block Button in Blazor Button Component
-You can customize a Button into a Block Button that will span the entire width of its parent element. To create a Block Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-block`.
+You can customize a Button into a Block Button that spans the entire width of its parent element. To create a Block Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-block`.
```cshtml
@using Syncfusion.Blazor.Buttons
@@ -17,7 +17,12 @@ You can customize a Button into a Block Button that will span the entire width o
BLOCKBUTTONBLOCKBUTTONBLOCKBUTTON
-
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxDHsrBgmaYJkA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Block Button](./../images/blazor-block-button.webp)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxDHsrBgmaYJkA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Block Button](./../images/blazor-block-button.webp)" %}
+
+## See also
+
+* [Types and Styles in Blazor Button](../types-and-styles.md)
+* [Set the Disabled State in Blazor Button](set-the-disabled-state.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/how-to/repeat-button.md b/blazor/button/how-to/repeat-button.md
index 58448a4dad..dfc1ddd480 100644
--- a/blazor/button/how-to/repeat-button.md
+++ b/blazor/button/how-to/repeat-button.md
@@ -9,9 +9,9 @@ documentation: ug
# Repeat Button in Blazor Button Component
-The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state.
+A Repeat Button is a type of Button in which the click event is triggered at regular time intervals from the pressed state until the released state.
-The following example explains about how to achieve Repeat Button in mouse and touch events.
+The following example demonstrates how to implement a Repeat Button using both mouse and touch events.
```csharp
@@ -19,11 +19,11 @@ The following example explains about how to achieve Repeat Button in mouse and t
@using System.Timers
-
+
@EventName Event triggered - @Count times
-@code{
+@code {
public string EventName = "";
public int Count = 0;
private static Timer aTimer;
@@ -33,7 +33,7 @@ The following example explains about how to achieve Repeat Button in mouse and t
Count++;
InvokeAsync(StateHasChanged);
}
- public void mousedown()
+ public void OnMouseDown ()
{
aTimer = new System.Timers.Timer();
aTimer.Interval = 200;
@@ -41,7 +41,7 @@ The following example explains about how to achieve Repeat Button in mouse and t
aTimer.AutoReset = true;
aTimer.Start();
}
- public void mouseup()
+ public void OnMouseUp()
{
aTimer.Stop();
aTimer.Dispose();
@@ -57,4 +57,17 @@ The following example explains about how to achieve Repeat Button in mouse and t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHXHMBVAFlkGSe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Repeat Button in Blazor Button Component](./../images/blazor-button-with-repeat-button.webp)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHXHMBVAFlkGSe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Repeat Button in Blazor Button Component](./../images/blazor-button-with-repeat-button.webp)" %}
+
+## How it works
+
+1. On `OnMouseDown `, a `System.Timers.Timer` is started with a 200 ms interval.
+2. Each tick of the timer invokes `Click`, which increments the counter and updates the UI.
+3. On `OnMouseUp`, the timer is stopped and disposed.
+4. The component also implements `IDisposable` to ensure the timer is released when the component is removed from the page.
+
+## See also
+
+* [Native Events in Blazor Button](../native-event.md)
+* [Types and Styles in Blazor Button](../types-and-styles.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/how-to/right-to-left.md b/blazor/button/how-to/right-to-left.md
index 3d756b3f7f..fc2e39ffee 100644
--- a/blazor/button/how-to/right-to-left.md
+++ b/blazor/button/how-to/right-to-left.md
@@ -9,9 +9,9 @@ documentation: ug
# Right-To-Left in Blazor Button Component
-Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_EnableRtl) as true.
+The Blazor Button component has RTL support. This can be achieved by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_EnableRtl) property to `true`. When RTL is enabled, the icon position and content alignment are mirrored automatically.
-The following example illustrates how to enable right-to-left support in Button component.
+The following example illustrates how to enable right-to-left support in the Button component.
```cshtml
@using Syncfusion.Blazor.Buttons
@@ -25,4 +25,10 @@ The following example illustrates how to enable right-to-left support in Button
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhHjRWVVquoFAIg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Right to Left in Blazor Button](./../images/blazor-button-in-right-to-left.webp)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhHjRWVVquoFAIg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Right to Left in Blazor Button](./../images/blazor-button-in-right-to-left.webp)" %}
+
+## See also
+
+* [Types and Styles in Blazor Button](../types-and-styles.md)
+* [Accessibility in Blazor Button](../accessibility.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/how-to/set-the-disabled-state.md b/blazor/button/how-to/set-the-disabled-state.md
index 81aebd7106..b020d405fd 100644
--- a/blazor/button/how-to/set-the-disabled-state.md
+++ b/blazor/button/how-to/set-the-disabled-state.md
@@ -9,9 +9,9 @@ documentation: ug
# Set the Disabled State in Blazor Button Component
-Button component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_Disabled) property. To disable Button component, the `Disabled` property can be set as `true`.
+The Blazor Button component can be enabled or disabled by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_Disabled) property. To disable the Button component, set the `Disabled` property to `true`. The property is rendered as the standard HTML `disabled` attribute on the underlying button element.
-The following example demonstrates Button in `Disabled` state.
+The following example demonstrates a Button in the disabled state and a second Button that enables it on click.
```cshtml
@using Syncfusion.Blazor.Buttons
@@ -19,15 +19,20 @@ The following example demonstrates Button in `Disabled` state.
DisabledEnable
-@code{
+@code {
SfButton ButtonObj;
- private Boolean disable = true;
+ private bool disable = true;
public void click()
{
disable = false;
}
}
-
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBxjdCLhTjMClpL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Disable State in Blazor Button](./../images/blazor-button-disable-state.webp)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBxjdCLhTjMClpL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Disable State in Blazor Button](./../images/blazor-button-disable-state.webp)" %}
+
+## See also
+
+* [Create a Block Button in Blazor Button](create-a-block-button.md)
+* [Styles and Appearances in Blazor Button](../style-and-appearance.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/how-to/tooltip-for-button.md b/blazor/button/how-to/tooltip-for-button.md
index 15c9543d6a..c6a2ff178a 100644
--- a/blazor/button/how-to/tooltip-for-button.md
+++ b/blazor/button/how-to/tooltip-for-button.md
@@ -9,7 +9,7 @@ documentation: ug
# Tooltip for Button in Blazor Button Component
-Tooltip can be shown on Button hover and it can be achieved by title attribute.
+A tooltip can be shown on Button hover by using the native HTML `title` attribute. This provides a quick, browser-native tooltip with no additional setup.
```csharp
@@ -20,7 +20,14 @@ Tooltip can be shown on Button hover and it can be achieved by title attribute.
@code {
public string Content = "Button";
}
-
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVxNRiBhzZOVWOZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button displays ToolTip](./../images/blazor-button-tooltip.webp)" %}
+
+> For richer tooltips with custom content, open/close events, and multiple positions, use the [SfTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html) component and target the Button.
+
+## See also
+
+* [Native Events in Blazor Button](../native-event.md)
+* [Types and Styles in Blazor Button](../types-and-styles.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
diff --git a/blazor/button/native-event.md b/blazor/button/native-event.md
index 0e205c8b4b..20e93c0eaf 100644
--- a/blazor/button/native-event.md
+++ b/blazor/button/native-event.md
@@ -9,18 +9,20 @@ documentation: ug
# Native Events in Blazor Button Component
-You can define the native event using `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.
+You can bind native Blazor events to the Button component using the `@on{event}` directive. The event-specific data is available through the event arguments.
-The different event argument types for each event are,
+The following event argument types are used for each event category:
-* Focus Events - UIFocusEventArgs
-* Mouse Events - UIMouseEventArgs
-* Keyboard Events - UIKeyboardEventArgs
-* Touch Events – UITouchEventArgs
+* Focus Events - `FocusEventArgs`
+* Mouse Events - `MouseEventArgs`
+* Keyboard Events - `KeyboardEventArgs`
+* Touch Events - `TouchEventArgs`
+
+> All event argument types are from the `Microsoft.AspNetCore.Components.Web` namespace.
## List of native events supported
-The following native event support has been provided to the Button component:
+The following native events are supported by the Blazor Button component. Use the Blazor `@on{event}` directive syntax (for example, `@onclick`, `@onfocus`) to bind them.
| List of Native events | | | | |
| --- | --- | --- | --- | --- |
@@ -31,10 +33,11 @@ The following native event support has been provided to the Button component:
## How to bind click event to Button
-The `onclick` event fires when the user clicks the button with a mouse or activates it via keyboard. It is the most commonly used event for triggering actions such as form submission, navigation, or toggling UI state.
+The `onclick` event fires when the user clicks the button with a mouse or activates it via the keyboard (`Space` or `Enter`). It is the most commonly used event for triggering actions such as form submission, navigation, or toggling UI state.
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@@ -42,7 +45,7 @@ The `onclick` event fires when the user clicks the button with a mouse or activa
SfButton ToggleBtn;
public string Content = "Play";
- private void OnToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnToggleClick(MouseEventArgs args)
{
Content = (ToggleBtn.Content == "Play") ? "Pause" : "Play";
}
@@ -55,6 +58,7 @@ The `ondblclick` event fires when the user rapidly clicks the button twice in qu
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -62,7 +66,7 @@ The `ondblclick` event fires when the user rapidly clicks the button twice in qu
@code {
public string Message = "";
- private void OnDoubleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnDoubleClick(MouseEventArgs args)
{
Message = $"Double-clicked at position X: {args.ClientX}, Y: {args.ClientY}";
}
@@ -75,6 +79,7 @@ The `onmousedown` event fires the moment a mouse button is pressed down on the B
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -82,7 +87,7 @@ The `onmousedown` event fires the moment a mouse button is pressed down on the B
@code {
public string Message = "";
- private void OnMouseDown(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseDown(MouseEventArgs args)
{
Message = $"Mouse button {args.Button} pressed down.";
}
@@ -95,6 +100,7 @@ The `onmouseup` event fires when a mouse button is released after being pressed
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -102,7 +108,7 @@ The `onmouseup` event fires when a mouse button is released after being pressed
@code {
public string Message = "";
- private void OnMouseUp(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseUp(MouseEventArgs args)
{
Message = $"Mouse button {args.Button} released.";
}
@@ -115,6 +121,7 @@ The `onmouseover` event fires when the mouse pointer enters the Button element o
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -122,7 +129,7 @@ The `onmouseover` event fires when the mouse pointer enters the Button element o
@code {
public string Message = "";
- private void OnMouseOver(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseOver(MouseEventArgs args)
{
Message = "Mouse is over the button.";
}
@@ -135,6 +142,7 @@ The `onmouseout` event fires when the mouse pointer leaves the Button element or
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -142,7 +150,7 @@ The `onmouseout` event fires when the mouse pointer leaves the Button element or
@code {
public string Message = "";
- private void OnMouseOut(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseOut(MouseEventArgs args)
{
Message = "Mouse has left the button.";
}
@@ -155,6 +163,7 @@ The `onmousemove` event fires continuously as the mouse pointer moves over the B
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -162,7 +171,7 @@ The `onmousemove` event fires continuously as the mouse pointer moves over the B
@code {
public string Message = "";
- private void OnMouseMove(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseMove(MouseEventArgs args)
{
Message = $"Mouse position — X: {args.OffsetX:F0}, Y: {args.OffsetY:F0}";
}
@@ -175,6 +184,7 @@ The `onmouseenter` event fires when the mouse pointer enters the Button element.
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -182,7 +192,7 @@ The `onmouseenter` event fires when the mouse pointer enters the Button element.
@code {
public string Message = "";
- private void OnMouseEnter(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseEnter(MouseEventArgs args)
{
Message = "Mouse entered the button area.";
}
@@ -195,6 +205,7 @@ The `onmouseleave` event fires when the mouse pointer leaves the Button element.
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -202,7 +213,7 @@ The `onmouseleave` event fires when the mouse pointer leaves the Button element.
@code {
public string Message = "";
- private void OnMouseLeave(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnMouseLeave(MouseEventArgs args)
{
Message = "Mouse left the button area.";
}
@@ -215,14 +226,15 @@ The `oncontextmenu` event fires when the user right-clicks the Button element, t
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
-
+
@Message
@code {
public string Message = "";
- private void OnContextMenu(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
+ private void OnContextMenu(MouseEventArgs args)
{
Message = $"Context menu triggered at X: {args.ClientX}, Y: {args.ClientY}";
}
@@ -235,6 +247,7 @@ The `onkeydown` event fires when any key is pressed down while the Button has fo
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -242,7 +255,7 @@ The `onkeydown` event fires when any key is pressed down while the Button has fo
@code {
public string Message = "";
- private void OnKeyDown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
+ private void OnKeyDown(KeyboardEventArgs args)
{
Message = $"Key down: {args.Key} (Code: {args.Code})";
}
@@ -255,6 +268,7 @@ The `onkeypress` event fires when a key that produces a character value is press
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -262,7 +276,7 @@ The `onkeypress` event fires when a key that produces a character value is press
@code {
public string Message = "";
- private void OnKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
+ private void OnKeyPress(KeyboardEventArgs args)
{
Message = $"Key pressed: {args.Key}";
}
@@ -275,6 +289,7 @@ The `onkeyup` event fires when a key is released after being pressed while the B
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -282,7 +297,7 @@ The `onkeyup` event fires when a key is released after being pressed while the B
@code {
public string Message = "";
- private void OnKeyUp(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
+ private void OnKeyUp(KeyboardEventArgs args)
{
Message = $"Key released: {args.Key}";
}
@@ -291,10 +306,11 @@ The `onkeyup` event fires when a key is released after being pressed while the B
## How to bind focus event to Button
-The `onfocus` event fires when the Button receives focus, either through a mouse click or keyboard navigation (e.g., `Tab` key). It is used to highlight the button, display hints, or trigger focus-related UI changes.
+The `onfocus` event fires when the Button receives focus, either through a mouse click or keyboard navigation (for example, the `Tab` key). It is used to highlight the button, display hints, or trigger focus-related UI changes.
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -302,7 +318,7 @@ The `onfocus` event fires when the Button receives focus, either through a mouse
@code {
public string Message = "";
- private void OnFocus(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+ private void OnFocus(FocusEventArgs args)
{
Message = "Button is focused.";
}
@@ -315,6 +331,7 @@ The `onblur` event fires when the Button loses focus, typically when the user cl
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -322,7 +339,7 @@ The `onblur` event fires when the Button loses focus, typically when the user cl
@code {
public string Message = "";
- private void OnBlur(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+ private void OnBlur(FocusEventArgs args)
{
Message = "Button lost focus.";
}
@@ -335,6 +352,7 @@ The `onfocusin` event fires when the Button or any of its child elements receive
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -342,7 +360,7 @@ The `onfocusin` event fires when the Button or any of its child elements receive
@code {
public string Message = "";
- private void OnFocusIn(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+ private void OnFocusIn(FocusEventArgs args)
{
Message = "Focus moved into the button (focusin).";
}
@@ -355,6 +373,7 @@ The `onfocusout` event fires when the Button or any of its child elements loses
```csharp
@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
@Message
@@ -362,9 +381,41 @@ The `onfocusout` event fires when the Button or any of its child elements loses
@code {
public string Message = "";
- private void OnFocusOut(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
+ private void OnFocusOut(FocusEventArgs args)
{
Message = "Focus moved out of the button (focusout).";
}
}
-```
\ No newline at end of file
+```
+
+## How to bind touch events to Button
+
+The `ontouchstart` and `ontouchend` events fire when the user touches and releases the Button on a touch-enabled device. Use the `TouchEventArgs` type to access touch-specific data such as the list of changed touches.
+
+```csharp
+@using Syncfusion.Blazor.Buttons
+@using Microsoft.AspNetCore.Components.Web
+
+
+
@Message
+
+@code {
+ public string Message = "";
+
+ private void OnTouchStart(TouchEventArgs args)
+ {
+ Message = $"Touch started with {args.Touches.Length} touch point(s).";
+ }
+
+ private void OnTouchEnd(TouchEventArgs args)
+ {
+ Message = $"Touch ended with {args.ChangedTouches.Length} changed touch point(s).";
+ }
+}
+```
+
+## See also
+
+* [Types and Styles in Blazor Button](types-and-styles.md)
+* [Accessibility in Blazor Button](accessibility.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/style-and-appearance.md b/blazor/button/style-and-appearance.md
index dcbc96e30e..c99f865827 100644
--- a/blazor/button/style-and-appearance.md
+++ b/blazor/button/style-and-appearance.md
@@ -9,24 +9,25 @@ documentation: ug
# Styles and Appearances in Blazor Button Component
-To modify the Button appearance, you need to override the default CSS of Button component. Find the list of CSS classes and its corresponding section in Button component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+To modify the Button appearance, you need to override the default CSS of the Button component. The following table lists the available CSS classes and their corresponding section in the Button component. You can also create your own custom theme for the controls using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
-|CSS Class | Purpose of Class |
-|-----|----- |
-|.e-btn|To customize the button.|
-|.e-btn:hover|To customize the button on hover.|
-|.e-btn:focus|To customize the button on focus.|
-|.e-btn:active|To customize the button on active.|
+| CSS Class | Purpose of Class |
+| --- | --- |
+| .e-btn | To customize the button. |
+| .e-btn:hover | To customize the button on hover. |
+| .e-btn:focus | To customize the button on focus. |
+| .e-btn:active | To customize the button on active. |
+| .e-btn:disabled | To customize the button in the disabled state. |
## Customizing the appearance of button
-Use the following CSS to customize the background color of button while clicking, hovering and focusing.
+Use the following CSS to customize the background color of the button while clicking, hovering, and focusing.
```cshtml
@using Syncfusion.Blazor.Buttons
-CUSTOM
+CUSTOM
-
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrdZHCVVKwTFEJD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrdZHCVVKwTFEJD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif)" %}
+
+## See also
+
+* [Types and Styles in Blazor Button](types-and-styles.md)
+* [Accessibility in Blazor Button](accessibility.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md
index 823b1a12b0..7e6f671db4 100644
--- a/blazor/button/types-and-styles.md
+++ b/blazor/button/types-and-styles.md
@@ -34,12 +34,11 @@ The Blazor Button has the following predefined styles that can be defined using
WarningDangerLink
-
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhxDxMVVgeLgsiF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button Component with different Styles](./images/blazor-button-with-different-style.webp)" %}
-N> Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers.
+N> Predefined Button styles provide only a visual indication; therefore, define the Button content to convey meaning to assistive technology users such as screen readers.
## Button types
@@ -93,7 +92,7 @@ The primary button is styled with background color and it is used to represent a
### Toggle Button
-A toggle Button allows you to change between the two states. The Button is active in toggled state and can be recognized through the `e-active class`. The functionality of the toggle Button is handled by [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event. To create a toggle Button, set the [IsToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IsToggle) property to true. In the following code snippet, the toggle Button text changes to play/pause based on the state of the Button with the use of OnClick event.
+A Toggle Button allows you to toggle between two states. The Button is active in the toggled state and can be recognized through the `e-active` CSS class. The functionality of the Toggle Button is handled by the [`@onclick`](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling) event. To create a Toggle Button, set the [IsToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IsToggle) property to `true`. In the following code snippet, the Toggle Button text changes to Play/Pause based on the state of the Button.
```csharp
@@ -156,21 +155,33 @@ The Button can have an icon to provide the visual representation of the action.
content: '\e77b';
}
-
```
+The [`IconPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IconPosition) property accepts the following values from the [`IconPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IconPosition) enum:
+
+* `Left` - Places the icon to the left of the Button content (default).
+* `Right` - Places the icon to the right of the Button content.
+* `Top` - Places the icon above the Button content.
+* `Bottom` - Places the icon below the Button content.
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrHDRCFrVtZElQa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with Icon](./images/blazor-button-icon.webp)" %}
## Button size
-The two types of Button sizes are default and small. To change the size of the default Button to small Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-small`.
+The two types of Button sizes are default and small. To change the size of the default Button to a small Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass) property to `e-small`.
```cshtml
@using Syncfusion.Blazor.Buttons
SMALLNORMAL
-
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrdNdMLLUHbxlMP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with different Size](./images/blazor-button-with-different-size.webp)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrdNdMLLUHbxlMP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with different Size](./images/blazor-button-with-different-size.webp)" %}
+
+## See also
+
+* [Styles and Appearances in Blazor Button](style-and-appearance.md)
+* [Native Events in Blazor Button](native-event.md)
+* [Accessibility in Blazor Button](accessibility.md)
+* [Blazor Button API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html)
\ No newline at end of file
diff --git a/blazor/chat-ui/bot-integrations/integration-with-bot-dialogflow.md b/blazor/chat-ui/bot-integrations/integration-with-bot-dialogflow.md
index 131e012c77..eedb2ca868 100644
--- a/blazor/chat-ui/bot-integrations/integration-with-bot-dialogflow.md
+++ b/blazor/chat-ui/bot-integrations/integration-with-bot-dialogflow.md
@@ -9,13 +9,13 @@ documentation: ug
# Integrate Google Dialogflow with Blazor Chat UI component
-The Chat UI component integrates with [Google Dialogflow](https://cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your Blazor applications. The component acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses.
+The Chat UI component integrates with [Google Dialogflow](https://docs.cloud.google.com/dialogflow/docs) to enable advanced conversational AI features in your Blazor applications. The component acts as a user interface for a support bot, where user prompts are sent to the Dialogflow service via API calls, providing natural language understanding and context-aware responses.
## Prerequisites
Before starting, ensure you have the following:
-* **Google Account**: To access [Google Dialogflow](https://cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/).
+* **Google Account**: To access [Google Dialogflow](https://docs.cloud.google.com/dialogflow/docs) and [Google Cloud Console](https://console.cloud.google.com/welcome/new).
* **Chat UI**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed.
diff --git a/blazor/chip/customization.md b/blazor/chip/customization.md
index fa846b7ff3..af19f12d17 100644
--- a/blazor/chip/customization.md
+++ b/blazor/chip/customization.md
@@ -188,7 +188,7 @@ The following code example demonstrates how to customize the layout and design o
125k posts
- #PhotoOfTheDay
+ #PhotoOfTheDay#TechNews
diff --git a/blazor/chip/getting-started-with-server-app.md b/blazor/chip/getting-started-with-server-app.md
index 70db15630c..04e9cc7bc4 100644
--- a/blazor/chip/getting-started-with-server-app.md
+++ b/blazor/chip/getting-started-with-server-app.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with Blazor Chips Component in Blazor Server App
-This section briefly explains how to include the [Blazor Chips](https://www.syncfusion.com/blazor-components/blazor-chip) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include the [Blazor Chips](https://www.syncfusion.com/blazor-components/blazor-chips) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
## Create a new Blazor Server App
diff --git a/blazor/color-picker/accessibility.md b/blazor/color-picker/accessibility.md
index dedf7d557e..d05cac6503 100644
--- a/blazor/color-picker/accessibility.md
+++ b/blazor/color-picker/accessibility.md
@@ -39,7 +39,7 @@ The accessibility compliance for the Blazor Color Picker component is outlined b
## WAI-ARIA attributes
-The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component:
+The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/about/groups/ariawg/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component:
| Attributes | Purpose |
| --- | --- |
diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md
index 5af407727f..c09967e302 100644
--- a/blazor/combobox/cascading.md
+++ b/blazor/combobox/cascading.md
@@ -41,4 +41,4 @@ In the following example, the ComboBox lists countries, and textboxes display th
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLxZdLUKDDGkuiV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.webp)" %}
-N> [View the cascading ComboBox demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
\ No newline at end of file
+N> [View the cascading ComboBox demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=fluent2).
\ No newline at end of file
diff --git a/blazor/combobox/data-binding.md b/blazor/combobox/data-binding.md
index fb7c15295f..00025e8e87 100644
--- a/blazor/combobox/data-binding.md
+++ b/blazor/combobox/data-binding.md
@@ -230,7 +230,7 @@ Use the [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adapt
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the ComboBox 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 can be utilized for implementing customize data binding and editing operations in the ComboBox component.
For implementing custom data binding in the ComboBox, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
@@ -273,7 +273,7 @@ To avoid a server request for every action, preloaded all data at initialization
### Entity Framework
-Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the ComboBox component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-orm/entityframework) in the ComboBox component.
#### Create DBContext class
diff --git a/blazor/combobox/events.md b/blazor/combobox/events.md
index 53b951fc2f..ce0139fa97 100644
--- a/blazor/combobox/events.md
+++ b/blazor/combobox/events.md
@@ -527,6 +527,6 @@ The `Opened` event triggers when the popup opens and is visible.
```
## See also
-* [How to pass an extra parameter to Blazor ComboBox ValueChange handler?](https://www.syncfusion.com/kb/13138/how-to-pass-an-extra-parameter-to-blazor-combobox-valuechange-handler)
+* [How to pass an extra parameter to Blazor ComboBox ValueChange handler?](https://support.syncfusion.com/kb/article/11554/how-to-pass-an-extra-parameter-to-blazor-combobox-valuechange-handler)
N> ComboBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/context-menu/accessibility.md b/blazor/context-menu/accessibility.md
index ced9901f0f..98fe2bba25 100644
--- a/blazor/context-menu/accessibility.md
+++ b/blazor/context-menu/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
# Accessibility in Blazor ContextMenu Component
-The Blazor ContextMenu component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor ContextMenu component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor ContextMenu component is outlined below.
@@ -39,14 +39,14 @@ The accessibility compliance for the Blazor ContextMenu component is outlined be
## WAI-ARIA attributes
-The Blazor ContextMenu component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ContextMenu component:
+The Blazor ContextMenu component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ContextMenu component:
-| Attributes | Purpose |
-| --- | --- |
-| `role` | Indicates ContextMenu component popup as `menu`, and the popup items as `menuitem`. |
-| `aria-haspopup` | Indicates the availability and type of interactive popup element. |
-| `aria-expanded` | Indicates whether the subtree can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. |
-| `aria-label` | Indicates the menu item text. |
+| Attributes | Purpose | Example Value |
+| --- | --- | --- |
+| `role` | Indicates the ContextMenu component popup as `menu`, and the popup items as `menuitem`. | `role="menu"` (popup), `role="menuitem"` (item) |
+| `aria-haspopup` | Indicates the availability and type of interactive popup element. | `aria-haspopup="true"` |
+| `aria-expanded` | Indicates whether the subtree is currently expanded or collapsed. | `aria-expanded="true"` / `aria-expanded="false"` |
+| `aria-label` | Provides an accessible name for the menu item when the visible text is not sufficient. | `aria-label="Cut"` |
## Keyboard interaction
@@ -58,12 +58,12 @@ The Blazor ContextMenu component followed the [keyboard interaction](https://www
| Enter | Enter | Selects the focused item. |
| ↑ | ↑ | Navigates up or to the previous menu item. |
| ↓ | ↓ | Navigates down or to the next menu item. |
-| ← | ← | Close the current sub menu and navigates to the parent menu. |
-| → | → | Navigates and open the next sub menu. |
+| ← | ← | Closes the current sub menu and navigates to the parent menu. |
+| → | → | Navigates and opens the next sub menu. |
## Ensuring accessibility
-The Blazor ContextMenu component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor ContextMenu component's accessibility levels are ensured through [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
The accessibility compliance of the Blazor ContextMenu component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/context-menu) in a new window to evaluate the accessibility of the Blazor ContextMenu component with accessibility tools.
diff --git a/blazor/context-menu/customizing-and-multilevel-nesting.md b/blazor/context-menu/customizing-and-multilevel-nesting.md
index 8b202cee77..df77cd7ae0 100644
--- a/blazor/context-menu/customizing-and-multilevel-nesting.md
+++ b/blazor/context-menu/customizing-and-multilevel-nesting.md
@@ -9,7 +9,7 @@ documentation: ug
# Customizing and Multilevel Nesting in Blazor ContextMenu Component
-## Customizing Context Menu Items
+## Customizing ContextMenu Items
To customize [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-context-menu) items in your application, set your customized template using [MenuTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuTemplates-1.html). In the following example, the Context Menu has been rendered with customized Context Menu items.
@@ -18,7 +18,6 @@ To customize [Blazor Context Menu](https://www.syncfusion.com/blazor-components/
@using Syncfusion.Blazor.Navigations
Right click/Touch hold to open the ContextMenu
-
@@ -31,7 +30,6 @@ To customize [Blazor Context Menu](https://www.syncfusion.com/blazor-components/
-
-@code{
-
-}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htrxDHWaJxaUfFjA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-items.webp)" %}
-### Customizing Context Menu items using CssClass
+## Customizing ContextMenu items using CssClass
-The Context Menu items can be customized by using the `CssClass` property. In the following sample, the menu items are customized by adding new styles.
+The ContextMenu items can be customized by using the `CssClass` property. In the following sample, the menu items are customized by adding new styles.
```cshtml
@@ -97,7 +92,7 @@ The Context Menu items can be customized by using the `CssClass` property. In th
## Multilevel nesting
-The Multiple level nesting supports in Context Menu. It can be achieved by mapping the [MenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItems.html) property inside the parent [MenuItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html). In the below sample, three level nesting of Context Menu is provided.
+Multiple level nesting is supported in the ContextMenu. It can be achieved by mapping the [MenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItems.html) property inside the parent [MenuItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html). In the following sample, a three-level nesting of ContextMenu is demonstrated.
```cshtml
@using Syncfusion.Blazor.Navigations
diff --git a/blazor/context-menu/getting-started-with-server-app.md b/blazor/context-menu/getting-started-with-server-app.md
index 38d272c7ca..486cbd7f5c 100644
--- a/blazor/context-menu/getting-started-with-server-app.md
+++ b/blazor/context-menu/getting-started-with-server-app.md
@@ -239,5 +239,5 @@ N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Gett
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
diff --git a/blazor/context-menu/how-to/bind-menu-events.md b/blazor/context-menu/how-to/bind-menu-events.md
index 2ef7665cb3..adf8fb2cf1 100644
--- a/blazor/context-menu/how-to/bind-menu-events.md
+++ b/blazor/context-menu/how-to/bind-menu-events.md
@@ -7,9 +7,21 @@ control: Context Menu
documentation: ug
---
-# Bind Context Menu Events in Blazor ContextMenu Component
+# Bind Events in the Blazor ContextMenu Component
-To bind the menu event in the context menu [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_ItemSelected) is used and the event is triggered when the item in the context menu is selected.
+To bind a menu event in the ContextMenu, the [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_ItemSelected) event is used and is triggered when an item in the ContextMenu is selected.
+
+The following table lists the events exposed by `MenuEvents`.
+
+| Event | Description |
+| --- | --- |
+| [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_ItemSelected) | Triggered when a ContextMenu item is selected. |
+| [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_OnOpen) | Triggered before the ContextMenu opens (root and sub menus). |
+| [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_Opened) | Triggered after the ContextMenu is fully opened. |
+| [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_OnClose) | Triggered before the ContextMenu closes. |
+| [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEvents-1.html#Syncfusion_Blazor_Navigations_MenuEvents_1_Closed) | Triggered after the ContextMenu is fully closed. |
+
+The handler receives a [MenuEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuEventArgs-1.html) object that exposes properties such as `Item`, `Event`, `Name`, and `ParentItem`.
```cshtml
diff --git a/blazor/context-menu/how-to/data-binding.md b/blazor/context-menu/how-to/data-binding.md
index 9bb6412b4c..bf604768e3 100644
--- a/blazor/context-menu/how-to/data-binding.md
+++ b/blazor/context-menu/how-to/data-binding.md
@@ -9,7 +9,17 @@ documentation: ug
# Data Binding in Blazor ContextMenu Component
-To bind local data source to the Context Menu, menu items are populated from data source and mapped to `Items` property. In the following example, custom data with different data type is mapped to `Items` property.
+To bind a local data source to the ContextMenu, menu items are populated from the data source and mapped to the `Items` property. In the following example, data of different types is mapped to the `Items` property.
+
+When using `MenuFieldSettings`, the following properties are available to map fields from your data model to the ContextMenu:
+
+| Property | Description |
+| --- | --- |
+| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_Text) | Maps to the `Text` of the menu item. |
+| [ParentId](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_ParentId) | Maps to the parent item identifier (used for hierarchical data). |
+| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_IconCss) | Maps to the icon CSS class of the menu item. |
+| [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_Url) | Maps to the navigation URL of the menu item. |
+| [Children](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuFieldSettings.html#Syncfusion_Blazor_Navigations_MenuFieldSettings_Children) | Maps to the collection of child menu items. |
```cshtml
@@ -20,6 +30,18 @@ To bind local data source to the Context Menu, menu items are populated from dat
+
+
@code {
private List menuItems = new List();
@@ -37,17 +59,6 @@ To bind local data source to the Context Menu, menu items are populated from dat
public string Id { get; set; }
}
}
-
```
diff --git a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
index 9ca1a8a75f..9658f45b9e 100644
--- a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
+++ b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
@@ -7,11 +7,11 @@ control: Context Menu
documentation: ug
---
-# Enable/Disable Context Menu items in Blazor ContextMenu Component
+# Enable or Disable ContextMenu Items in Blazor ContextMenu Component
You can enable and disable the menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property in [MenuItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html). To disable menuItems, set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property in each item to `true` and vice-versa.
-In the following example, the **Display Settings** in parent items is disabled during initial loading and **Medium icons** in sub menu items are enabled/disabled dynamically while opening the sub menu.
+In the following example, the **Display Settings** parent item is disabled during initial loading and the **Medium Icons** sub menu item is enabled/disabled dynamically while opening the sub menu.
```cshtml
@@ -47,7 +47,7 @@ In the following example, the **Display Settings** in parent items is disabled d
if (e.ParentItem != null && e.ParentItem.Text == "View")
disableState = !disableState; // Execute only for the View item sub menu.
}
-};
+}
diff --git a/blazor/context-menu/icons-and-navigations.md b/blazor/context-menu/icons-and-navigations.md
index ae522ad06f..2616bf78b1 100644
--- a/blazor/context-menu/icons-and-navigations.md
+++ b/blazor/context-menu/icons-and-navigations.md
@@ -11,12 +11,12 @@ documentation: ug
## Icons
-The [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-context-menu) item has an icon/image in it to provide a visual representation of the action. To place the icon on a menu item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_IconCss) property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the menu item. In the following sample, the icons for Cut, Copy and Paste menu items are added using the `IconCss` property.
+The [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) item has an icon/image in it to provide a visual representation of the action. To place the icon on a menu item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_IconCss) property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the menu item. In the following sample, the icons for Cut, Copy and Paste menu items are added using the `IconCss` property.
```cshtml
@using Syncfusion.Blazor.Navigations
-
Right click/Touch hold to open the Context Menu
+
Right click/Touch hold to open the ContextMenu
@@ -55,7 +55,7 @@ You can also use third party icons on the Context Menu using the `IconCss`proper
## Navigation
-Navigation in Context Menu is used to navigate to the other web page when menu item is clicked. This can be achieved by providing link to the menu item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Url) property. In the following sample, Navigation URL for Flip kart, Amazon, and Snap deal menu items are added using the `Url` property.
+Navigation in the ContextMenu is used to navigate to another web page when a menu item is clicked. This can be achieved by providing a link to the menu item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Url) property. In the following sample, navigation URLs for Flipkart, Amazon, and Snapdeal menu items are added using the `Url` property.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -63,9 +63,9 @@ Navigation in Context Menu is used to navigate to the other web page when menu i
Right click/Touch hold to open the ContextMenu
-
-
-
+
+
+
diff --git a/blazor/context-menu/images/blazor-contextmenu-style-and-appearance.webp b/blazor/context-menu/images/blazor-contextmenu-style-and-appearance.webp
new file mode 100644
index 0000000000..3db8b66f0f
Binary files /dev/null and b/blazor/context-menu/images/blazor-contextmenu-style-and-appearance.webp differ
diff --git a/blazor/context-menu/style-and-appearance.md b/blazor/context-menu/style-and-appearance.md
index 4bf21295d9..acb60fe2d0 100644
--- a/blazor/context-menu/style-and-appearance.md
+++ b/blazor/context-menu/style-and-appearance.md
@@ -7,14 +7,58 @@ control: Context Menu
documentation: ug
---
-# Styles and Appearances in Blazor ContextMenu Component
+# Style and Appearance in Blazor ContextMenu Component
-To modify the [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-context-menu) appearance, you need to override the default CSS of ContextMenu component. Find the list of CSS classes and its corresponding section in ContextMenu component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5).
+To modify the [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) appearance, you need to override the default CSS of the ContextMenu component. Find the list of CSS classes and its corresponding section in the ContextMenu component. You can also create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5).
| CSS Class | Purpose of Class |
| ----- | ----- |
-| .e-contextmenu-container .e-menu-parent | To customize parent context menu |
-| .e-contextmenu-container ul .e-menu-item | To customize the context menu items |
-| .e-contextmenu-container ul .e-menu-item.e-focused | To customize the context menu items on focus |
-| .e-contextmenu-container ul .e-menu-item.e-selected .e-caret::before | To customize the selected context menu caret icon |
-| .e-contextmenu-container ul .e-menu-item .e-menu-icon::before | To customize the icons of the context menu |
\ No newline at end of file
+| .e-contextmenu-container .e-menu-parent | To customize the parent ContextMenu |
+| .e-contextmenu-container ul .e-menu-item | To customize the ContextMenu items |
+| .e-contextmenu-container ul .e-menu-item.e-focused | To customize the ContextMenu items on focus |
+| .e-contextmenu-container ul .e-menu-item.e-selected .e-caret::before | To customize the selected ContextMenu caret icon |
+| .e-contextmenu-container ul .e-menu-item .e-menu-icon::before | To customize the icons of the ContextMenu |
+
+## Customizing the appearance
+
+You can override the default CSS classes listed above to customize the ContextMenu. In the following example, the ContextMenu items are customized with a custom background, font color, and font style.
+
+```cshtml
+@using Syncfusion.Blazor.Navigations
+
+
Right click/Touch hold to open the ContextMenu
+
+
+
+
+
+
+
+
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBxjlXzqfeaBsbk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing the Appearance of Blazor ContextMenu](./images/blazor-contextmenu-style-and-appearance.webp)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/accessibility.md b/blazor/dashboard-layout/accessibility.md
index 3018a29637..b201cdb464 100644
--- a/blazor/dashboard-layout/accessibility.md
+++ b/blazor/dashboard-layout/accessibility.md
@@ -45,8 +45,8 @@ The Blazor Dashboard Layout component integrates [WAI-ARIA](https://www.w3.org/W
| **Attributes** | **Purpose** |
| --- | --- |
-| role=presentation | Indicates the role as a presentation for the table when the `showGridLines` property is enabled. |
-| aria-grabbed | Indicates whether the attribute is set to `true`. It has been selected for dragging. If this attribute is set to `false`, the element can be grabbed for a drag-and-drop operation, but will not be currently grabbed.|
+| role=presentation | Indicates the role as a presentation for the table when the `ShowGridLines` property is enabled. |
+| aria-grabbed | Indicates the drag state of a panel. When set to `true`, the panel is currently selected for dragging. When set to `false`, the panel can be grabbed for a drag-and-drop operation but is not currently grabbed. |
## Keyboard Interaction
diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
index 4bde8e4bd0..2bad565850 100644
--- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
@@ -9,7 +9,7 @@ documentation: ug
# Floating Panels in Blazor Dashboard Layout Component
-The Dashboard Layout component provides panel floating functionality through the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. When the property is enabled, panels automatically move upward to occupy any available empty cells in preceding rows. This behavior helps utilize the available Dashboard space efficiently and maintains a compact layout arrangement.
+The Dashboard Layout component provides panel floating functionality through the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. The default value of `AllowFloating` is `true`. When the property is enabled, panels automatically move upward to occupy any available empty cells in preceding rows. This behavior helps utilize the available Dashboard space efficiently and maintains a compact layout arrangement.
When the property is disabled, panels retain their configured row and column positions, even if empty cells are available above them.
diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
index 9363c2ba07..d722db841c 100644
--- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md
+++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
@@ -11,8 +11,6 @@ documentation: ug
Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation.
-Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation.
-
| **Panel Property** | **Default Value** | **Description** |
| --- | --- | --- |
| Id | null | Specifies the ID value of the panel. |
diff --git a/blazor/dashboard-layout/state-persistence.md b/blazor/dashboard-layout/state-persistence.md
index e92c6237a6..2665e5fe0b 100644
--- a/blazor/dashboard-layout/state-persistence.md
+++ b/blazor/dashboard-layout/state-persistence.md
@@ -13,7 +13,7 @@ State persistence allows users to save and restore the layout of the Blazor Dash
## Enabling Persistence in Dashboard Layout
-State persistence allowed Dashboard Layout component to retain the panel positions [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column), [Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row), width ([SizeX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX)), and height ([SizeY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY)) values in the [localStorage](https://www.w3schools.com/html/html5_webstorage.asp) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_EnablePersistence) property which is set to `false` by default. When it is set to `true`, the panel positions `Column`, `Row`, width (`SizeX`), and height (`SizeY`) values of the Dashboard Layout component will be retained even after refreshing the page.
+State persistence enables the Dashboard Layout component to retain the panel positions [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column), [Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row), width ([SizeX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX)), and height ([SizeY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY)) values in the [localStorage](https://www.w3schools.com/html/html5_webstorage.asp) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. Use the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_EnablePersistence) property, which is set to `false` by default. When it is set to `true`, the panel positions `Column`, `Row`, width (`SizeX`), and height (`SizeY`) values of the Dashboard Layout component will be retained even after refreshing the page.
N> The Dashboard Layout component's [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ID) is crucial for state persistence, as data is stored and retrieved based on this unique identifier.
@@ -113,7 +113,6 @@ The Blazor Dashboard Layout component provides built-in methods to manage its st
if (dashboardObject != null)
{
await dashboardObject.SetPersistDataAsync(_state);
-
}
}
private async Task ResetState()
@@ -121,7 +120,6 @@ The Blazor Dashboard Layout component provides built-in methods to manage its st
if (dashboardObject != null)
{
await dashboardObject.ResetPersistDataAsync();
-
}
}
}
diff --git a/blazor/dashboard-layout/style.md b/blazor/dashboard-layout/style.md
index f50d191991..ca247485d5 100644
--- a/blazor/dashboard-layout/style.md
+++ b/blazor/dashboard-layout/style.md
@@ -36,7 +36,7 @@ Apply the following CSS to customize the main content area of the Dashboard Layo
## Customizing the Dashboard Layout Panel Resize Icon
-The resize icon that appears in the corner of resizable panels can also be customized. Use the following CSS to modify its appearance.
+The resize icon that appears in the corner of resizable panels can also be customized. This selector applies only when `AllowResizing` is set to `true`. Use the following CSS to modify its appearance.
```css
.e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{
diff --git a/blazor/data-form/column-layout.md b/blazor/data-form/column-layout.md
index ab0f30216e..fbede2702e 100644
--- a/blazor/data-form/column-layout.md
+++ b/blazor/data-form/column-layout.md
@@ -40,4 +40,4 @@ In the following example, the DataForm is divided into six equal columns. Each e
## See Also
-* [Adaptive Layout structure](https://blazor.syncfusion.com/demos/data-form/adaptive-layout)
\ No newline at end of file
+* [Adaptive Layout structure](https://blazor.syncfusion.com/demos/data-form/adaptive-layout?theme=fluent2)
\ No newline at end of file
diff --git a/blazor/data-form/data-annotation-attributes.md b/blazor/data-form/data-annotation-attributes.md
index 359e069f8f..4a4a261443 100644
--- a/blazor/data-form/data-annotation-attributes.md
+++ b/blazor/data-form/data-annotation-attributes.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data annotation attributes in Blazor DataForm | Syncfusion®
-description: Checkout and learn here about Model ,EditContext and Custom Validation attributes binding with Blazor DataForm component.
+description: Check out and learn about how to use data annotation attributes such as display, validation, data type to control the Blazor DataForm component.
platform: Blazor
control: DataForm
documentation: ug
@@ -304,7 +304,7 @@ public string ID { get; set; }
### Data form display options attribute
-The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute configures display options for a property in the DataForm. The DataForm uses this attribute to determine [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.ColumnSpan.html) for the property.
+The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute configures display options for a property in the DataForm. The DataForm uses this attribute to determine [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html#Syncfusion_Blazor_DataForm_DataFormDisplayOptionsAttribute_ColumnSpan) for the property.
{% tabs %}
diff --git a/blazor/datagrid/overview.md b/blazor/datagrid/overview.md
index 1ac25e160c..fa5f5feacb 100644
--- a/blazor/datagrid/overview.md
+++ b/blazor/datagrid/overview.md
@@ -30,7 +30,7 @@ The Blazor DataGrid is ideal for a wide range of business scenarios:
The Blazor DataGrid enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The DataGrid can work with in-memory collections for small datasets, connect to remote services for scalable applications, or leverage ORM frameworks for seamless database integration.
-### Data Binding Approaches
+**Data Binding Approaches**
- **[In-Memory Data](./data-binding/local-data)** — Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping.
@@ -44,7 +44,7 @@ The Blazor DataGrid enables multiple data binding approaches, offering flexibili
- [SignalR](./connecting-to-backends/signalr) — Real-time data updates across multiple users and browser instances
- [Elasticsearch](./connecting-to-backends/elasticsearch) — Full-text search and powerful aggregation capabilities for large-scale datasets
-### Database Compatibility
+**Database Compatibility**
The DataGrid integrates with virtually any data source through native connectors and adaptor patterns:
@@ -55,7 +55,7 @@ The DataGrid integrates with virtually any data source through native connectors
| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures |
| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage |
-### Modern databases & cloud platforms
+**Modern databases & cloud platforms**
Connect your application to modern databases and cloud-hosted data platforms. These integrations provide scalable, flexible, and real-time data storage solutions for applications that require high performance, dynamic schemas, and seamless cloud synchronization.
@@ -64,7 +64,7 @@ Connect your application to modern databases and cloud-hosted data platforms. Th
| **[MongoDB](./connecting-to-database/mongodb-server)** | Document-based storage | Flexible schemas, unstructured data |
| **[Firebase Firestore](./connecting-to-database/firebase-firestore)** | Cloud real-time sync | Mobile apps, real-time applications |
-### API & Service Integration
+**API & Service Integration**
| Technology | Key Benefit | Use Case |
|-----------|---------------|----------|
@@ -74,23 +74,10 @@ Connect your application to modern databases and cloud-hosted data platforms. Th
| **[URL Adaptor](./connecting-to-adaptors/url-adaptor)** | Simple HTTP endpoints | Quick integrations, public APIs |
| **[Custom Adaptor](./connecting-to-adaptors/custom-adaptor)** | Custom implementations | Specialized back ends, proprietary systems |
-### Large-scale rendering performance
-
-The Blazor DataGrid is engineered for exceptional performance, enabling smooth operation with datasets ranging from hundreds to hundreds of thousands of rows. Advanced rendering techniques, intelligent caching, and WebAssembly optimizations ensure responsive user interactions without performance degradation.
-
-| Feature | Benefit | Use Case | Key Benefit |
-|---------|---------|----------|---------------|
-| **[Row Virtualization](./virtual-scrolling#row-virtualization)** | Render only visible rows; dynamically load/unload as users scroll | Large datasets (10K+ rows) | Smooth 60fps scrolling |
-| **[Column Virtualization](./virtual-scrolling#column-virtualization)** | Render only visible columns; optimize for many-column grids | Wide grids (50+ columns) | Efficient horizontal scrolling |
-| **[Lazy-load Grouping](./lazy-load-grouping)** | Load group data on demand when expanded | Grouped datasets | Reduced initial load time |
-| **[Infinite Scrolling](./infinite-scrolling)** | Load records progressively as users scroll | Continuous data exploration | Seamless navigation |
-
### Data Operations
The Blazor DataGrid provides comprehensive data manipulation capabilities that enable users to analyze, organize, and understand their data efficiently:
-**Sorting & Filtering**
-
| Feature | Purpose | Key Benefit |
|---------|---------|-------------|
| **[Sorting](./sorting)** | Arrange records in ascending or descending order to identify trends and patterns | Quick sort by clicking column headers |
@@ -98,11 +85,6 @@ The Blazor DataGrid provides comprehensive data manipulation capabilities that e
| **[Filter Menu](./filter-menu)** | Advanced filtering with complex conditions and multiple criteria | Powerful expression-based filtering |
| **[Excel-like Filter](./excel-like-filter)** | Familiar checkbox-based filtering interface | Multi-select from available values |
| **[Searching](./searching)** | Rapid text-based search across one or multiple columns | Global or column-specific search |
-
-**Grouping & Aggregation**
-
-| Feature | Purpose | Key Benefit |
-|---------|---------|-------------|
| **[Grouping](./grouping)** | Organize records into categories for better data comprehension | Multi-level hierarchical grouping |
| **[Aggregates](./aggregates)** | Calculate summary values (sum, average, min, max) on grouped data | Built-in aggregate functions |
| **[Footer Aggregate](./footer-aggregate)** | Display summary totals in the grid footer | Overall statistics for all visible records |
@@ -110,11 +92,22 @@ The Blazor DataGrid provides comprehensive data manipulation capabilities that e
| **[Custom Aggregate](./custom-aggregate)** | Define custom calculation logic beyond standard functions | Specialized business calculations |
| **[Reactive Aggregate](./reactive-aggregate)** | Automatically update aggregates in real-time when data changes | Live calculation updates |
+## Large-scale rendering performance
+
+The Blazor DataGrid is engineered for exceptional performance, enabling smooth operation with datasets ranging from hundreds to hundreds of thousands of rows. Advanced rendering techniques, intelligent caching, and WebAssembly optimizations ensure responsive user interactions without performance degradation.
+
+| Feature | Benefit | Use Case | Key Benefit |
+|---------|---------|----------|---------------|
+| **[Row Virtualization](./virtual-scrolling#row-virtualization)** | Render only visible rows; dynamically load/unload as users scroll | Large datasets (10K+ rows) | Smooth 60fps scrolling |
+| **[Column Virtualization](./virtual-scrolling#column-virtualization)** | Render only visible columns; optimize for many-column grids | Wide grids (50+ columns) | Efficient horizontal scrolling |
+| **[Lazy-load Grouping](./lazy-load-grouping)** | Load group data on demand when expanded | Grouped datasets | Reduced initial load time |
+| **[Infinite Scrolling](./infinite-scrolling)** | Load records progressively as users scroll | Continuous data exploration | Seamless navigation |
+
## Editing & CRUD Operations
The Blazor DataGrid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching.
-### Editing Modes
+**Editing Modes**
Multiple editing modes support different workflow scenarios:
@@ -125,16 +118,20 @@ Multiple editing modes support different workflow scenarios:
| **[Batch Editing](./batch-editing)** | Edit multiple records and submit together | Bulk operations, mass updates | Efficient mass updates with single submission |
| **[Template Editing](./template-editing)** | Use custom HTML templates for forms | Complex layouts, specialized controls | Flexible, custom-designed edit forms |
-### Data Validation
+**Data Validation**
The DataGrid includes built-in [validation with Data Annotations](./column-validation#data-annotation) that enforces business rules using .NET attributes. Validation errors display inline with helpful messages, guiding users to correct data before submission.
+## Performance Best Practices
+
+For comprehensive performance optimization strategies, best practices, and detailed guidance on handling large datasets, refer to the **[Performance Best Practices](./performance)** documentation.
+
+For WebAssembly-specific optimizations and tuning recommendations, see **[WebAssembly Performance Guidelines](./webassembly-performance)**.
+
## Columns
The Blazor DataGrid offers extensive column and layout customization options for creating professional data displays tailored to any device or workflow. Columns are fully customizable with formatting, resizing, reordering, and visibility controls that adapt to various viewing needs.
-**Column Features**
-
| Feature | Purpose | Key Benefit |
|---------|---------|-------------|
| **[Column Formatting](./columns.md)** | Apply predefined or custom formats (currency, dates, percentages, etc.) | Professional number and date display |
@@ -153,17 +150,11 @@ The Blazor DataGrid offers extensive column and layout customization options for
| **[Mobile Responsive](./adaptive-layout)** | Optimized experience for phones and tablets | Touch-friendly interactions |
| **[Breakpoint-based Adjustments](./adaptive-layout)** | Different layouts for different screen sizes | Tailored mobile and desktop views |
-## Performance Best Practices
-
-For comprehensive performance optimization strategies, best practices, and detailed guidance on handling large datasets, refer to the **[Performance Best Practices](./performance)** documentation.
-
-For WebAssembly-specific optimizations and tuning recommendations, see **[WebAssembly Performance Guidelines](./webassembly-performance)**.
-
## User Experience & Interaction
The Blazor DataGrid provides a comprehensive, accessible user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance. Every aspect of the grid interface supports customization to match application design systems and workflow requirements.
-### Templating & Customization
+**Templating & Customization**
| Template Type | Purpose | Key Benefit |
|---------------|---------|-------------|
@@ -173,7 +164,7 @@ The Blazor DataGrid provides a comprehensive, accessible user experience with ex
| **[Edit Template](./template-editing)** | Custom edit forms with specialized controls and validation | Complex data entry forms |
| **[Detail Template](./detail-template)** | Expandable row sections for additional information | Hierarchical data display |
-### Selection
+**Selection**
| Feature | Purpose | Key Benefit |
|---------|---------|-------------|
@@ -182,7 +173,7 @@ The Blazor DataGrid provides a comprehensive, accessible user experience with ex
| **[Cell Selection](./cell-selection)** | Individual cell or range selection with copy-paste | Spreadsheet-like interaction |
| **[Persist Selection](./selection#persist-selection)** | Maintain selections across sort/filter/page operations | Consistent user context |
-### Accessibility & Keyboard Navigation
+**Accessibility & Keyboard Navigation**
The DataGrid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:
@@ -200,15 +191,13 @@ The DataGrid is fully accessible and compliant with Web Content Accessibility Gu
The Blazor DataGrid provides comprehensive export and reporting capabilities, enabling users to extract, analyze, and distribute grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools.
-### Export Formats
-
| Format | Key Benefit | Best For |
|--------|---------------|----------|
| **[Excel Export](./excel-exporting)** | Export to XLSX with formatting, formulas, and styling | Data analysis, spreadsheet workflows, sharing |
| **[PDF Export](./pdf-export)** | Generate formatted PDF documents with custom layouts | Professional reports, distribution, archiving |
| **[Print](./print)** | Printer-ready output with page orientation control | Hard copy reports, on-demand printing |
-### Export Capabilities
+**Export Capabilities**
See [Export Documentation](./excel-exporting) for detailed configuration of column selection, filtering, grouping, aggregates, branding, formatting, and custom templates.
@@ -216,7 +205,7 @@ See [Export Documentation](./excel-exporting) for detailed configuration of colu
The Blazor DataGrid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements.
-### Enterprise Capabilities
+**Enterprise Capabilities**
| Feature | Purpose | Use Case | Key Benefit |
|---------|---------|----------|---------------|
@@ -227,7 +216,7 @@ The Blazor DataGrid includes sophisticated capabilities designed for complex ent
| **[Foreign Key Columns](./foreignkey-column)** | Display related data with automatic lookup | Customer names from ID, category names | Data relationships |
| **[Global/Local Formatting](./global-local)** | Consistent or column-specific formatting | Currency, dates, numbers, text | Professional presentation |
-### Enterprise Patterns
+**Enterprise Patterns**
For specific implementation patterns, refer to feature documentation:
diff --git a/blazor/daterangepicker/accessibility.md b/blazor/daterangepicker/accessibility.md
index a673524672..f64da59205 100644
--- a/blazor/daterangepicker/accessibility.md
+++ b/blazor/daterangepicker/accessibility.md
@@ -106,7 +106,7 @@ N> To focus out the DateRangePicker component, use the `t` keys. For additional
}
```
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap4) to understand how to present and manipulate data.
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
## Ensuring accessibility
diff --git a/blazor/daterangepicker/data-binding.md b/blazor/daterangepicker/data-binding.md
index 450bb45331..f6a51b8ad9 100644
--- a/blazor/daterangepicker/data-binding.md
+++ b/blazor/daterangepicker/data-binding.md
@@ -89,4 +89,4 @@ private void onChange(RangePickerEventArgs args)
}
```
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
diff --git a/blazor/daterangepicker/globalization.md b/blazor/daterangepicker/globalization.md
index cbd08229f9..4945be5df6 100644
--- a/blazor/daterangepicker/globalization.md
+++ b/blazor/daterangepicker/globalization.md
@@ -36,4 +36,4 @@ The following code example initialize the DateRangePicker component in `Hebrew`
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
diff --git a/blazor/daterangepicker/how-to/customization-using-cssclass.md b/blazor/daterangepicker/how-to/customization-using-cssclass.md
index 9efa29783f..fc1e49dbfe 100644
--- a/blazor/daterangepicker/how-to/customization-using-cssclass.md
+++ b/blazor/daterangepicker/how-to/customization-using-cssclass.md
@@ -73,4 +73,4 @@ Following is the list of classes that provides flexible way to customize the Dat
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md b/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md
index 8bda3dc29d..9737905039 100644
--- a/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md
+++ b/blazor/daterangepicker/how-to/disable-the-daterangepicker-component.md
@@ -25,4 +25,4 @@ DateRangePicker can be deactivated on a page. Setting [Enabled](https://help.syn
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/daterangepicker/how-to/set-the-placeholder.md b/blazor/daterangepicker/how-to/set-the-placeholder.md
index 60895cc830..b5122fb535 100644
--- a/blazor/daterangepicker/how-to/set-the-placeholder.md
+++ b/blazor/daterangepicker/how-to/set-the-placeholder.md
@@ -22,4 +22,4 @@ Using `Placeholder`, you can display a short hint in the input element.
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/daterangepicker/native-events.md b/blazor/daterangepicker/native-events.md
index 5eb9beeacc..f2f05b631e 100644
--- a/blazor/daterangepicker/native-events.md
+++ b/blazor/daterangepicker/native-events.md
@@ -77,4 +77,4 @@ Using Lambda expression also, you can pass the event data to the event handler.
| ondblclick | onkeydown | onkeyup | onkeypress |
| ontouchend | onfocusin | onmouseup | ontouchstart |
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap4) to understand how to present and manipulate data.
\ No newline at end of file
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/daterangepicker/range-restriction.md b/blazor/daterangepicker/range-restriction.md
index 7c666b7871..07aed0e198 100644
--- a/blazor/daterangepicker/range-restriction.md
+++ b/blazor/daterangepicker/range-restriction.md
@@ -104,4 +104,4 @@ The following code demonstrates the `StrictMode` as false. Here, it allows you t
-N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+N> You can refer to our [Blazor Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Date Range Picker example](https://blazor.syncfusion.com/demos/daterangepicker/default-functionalities?theme=fluent2) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/dropdown-list/cascading.md b/blazor/dropdown-list/cascading.md
index 377ed91719..4f83c1da3d 100644
--- a/blazor/dropdown-list/cascading.md
+++ b/blazor/dropdown-list/cascading.md
@@ -27,4 +27,4 @@ In the following sample, selecting a country in the first DropDownList loads its
-N> [View Sample in Demo](https://blazor.syncfusion.com/demos/dropdown-list/cascading?theme=bootstrap5).
\ No newline at end of file
+N> [View Sample in Demo](https://blazor.syncfusion.com/demos/dropdown-list/cascading?theme=fluent2).
\ No newline at end of file
diff --git a/blazor/dropdown-list/data-binding.md b/blazor/dropdown-list/data-binding.md
index c111effc55..e26e1ba60e 100644
--- a/blazor/dropdown-list/data-binding.md
+++ b/blazor/dropdown-list/data-binding.md
@@ -197,7 +197,7 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the DropDownList 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 can be utilized for implementing customize data binding and editing operations in the DropDownList component.
For implementing custom data binding in the DropDownList, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
@@ -240,7 +240,7 @@ To reduce network requests, load all data at initialization and process actions
### Entity Framework
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the DropDown List component.
+Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-orm/entityframework) in the DropDown List component.
#### Create DBContext class
diff --git a/blazor/dropdown-tree/data-binding.md b/blazor/dropdown-tree/data-binding.md
index 007d320a7a..32028e589c 100644
--- a/blazor/dropdown-tree/data-binding.md
+++ b/blazor/dropdown-tree/data-binding.md
@@ -698,7 +698,7 @@ namespace DropDownTreeSample.Data
### Entity Framework
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the Dropdown Tree component.
+Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-orm/entityframework) in the Dropdown Tree component.
#### Create DBContext class
diff --git a/blazor/dropdown-tree/getting-started-with-server-app.md b/blazor/dropdown-tree/getting-started-with-server-app.md
index 68490e9b36..a5774792c6 100644
--- a/blazor/dropdown-tree/getting-started-with-server-app.md
+++ b/blazor/dropdown-tree/getting-started-with-server-app.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with Blazor Dropdown Tree in Blazor Server App
-This section briefly explains how to include the [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdown-tree) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
+This section briefly explains how to include the [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
## Create a new Blazor Server App
diff --git a/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md b/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md
index c57b17cac3..586f70b164 100644
--- a/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md
+++ b/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md
@@ -9,11 +9,11 @@ documentation: ug
# File Transfer Protocol file system provider
-In ASP.NET Core, File Transfer Protocol file system provider allows the users to access to the hosted file system as collection of objects stored in the file storage using File Transfer Protocol. To get started, clone the [EJ2.ASP.NET Core FTP File Provider](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider) using the following command
+In ASP.NET Core, File Transfer Protocol file system provider allows the users to access to the hosted file system as collection of objects stored in the file storage using File Transfer Protocol. To get started, clone the [EJ2.ASP.NET Core FTP File Provider](https://github.com/SyncfusionExamples/ftp-aspcore-file-provider) using the following command
```
-git clone https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.git ej2-ftp-aspcore-file-provider.git
+git clone https://github.com/SyncfusionExamples/ftp-aspcore-file-provider.git ej2-ftp-aspcore-file-provider.git
```
@@ -47,4 +47,4 @@ To perform file operations (Read, Create, Rename, Delete, Get file details, Sear
To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `FTPProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/ftp-aspcore-file-provider/blob/master/Controllers/FTPProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.
-N> To learn more about the file actions that can be performed with File Transfer Protocol file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.git#key-features)
\ No newline at end of file
+N> To learn more about the file actions that can be performed with File Transfer Protocol file system provider, refer to this [link](https://github.com/SyncfusionExamples/ftp-aspcore-file-provider#key-features)
\ No newline at end of file
diff --git a/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md b/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md
index 89d2ad190f..65b246c75b 100644
--- a/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md
+++ b/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md
@@ -90,7 +90,7 @@ Then, create a root node and add children to the root node. Refer to the followi
Here, the `Files` denotes the `rootNode` and the subsequent object refers to the children of the root node. `rootNode` will be taken as the root folder of the file system loaded which will be loaded in File Manager component.
-After that, clone the [EJ2.ASP.NET Core Firebase Real Time Database File Provider](https://github.com/SyncfusionExamples/ej2-firebase-realtime-database-aspcore-file-provider) and just open the project in Visual Studio and restore the NuGet package.
+After that, clone the [EJ2.ASP.NET Core Firebase Real Time Database File Provider](https://github.com/SyncfusionExamples/firebase-realtime-database-aspcore-file-provider) and just open the project in Visual Studio and restore the NuGet package.
Register the Firebase Real time Database by assigning *Firebase Real time Database REST API link*, *rootNode*, and *serviceAccountKeyPath* parameters in the `RegisterFirebaseRealtimeDB` method of class `FirebaseRealtimeDBFileProvider` in controller part of the ASP.NET Core application.
diff --git a/blazor/file-manager/Google-Drive-file-system-provider.md b/blazor/file-manager/Google-Drive-file-system-provider.md
index 13a5f14de2..62b40c72fa 100644
--- a/blazor/file-manager/Google-Drive-file-system-provider.md
+++ b/blazor/file-manager/Google-Drive-file-system-provider.md
@@ -9,17 +9,17 @@ documentation: ug
# Google Drive file system provider
-The Google Drive file system provider allows the users to manage the files and folders in a Google Drive account. The Google Drive file system provider works on id basis where each file and folder have a unique ID. To get started, clone the [EJ2.ASP.NET Core Google Drive File Provider](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider) using the following command.
+The Google Drive file system provider allows the users to manage the files and folders in a Google Drive account. The Google Drive file system provider works on id basis where each file and folder have a unique ID. To get started, clone the [EJ2.ASP.NET Core Google Drive File Provider](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider) using the following command.
```
-git clone https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider ej2-google-drive-aspcore-file-provider
+git clone https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider.git ej2-google-drive-aspcore-file-provider
cd ej2-google-drive-aspcore-file-provider
```
-Google Drive file system provider use the [Google Drive APIs](https://developers.google.com/drive/api/v3/reference/) to read the file in the file system and uses the [OAuth 2.0](https://developers.google.com/identity/protocols/OAuth2) protocol for authentication and authorization. To authenticate from the client end, have to obtain OAuth 2.0 client credentials from the `Google API Console`. To learn more about generating the client credentials from the from Google API Console, refer to this [link](https://developers.google.com/identity/protocols/OAuth2UserAgent).
+Google Drive file system provider use the [Google Drive APIs](https://developers.google.com/workspace/drive/api/reference/rest/v3) to read the file in the file system and uses the [OAuth 2.0](https://developers.google.com/identity/protocols/oauth2) protocol for authentication and authorization. To authenticate from the client end, have to obtain OAuth 2.0 client credentials from the `Google API Console`. To learn more about generating the client credentials from the from Google API Console, refer to this [link](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow).
After generating the client secret data, copy the JSON data to the following specified JSON files in the cloned location.
@@ -48,4 +48,4 @@ To perform file operations (Read, Create, Rename, Delete, Get file details, Sear
To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `GoogleDriveProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider/blob/master/EJ2GoogleDriveFileProvider/Controllers/GoogleDriveProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.
-N> To learn more about file actions that can be performed with Google drive file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider#key-features)
\ No newline at end of file
+N> To learn more about file actions that can be performed with Google drive file system provider, refer to this [link](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider#key-features)
\ No newline at end of file
diff --git a/blazor/file-manager/SQL-database-file-system-provider.md b/blazor/file-manager/SQL-database-file-system-provider.md
index 9aecb44005..fa07bfa06f 100644
--- a/blazor/file-manager/SQL-database-file-system-provider.md
+++ b/blazor/file-manager/SQL-database-file-system-provider.md
@@ -11,7 +11,7 @@ documentation: ug
To get started with the SQL database file system provider, ensure that a SQL Server instance or LocalDB is available and properly configured. A database with the required schema to manage files and folders should be created, and a valid connection string must be defined in the application configuration to establish connectivity.
-The SQL database file system provider allows the users to manage the file system being maintained in a SQL database table. Unlike the other file system providers, the SQL database file system provider works on ID basis. Here, each file and folder have a unique ID based on which all the file operations will be performed. To get started, clone the [EJ2.ASP.NET Core SQL Server Database File Provider](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider) using the following command.
+The SQL database file system provider allows the users to manage the file system being maintained in a SQL database table. Unlike the other file system providers, the SQL database file system provider works on ID basis. Here, each file and folder have a unique ID based on which all the file operations will be performed. To get started, clone the [EJ2.ASP.NET Core SQL Server Database File Provider](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider) using the following command.
```json
@@ -45,7 +45,7 @@ operation.SetSQLConnection(connectionName, tableName, rootFolderID);
```
-N> Refer to this [FileManager.mdf](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider/blob/master/App_Data/FileManager.mdf) to learn about the pre-defined file system SQL database for the Blazor File Manager.
+N> Refer to this [FileManager.mdf](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/blob/master/App_Data/FileManager.mdf) to learn about the pre-defined file system SQL database for the Blazor File Manager.
After configuring the connection, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the [FileManagerAjaxSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerAjaxSettings.html) property of the File Manager component to the appropriate controller methods allows to manage the files in the SQL database table.
@@ -69,4 +69,4 @@ To perform file operations (Read, Create, Rename, Delete, Get file details, Sear
To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `SQLProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/blob/master/Controllers/SQLProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.
-N> To learn more about file actions that can be performed with SQL database file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider#key-features)
\ No newline at end of file
+N> To learn more about file actions that can be performed with SQL database file system provider, refer to this [link](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider#key-features)
\ No newline at end of file
diff --git a/blazor/file-manager/amazon-S3-cloud-file-provider.md b/blazor/file-manager/amazon-S3-cloud-file-provider.md
index b1e7ab006f..22771d69ce 100644
--- a/blazor/file-manager/amazon-S3-cloud-file-provider.md
+++ b/blazor/file-manager/amazon-S3-cloud-file-provider.md
@@ -32,7 +32,7 @@ Before you integrate Amazon S3 with the Blazor File Manager, ensure you have:
Clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider) using the following command,
```bash
-git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider ej2-amazon-s3-aspcore-file-provider
+git clone https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider.git ej2-amazon-s3-aspcore-file-provider
```
N> This Amazon S3 provider for the Blazor File Manager is intended for demonstration and evaluation only. Before using it consult your security team and complete a security review.
diff --git a/blazor/file-manager/azure-cloud-file-system-provider.md b/blazor/file-manager/azure-cloud-file-system-provider.md
index 2dee42ba6a..01cff57f4b 100644
--- a/blazor/file-manager/azure-cloud-file-system-provider.md
+++ b/blazor/file-manager/azure-cloud-file-system-provider.md
@@ -23,7 +23,7 @@ Before you integrate Azure Blob Storage with the Blazor File Manager, ensure you
## Setting Up Azure Blob Storage
-- Sign in to the [Azure Portal](https://portal.azure.com/) and [create a storage account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) with Blob service enabled.
+- Sign in to the [Azure Portal](https://portal.azure.com/#home) and [create a storage account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) with Blob service enabled.
- [Create a Blob Container](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-portal?tabs=azure-portal#create-a-container) (example: files). See Azure docs for [container naming rules](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-introduction#naming-and-referencing-containers-blobs-and-metadata).
## Backend Setup
@@ -31,7 +31,7 @@ Before you integrate Azure Blob Storage with the Blazor File Manager, ensure you
Clone the [Azure File Provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider) using the following command,
```bash
-git clone https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider ej2-azure-aspcore-file-provider
+git clone https://github.com/SyncfusionExamples/azure-aspcore-file-provider.git ej2-azure-aspcore-file-provider
```
N> This Azure Blob Storage provider for the Blazor File Manager is intended for demonstration and evaluation only. Before using it in production, consult your security team and complete a security review.
diff --git a/blazor/file-manager/data-binding.md b/blazor/file-manager/data-binding.md
index 6f95d70972..3d62e2a07c 100644
--- a/blazor/file-manager/data-binding.md
+++ b/blazor/file-manager/data-binding.md
@@ -624,7 +624,7 @@ To render the root-level folder, specify the ParentID as null, or there is no ne
{% endhighlight %}
{% endtabs %}
-N> [Also see the demo here](https://blazor.syncfusion.com/demos/file-manager/flat-data).
+N> [Also see the demo here](https://blazor.syncfusion.com/demos/file-manager/flat-data?theme=fluent2).
### Injected service
diff --git a/blazor/file-manager/file-system-provider.md b/blazor/file-manager/file-system-provider.md
index 6ebdf3afa2..c326c2aaae 100644
--- a/blazor/file-manager/file-system-provider.md
+++ b/blazor/file-manager/file-system-provider.md
@@ -13,11 +13,11 @@ The file system provider allows the File Manager component to manage the files a
The following file providers are added in Blazor File Manager component.
-* [Physical file system provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-file-system-provider)
-* [Azure cloud file system Provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-Azure-cloud-file-system-provider)
-* [Amazon S3 cloud file provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-Amazon-S3-cloud-file-provider)
-* [SharePoint file provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-SharePoint-file-provider)
-* [File Transfer Protocol file system provider](https://blazor.syncfusion.com/documentation/file-manager/File-Transfer-Protocol-file-system-provider)
-* [SQL database file system provider](https://blazor.syncfusion.com/documentation/file-manager/SQL-database-file-system-provider)
-* [Google Drive file system provider](https://blazor.syncfusion.com/documentation/file-manager/Google-Drive-file-system-provider)
-* [Firebase Real time Database file system provider](https://blazor.syncfusion.com/documentation/file-manager/Firebase-Real-time-Database-file-system-provider)
+* [Physical file system provider](https://blazor.syncfusion.com/documentation/file-manager/physical-file-system-provider)
+* [Azure cloud file system Provider](https://blazor.syncfusion.com/documentation/file-manager/azure-cloud-file-system-provider)
+* [Amazon S3 cloud file provider](https://blazor.syncfusion.com/documentation/file-manager/amazon-s3-cloud-file-provider)
+* [SharePoint file provider](https://blazor.syncfusion.com/documentation/file-manager/sharepoint-file-provider)
+* [File Transfer Protocol file system provider](https://blazor.syncfusion.com/documentation/file-manager/file-transfer-protocol-file-system-provider)
+* [SQL database file system provider](https://blazor.syncfusion.com/documentation/file-manager/sql-database-file-system-provider)
+* [Google Drive file system provider](https://blazor.syncfusion.com/documentation/file-manager/google-drive-file-system-provider)
+* [Firebase Real time Database file system provider](https://blazor.syncfusion.com/documentation/file-manager/firebase-real-time-database-file-system-provider)
diff --git a/blazor/file-manager/how-to/customize-http-handler.md b/blazor/file-manager/how-to/customize-http-handler.md
index c06c8db3ba..86ef581cef 100644
--- a/blazor/file-manager/how-to/customize-http-handler.md
+++ b/blazor/file-manager/how-to/customize-http-handler.md
@@ -289,7 +289,7 @@ var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
- // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+ // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://learn.microsoft.com/en-us/aspnet/core/security/enforcing-ssl?view=aspnetcore-10.0&tabs=visual-studio%2Clinux-ubuntu.
app.UseHsts();
}
diff --git a/blazor/file-manager/how-to/previewing-files.md b/blazor/file-manager/how-to/previewing-files.md
index 8249163476..cfc1049eff 100644
--- a/blazor/file-manager/how-to/previewing-files.md
+++ b/blazor/file-manager/how-to/previewing-files.md
@@ -9,13 +9,13 @@ documentation: ug
# Previewing files in Blazor File Manager component
-In the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component, you can preview PDF files using the [PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) component, docx files using the [DocumentEditor](https://blazor.syncfusion.com/documentation/document-editor/getting-started/web-app) component, and play videos within the [Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component.
+In the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component, you can preview PDF files using the [PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) component, docx files using the [DocumentEditor](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app) component, and play videos within the [Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component.
## Previewing PDF and Word File in Dialog
In the Blazor File Manager component, you can view PDF files using the [PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) component and docx files using the DocumentEditor component by setting the proper file path in these components.
-The following example demonstrates how to preview PDF and docx files by utilizing the [PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) and [DocumentEditor](https://blazor.syncfusion.com/documentation/document-editor/getting-started/web-app) components within the [Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component.
+The following example demonstrates how to preview PDF and docx files by utilizing the [PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app) and [DocumentEditor](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app) components within the [Dialog](https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app) component.
```cshtml
diff --git a/blazor/file-upload/async.md b/blazor/file-upload/async.md
index 54ed46dead..4b23393f9a 100644
--- a/blazor/file-upload/async.md
+++ b/blazor/file-upload/async.md
@@ -527,5 +527,5 @@ The OnClear event is triggered when the file list in the uploader is cleared (ei
- Handling custom data with upload: https://support.syncfusion.com/kb/article/16000/handling-custom-data-with-file-upload-component-in-blazor
- Upload with user info in SfUploader: https://support.syncfusion.com/kb/article/15190/how-to-handle-blazor-file-upload-with-user-information-in-sfuploader
-- Upload to Azure Blob Storage: https://www.syncfusion.com/blogs/post/simple-steps-to-upload-files-to-azure-blob-storage-in-b
+- Upload to Azure Blob Storage: https://www.syncfusion.com/blogs/post/simple-steps-to-upload-files-to-azure-blob-storage-in-blazor-app
- Upload files to Database in Blazor: (https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor)
diff --git a/blazor/file-upload/file-source.md b/blazor/file-upload/file-source.md
index 886b1fba90..069d97eaae 100644
--- a/blazor/file-upload/file-source.md
+++ b/blazor/file-upload/file-source.md
@@ -141,4 +141,4 @@ public void Remove(IList UploadFiles)
}
```
-N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=bootstrap5) to understand how to browse the files that need to be uploaded to the server.
\ No newline at end of file
+N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=fluent2) to understand how to browse the files that need to be uploaded to the server.
\ No newline at end of file
diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md
index 2e22620072..04b76959df 100644
--- a/blazor/file-upload/getting-started-with-web-app.md
+++ b/blazor/file-upload/getting-started-with-web-app.md
@@ -472,7 +472,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
1. [Getting Started with Blazor WebAssembly Standalone App .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli)
-2. [Getting Started with Blazor WebAssembly Standalone App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
+2. [Getting Started with Blazor WebAssembly Standalone App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
3. [Getting Started with Blazor Web App in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli)
4. [Getting Started with File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly)
5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload)
diff --git a/blazor/floating-action-button/getting-started-with-server-app.md b/blazor/floating-action-button/getting-started-with-server-app.md
index 0ac41dfdfc..7d04598376 100644
--- a/blazor/floating-action-button/getting-started-with-server-app.md
+++ b/blazor/floating-action-button/getting-started-with-server-app.md
@@ -248,5 +248,5 @@ The floating action button control triggers the [OnClick](https://help.syncfusio
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/in-place-editor/getting-started-with-server-app.md b/blazor/in-place-editor/getting-started-with-server-app.md
index ac3ce3f719..b208af7391 100644
--- a/blazor/in-place-editor/getting-started-with-server-app.md
+++ b/blazor/in-place-editor/getting-started-with-server-app.md
@@ -567,6 +567,5 @@ After submit, the edited data is sent to the server, and the updated value is re
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli)
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
diff --git a/blazor/in-place-editor/getting-started-with-web-app.md b/blazor/in-place-editor/getting-started-with-web-app.md
index 28b21c48da..a8c0fad1f8 100644
--- a/blazor/in-place-editor/getting-started-with-web-app.md
+++ b/blazor/in-place-editor/getting-started-with-web-app.md
@@ -574,7 +574,6 @@ After submit, the edited data is sent to the server, and the updated value is re
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli)
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/mcp-server/release-notes.md b/blazor/mcp-server/release-notes.md
deleted file mode 100644
index 44a804d7f0..0000000000
--- a/blazor/mcp-server/release-notes.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: post
-title: Release Notes - Syncfusion Blazor AI and Smart Tooling | Syncfusion
-description: Explore the release notes for Syncfusion Blazor AI and Smart Tooling, covering MCP Server, Skills, and Agentic UI Builder updates across all versions.
-platform: Blazor
-control: Syncfusion Blazor AI and Smart Tooling Release Notes
-documentation: ug
----
-
-# Blazor MCP Server Release Notes
-
-This document provides information about the changes and new features included in each version of the [@syncfusion/blazor-assistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) MCP server package.
-
-## (v2.0.0) – February 23, 2026
-
-### Features
-
-- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete Blazor applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
-- Agentic UI Builder sub-tools:
- - **Layout Tool** (#sf_blazor_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
- - **Component Tool** (#sf_blazor_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Blazor components.
- - **Styling Tool** (#sf_blazor_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
-- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
-
-### Breaking Changes
-
-- Renamed the coding assistant tool identifier from **`SyncfusionBlazorAssistant`** to **`sf_blazor_assistant`** for consistency, brevity, and improved user experience.
-
-## (v1.0.1) – February 10, 2026
-
-### Features
-
-- Updated package dependencies to resolve security vulnerabilities and enhance stability.
-
-## (v1.0.0) – December 16, 2025
-
-### Features
-
-- Added support for API key validation through file path reference.
-- Updated package dependencies and security standards for improved reliability and safety.
-
-## (v0.1.0) – October 10, 2025
-
-### Features
-
-- Initial release of AI Coding Assistant for Blazor components.
-- Provides context-aware assistance for building Blazor applications with Blazor components.
-- Includes support for component APIs, properties, and troubleshooting guidance.
diff --git a/blazor/media-query/getting-started-webapp.md b/blazor/media-query/getting-started-webapp.md
index 430aba6471..2d035daf63 100644
--- a/blazor/media-query/getting-started-webapp.md
+++ b/blazor/media-query/getting-started-webapp.md
@@ -57,7 +57,7 @@ cd BlazorWebApp.Client
{% endtabcontents %}
-N> 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. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+N> 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=vsc#interactivity-location) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
## Install the required Blazor packages
@@ -117,12 +117,12 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
## Add import namespaces
-After the package is installed, open the **~/Components/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` namespace.
+After the package is installed, open the **~/Components/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor.Core` namespace.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
{% endhighlight %}
{% endtabs %}
@@ -164,12 +164,12 @@ Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor*
N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default.
+In the following example, the [ActiveBreakPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) parameter is used to obtain the currently active breakpoint and dynamically update the layout based on the screen size.
+
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
-@rendermode InteractiveAuto
-
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
@@ -440,9 +440,11 @@ dotnet run
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVdXQZhzdRxdKGB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.webp)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery).
+N> You can refer to the [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) feature tour to explore its key features and capabilities. You can also browse the [Blazor Media Query examples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery) to learn how to render and configure the component.
## See also
-1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
+1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+4. [Breakpoints in Blazor Media Query Component](https://blazor.syncfusion.com/documentation/media-query/break-points)
diff --git a/blazor/media-query/getting-started-with-server-app.md b/blazor/media-query/getting-started-with-server-app.md
index b2064423dd..a10bb83928 100644
--- a/blazor/media-query/getting-started-with-server-app.md
+++ b/blazor/media-query/getting-started-with-server-app.md
@@ -55,7 +55,7 @@ cd BlazorApp
{% endtabcontents %}
-N> 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 Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+N> 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=vsc#interactivity-location) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
## Install the required Blazor packages
@@ -115,12 +115,12 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
## Add import namespaces
-After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
+After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor.Core` namespace.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
{% endhighlight %}
{% endtabs %}
@@ -162,12 +162,12 @@ Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **
N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default.
+The Media Query component monitors the viewport width and updates the ActiveBreakPoint value as the screen size changes between defined breakpoints such as Small, Medium, and Large. This value can be used to conditionally apply styles or modify the layout. In the following example, the [ActiveBreakPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) parameter is used to determine the currently active breakpoint and dynamically update the layout based on the screen size.
+
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
-@rendermode InteractiveServer
-
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
@@ -434,9 +434,11 @@ dotnet run
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrxjwDVpxkmgMAI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.webp)" %}
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery).
+N> You can refer to the [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) feature tour to explore its key features and capabilities. You can also browse the [Blazor Media Query examples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery) to learn how to render and configure the component.
## See also
-1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
+1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+4. [Breakpoints in Blazor Media Query Component](https://blazor.syncfusion.com/documentation/media-query/break-points)
diff --git a/blazor/media-query/getting-started.md b/blazor/media-query/getting-started.md
index 8ca4dffaf1..f0c9233a7a 100644
--- a/blazor/media-query/getting-started.md
+++ b/blazor/media-query/getting-started.md
@@ -113,12 +113,12 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
## Add import namespaces
-After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
+After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor.Core` namespace.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
{% endhighlight %}
{% endtabs %}
@@ -158,10 +158,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component inside the razor file.
+The Media Query component monitors the viewport width and updates the ActiveBreakPoint value as the screen size changes between defined breakpoints such as Small, Medium, and Large. This value can be used to conditionally apply styles or modify the layout. In the following example, the [ActiveBreakPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) parameter is used to determine the currently active breakpoint and dynamically update the layout based on the screen size.
+
{% tabs %}
{% highlight razor tabtitle="Home.razor" %}
-@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Core
@@ -428,7 +430,11 @@ dotnet run
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrdtmDhzdYJeDlu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.webp)" %}
+N> You can refer to the [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) feature tour to explore its key features and capabilities. You can also browse the [Blazor Media Query examples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery) to learn how to render and configure the component.
+
## See also
-1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+4. [Breakpoints in Blazor Media Query Component](https://blazor.syncfusion.com/documentation/media-query/break-points)
diff --git a/blazor/mention/getting-started-webapp.md b/blazor/mention/getting-started-webapp.md
index 2ee7c8dcb7..1bb7ff74ec 100644
--- a/blazor/mention/getting-started-webapp.md
+++ b/blazor/mention/getting-started-webapp.md
@@ -315,6 +315,5 @@ In the below example, the `Target` property of the Mention component is set to t
## See also
-1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
diff --git a/blazor/mention/getting-started-with-server-app.md b/blazor/mention/getting-started-with-server-app.md
index 70cceef718..b0728db77c 100644
--- a/blazor/mention/getting-started-with-server-app.md
+++ b/blazor/mention/getting-started-with-server-app.md
@@ -309,5 +309,5 @@ In the below example, the `Target` property of the Mention component is set to t
## See also
-1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
\ No newline at end of file
diff --git a/blazor/mention/getting-started.md b/blazor/mention/getting-started.md
index 8292711ee7..4e0c704b60 100644
--- a/blazor/mention/getting-started.md
+++ b/blazor/mention/getting-started.md
@@ -302,6 +302,5 @@ In the below example, the `Target` property of the Mention component is set to t
## See also
-1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/message/customization.md b/blazor/message/customization.md
index 401e3cfe67..447da1eeef 100644
--- a/blazor/message/customization.md
+++ b/blazor/message/customization.md
@@ -57,6 +57,7 @@ The following example shows the rounded and squared appearance of the message, w
{% tabs %}
{% highlight razor %}
+@using Syncfusion.Blazor
@using Syncfusion.Blazor.Notifications
@@ -137,10 +138,8 @@ The following example shows the message which renders without any script referen
{% tabs %}
{% highlight razor %}
-@using Syncfusion.Blazor.Notifications
-
-
+
Please read the comments carefully
diff --git a/blazor/multiselect-dropdown/data-binding.md b/blazor/multiselect-dropdown/data-binding.md
index 5e63002c90..fe14eccf4f 100644
--- a/blazor/multiselect-dropdown/data-binding.md
+++ b/blazor/multiselect-dropdown/data-binding.md
@@ -198,7 +198,7 @@ The [Web API adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
### Custom adaptor
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors to perform manual operations on data. This can be used to implement custom data binding and editing operations in the MultiSelect component.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors to perform manual operations on data. This can be used to implement custom data binding and editing operations in the MultiSelect component.
For custom data binding in the MultiSelect, use the `DataAdaptor` class. This abstract class acts as the base for a custom adaptor.
@@ -245,7 +245,7 @@ The following example demonstrates remote data binding with offline mode enabled
## Entity Framework
-Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the MultiSelect component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-orm/entityframework) in the MultiSelect component.
#### Create DBContext class
diff --git a/blazor/multiselect-dropdown/events.md b/blazor/multiselect-dropdown/events.md
index 3ad412aa53..8da587d953 100644
--- a/blazor/multiselect-dropdown/events.md
+++ b/blazor/multiselect-dropdown/events.md
@@ -1122,4 +1122,4 @@ The following table summarizes all available events in the [`MultiSelectEvents`]
- [MultiSelect Dropdown filtering](https://blazor.syncfusion.com/documentation/multiselect-dropdown/filtering)
- [MultiSelect Dropdown custom value](https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value)
- [MultiSelect Dropdown virtualization](https://blazor.syncfusion.com/documentation/multiselect-dropdown/virtualization)
-- [Live demo: Blazor MultiSelect Dropdown](https://blazor.syncfusion.com/demos/multiselect-dropdown/default-functionalities)
+- [Live demo: Blazor MultiSelect Dropdown](https://blazor.syncfusion.com/demos/multiselect-dropdown/default-functionalities?theme=fluent2)
diff --git a/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md b/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
index 0c7673072e..64195ace53 100644
--- a/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
+++ b/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
@@ -40,4 +40,4 @@ To see a live example of the Numeric TextBox configured for the numeric keyboard
[Blazor Playground - Numeric Textbox](https://blazorplayground.syncfusion.com/embed/rDLpjJrOLrHzOprq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5)
**Additional References:**
-- [MDN Web Docs: input type="tel"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)
+- [MDN Web Docs: input type="tel"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/tel)
diff --git a/blazor/pivot-table/connecting-to-ORM/dapper.md b/blazor/pivot-table/connecting-to-ORM/dapper.md
new file mode 100644
index 0000000000..7470abc049
--- /dev/null
+++ b/blazor/pivot-table/connecting-to-ORM/dapper.md
@@ -0,0 +1,624 @@
+---
+layout: post
+title: Blazor Pivot Table connected to SQL Server via Dapper | Syncfusion
+description: Bind SQL Server data to the Syncfusion Blazor Pivot Table using Dapper with CRUD operations, remote data binding, and URL adaptor support.
+platform: Blazor
+control: Pivot Table
+documentation: ug
+---
+
+# Connecting SQL Server to Blazor Pivot Table Using Dapper
+
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivottable) can be connected to a Microsoft SQL Server database using the lightweight Dapper micro-ORM. This approach provides a simple way to execute SQL statements while keeping the data access layer minimal and efficient.
+
+**What is Dapper?**
+
+Dapper is a lightweight, high-performance ORM that provides a minimal abstraction over ADO.NET. It maps query results directly to C# objects with very low overhead, making it well suited for applications that need direct SQL control and fast data access.
+
+**Key Benefits of Dapper**
+
+- **High Performance**: Minimal overhead with direct ADO.NET access for fast execution.
+- **SQL Control**: Write direct SQL queries when needed, with full control over database operations.
+- **Simple and Lightweight**: Requires minimal configuration and a small learning curve.
+- **Flexible Mapping**: Maps query results to C# objects automatically using property names.
+- **Built-in Security**: Parameterized queries help prevent SQL injection.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|------------------|---------|---------|
+| Visual Studio 2022 / VS Code | Latest | Development environment with the Blazor workload |
+| .NET SDK | .NET 10 SDK or compatible | Runtime and build tools |
+| SQL Server | 2019 or later | Database server |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` | Pivot Table UI component |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` | Styling for Pivot Table components |
+| Microsoft.Data.SqlClient | 6.1.1 | SQL Server ADO.NET provider |
+| Dapper | 2.1.79 | Lightweight ORM and object mapper |
+
+## Architecture and Data Flow
+
+The sample follows a remote data binding architecture where the Blazor Pivot Table does not communicate with SQL Server directly.
+
+```text
+Blazor Pivot Table
+ ↓
+ASP.NET Core Controller
+ ↓
+Dapper
+ ↓
+Microsoft.Data.SqlClient
+ ↓
+SQL Server
+```
+
+The request flow is as follows:
+
+1. The Pivot Table sends data requests through the URL adaptor.
+2. The ASP.NET Core controller receives the request and prepares the appropriate SQL statement.
+3. Dapper executes the query against SQL Server using Microsoft.Data.SqlClient.
+4. The returned rows are mapped to C# objects and sent back to the Pivot Table.
+
+## Setting Up the SQL Server Environment with Dapper
+
+### Step 1: Create the database and table in SQL Server
+
+Create a database named `OrderDB` and an `Orders` table for the sample application. Run the following SQL script in SQL Server Management Studio, Azure Data Studio, or another SQL client connected with database creation permissions:
+
+```sql
+CREATE DATABASE OrderDB;
+GO
+
+USE OrderDB;
+GO
+
+CREATE TABLE Orders
+(
+ OrderID INT IDENTITY(1, 1) PRIMARY KEY,
+ CustomerName VARCHAR(100) NULL,
+ EmployeeID INT NULL,
+ ShipCity VARCHAR(100) NULL,
+ Freight DECIMAL(10, 2) NULL
+);
+GO
+```
+
+Optional sample data:
+
+```sql
+INSERT INTO Orders (CustomerName, EmployeeID, ShipCity, Freight) VALUES
+('Toms', 1, 'New York', 35.30),
+('Ravi', 2, 'London', 80.20),
+('Sven', 1, 'Berlin', 52.10),
+('Sara', 3, 'Madrid', 18.40),
+('Paul', 2, 'Tokyo', 64.75);
+GO
+```
+
+### Step 2: Create the Blazor Web App and install packages
+
+Create a Blazor Web App with interactive server rendering:
+
+```bash
+dotnet new blazor -n PivotTableMSSQLDapper -int Server
+cd PivotTableMSSQLDapper
+```
+
+Install the required NuGet packages:
+
+```bash
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package Microsoft.Data.SqlClient --version 6.1.1
+dotnet add package Dapper --version 2.1.79
+```
+
+### Step 3: Configure the connection string
+
+The connection string is stored in `appsettings.json` under the `ConnectionStrings` section.
+
+```json
+{
+ "ConnectionStrings": {
+ "SQLServer": "Server=;Database=OrderDB;User Id=;Password=;TrustServerCertificate=True;"
+ },
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*"
+}
+```
+
+Replace the placeholder values with the values that match your SQL Server environment:
+
+- `Server`: SQL Server host name or instance name.
+- `Database`: Database name, such as `OrderDB`.
+- `User Id`: SQL Server login name.
+- `Password`: SQL Server login password.
+- `TrustServerCertificate`: Set to `True` for local development scenarios when needed.
+
+For Windows authentication, use a connection string such as:
+
+```json
+"SQLServer": "Server=;Database=OrderDB;Integrated Security=True;TrustServerCertificate=True;"
+```
+
+### Step 4: Create the controller with Dapper
+
+The Pivot Table sample uses an ASP.NET Core controller to expose REST endpoints for the Pivot Table. The controller uses Dapper to open a SQL connection and execute queries against the SQL Server database.
+
+Create a controller named `OrderController` in the `Controllers` folder with the following implementation:
+
+```csharp
+using System.ComponentModel.DataAnnotations;
+using System.Text.Json.Serialization;
+using Dapper;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Data.SqlClient;
+using Syncfusion.Blazor.Data;
+
+namespace PivotTableMSSQLDapper.Controllers
+{
+ [ApiController]
+ [Route("api/[controller]")]
+ public class OrderController : ControllerBase
+ {
+ private readonly string connectionString;
+
+ public OrderController(IConfiguration configuration)
+ {
+ connectionString = configuration.GetConnectionString("SQLServer")
+ ?? throw new InvalidOperationException(
+ "The SQL Server connection string is not configured.");
+ }
+
+ [HttpPost]
+ public object Post([FromBody] DataManagerRequest request)
+ {
+ _ = request;
+
+ List orders = GetOrderData();
+
+ return new
+ {
+ result = orders,
+ count = orders.Count
+ };
+ }
+
+ private List GetOrderData()
+ {
+ const string query = @"
+ SELECT
+ OrderID,
+ CustomerName,
+ EmployeeID,
+ Freight,
+ ShipCity
+ FROM Orders
+ ORDER BY OrderID";
+
+ using SqlConnection connection = new(connectionString);
+
+ return connection.Query(query).ToList();
+ }
+
+ [HttpPost("Insert")]
+ public IActionResult Insert([FromBody] CRUDModel value)
+ {
+ if (value.Value is not Order order)
+ {
+ return BadRequest();
+ }
+
+ const string query = @"
+ INSERT INTO Orders
+ (
+ CustomerName,
+ EmployeeID,
+ Freight,
+ ShipCity
+ )
+ OUTPUT INSERTED.OrderID
+ VALUES
+ (
+ @CustomerName,
+ @EmployeeID,
+ @Freight,
+ @ShipCity
+ );";
+
+ using SqlConnection connection = new(connectionString);
+
+ order.OrderID = connection.ExecuteScalar(query, order);
+
+ return Ok(order);
+ }
+
+ [HttpPost("Update")]
+ public IActionResult Update([FromBody] CRUDModel value)
+ {
+ if (value.Value is not Order order ||
+ !order.OrderID.HasValue)
+ {
+ return BadRequest();
+ }
+
+ const string query = @"
+ UPDATE Orders
+ SET
+ CustomerName = @CustomerName,
+ EmployeeID = @EmployeeID,
+ Freight = @Freight,
+ ShipCity = @ShipCity
+ WHERE OrderID = @OrderID";
+
+ using SqlConnection connection = new(connectionString);
+
+ int rowsAffected = connection.Execute(query, order);
+
+ return rowsAffected == 0
+ ? NotFound()
+ : Ok(order);
+ }
+
+ [HttpPost("Delete")]
+ public IActionResult Delete([FromBody] CRUDModel value)
+ {
+ if (!int.TryParse(value.Key?.ToString(), out int orderId))
+ {
+ return BadRequest();
+ }
+
+ const string query = @"
+ DELETE FROM Orders
+ WHERE OrderID = @OrderID";
+
+ using SqlConnection connection = new(connectionString);
+
+ int rowsAffected = connection.Execute(
+ query,
+ new { OrderID = orderId });
+
+ return rowsAffected == 0
+ ? NotFound()
+ : NoContent();
+ }
+
+ public class Order
+ {
+ [Key]
+ public int? OrderID { get; set; }
+
+ public string? CustomerName { get; set; }
+
+ public int? EmployeeID { get; set; }
+
+ public decimal? Freight { get; set; }
+
+ public string? ShipCity { get; set; }
+ }
+
+ public class CRUDModel where T : class
+ {
+ [JsonPropertyName("action")]
+ public string? Action { get; set; }
+
+ [JsonPropertyName("keyColumn")]
+ public string? KeyColumn { get; set; }
+
+ [JsonPropertyName("key")]
+ public object? Key { get; set; }
+
+ [JsonPropertyName("value")]
+ public T? Value { get; set; }
+
+ [JsonPropertyName("added")]
+ public List? Added { get; set; }
+
+ [JsonPropertyName("changed")]
+ public List? Changed { get; set; }
+
+ [JsonPropertyName("deleted")]
+ public List? Deleted { get; set; }
+
+ [JsonPropertyName("params")]
+ public IDictionary? Params { get; set; }
+ }
+ }
+}
+```
+
+The read endpoint returns all records. The sample ignores sorting, filtering, paging, and grouping values from `DataManagerRequest`; add server-side query handling if the data set is large.
+
+Dapper performs object mapping by matching SQL column names to C# property names. The `OrderID`, `CustomerName`, `EmployeeID`, `Freight`, and `ShipCity` columns map directly to the matching properties on the `Order` class.
+
+### Step 5: Register services and assets
+
+Update `Program.cs` to register Syncfusion services. If your project uses a Syncfusion license key, register it before `builder.Build()`.
+
+```csharp
+using PivotTableMSSQLDapper.Components;
+using Syncfusion.Blazor;
+using Syncfusion.Licensing;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
+builder.Services.AddSyncfusionBlazor();
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+builder.Services.AddControllers();
+
+var app = builder.Build();
+
+if (!app.Environment.IsDevelopment())
+{
+ app.UseExceptionHandler("/Error", createScopeForErrors: true);
+ app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.MapControllers();
+app.UseAntiforgery();
+app.MapStaticAssets();
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
+```
+
+Add the Syncfusion theme and script references to `Components/App.razor` inside the document `` and ``:
+
+```html
+
+
+```
+
+### Step 6: Configure the Pivot Table with the URL adaptor
+
+The pivot table binds to the SQL Server-backed API through the `SfDataManager` configured with `Adaptors.UrlAdaptor`. The `Url`, `InsertUrl`, `UpdateUrl`, and `RemoveUrl` properties point at the controller actions created in the previous step.
+
+Open `Components/Pages/Home.razor` and replace its contents with the following markup:
+
+```cshtml
+@page "/"
+@rendermode InteractiveServer
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.PivotView
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private void BeginDrillThrough(BeginDrillThroughEventArgs args)
+ {
+ for (int i = 0; i < args.GridObj.Columns.Count; i++)
+ {
+ if (args.GridObj.Columns[i].Field == "OrderID")
+ {
+ args.GridObj.Columns[i].IsPrimaryKey = true;
+ }
+ else
+ {
+ args.GridObj.Columns[i].Visible = true;
+ }
+ }
+ }
+
+ public class Order
+ {
+ public int OrderID { get; set; }
+
+ public string CustomerName { get; set; } = string.Empty;
+
+ public int EmployeeID { get; set; }
+
+ public decimal Freight { get; set; }
+
+ public string ShipCity { get; set; } = string.Empty;
+ }
+}
+```
+
+The `BeginDrillThrough` event marks `OrderID` as the edit dialog grid's primary key. This is required so update and delete requests include the key value expected by the controller.
+
+Relative API URLs are used so the adaptor follows the current scheme, host, and port. If you use absolute URLs, make sure they match the URL in `Properties/launchSettings.json`.
+
+## URL Adaptor Configuration
+
+The URL Adaptor is the contract between the Blazor Pivot Table and the SQL Server-backed API. It works as follows:
+
+1. The Pivot Table serializes its current data state into a `DataManagerRequest`.
+2. The `SfDataManager` posts that object to the `Url` endpoint.
+3. The controller deserializes the request, queries SQL Server through Dapper, and returns `{ result, count }`.
+4. For write operations, the Pivot Table posts a `CRUDModel` payload to the matching insert, update, or remove endpoint.
+
+```html
+
+
+```
+
+| Property | Purpose | Controller Action |
+|----------|---------|-------------------|
+| `Url` | Reads data from the server | `POST /api/Order` |
+| `InsertUrl` | Adds a new record | `POST /api/Order/Insert` |
+| `UpdateUrl` | Updates an existing record | `POST /api/Order/Update` |
+| `RemoveUrl` | Deletes a record | `POST /api/Order/Delete` |
+
+## API Endpoints
+
+The `OrderController` exposes the following REST endpoints:
+
+| Method | Route | Payload | Description |
+|--------|-------|---------|-------------|
+| `POST` | `/api/Order` | `DataManagerRequest` | Returns all order records as `{ result, count }`. |
+| `POST` | `/api/Order/Insert` | `CRUDModel` with `value` | Inserts a new order into the `Orders` table and returns the generated `OrderID`. |
+| `POST` | `/api/Order/Update` | `CRUDModel` with `value.OrderID` | Updates an existing order filtered by `OrderID`. |
+| `POST` | `/api/Order/Delete` | `CRUDModel` with `key` | Deletes an order using the numeric key. |
+
+**Sample read response:**
+
+```json
+{
+ "result": [
+ { "orderID": 1, "customerName": "Toms", "employeeID": 1, "shipCity": "New York", "freight": 35.30 },
+ { "orderID": 2, "customerName": "Ravi", "employeeID": 2, "shipCity": "London", "freight": 80.20 }
+ ],
+ "count": 2
+}
+```
+
+**Sample insert request:**
+
+```json
+{
+ "action": "insert",
+ "value": {
+ "customerName": "Maria",
+ "employeeID": 4,
+ "shipCity": "Paris",
+ "freight": 42.75
+ }
+}
+```
+
+**Sample update request:**
+
+```json
+{
+ "action": "update",
+ "value": {
+ "orderID": 1,
+ "customerName": "Toms",
+ "employeeID": 1,
+ "shipCity": "New York",
+ "freight": 39.50
+ }
+}
+```
+
+**Sample delete request:**
+
+```json
+{
+ "action": "remove",
+ "key": 1,
+ "keyColumn": "OrderID"
+}
+```
+
+## CRUD Operations
+
+The Pivot Table performs CRUD operations through the edit dialog and cell editing. Each operation calls the corresponding controller endpoint, which executes the appropriate SQL command through Dapper.
+
+### Data Retrieval Operation
+
+The read operation loads the SQL Server rows into the Pivot Table so the summarized view can render. The controller receives the request from the URL Adaptor and executes a Dapper `Query()` call against the `Orders` table.
+
+```csharp
+return connection.Query(query).ToList();
+```
+
+### Insert Operation
+
+The insert action receives the new row through the `value` property of the `CRUDModel`. The controller uses a parameterized `INSERT` statement and returns the identity value generated by SQL Server.
+
+```csharp
+order.OrderID = connection.ExecuteScalar(query, order);
+return Ok(order);
+```
+
+### Update Operation
+
+The update action uses `value.OrderID` to identify the existing record. It returns `NotFound` when the update affects zero rows.
+
+```csharp
+int rowsAffected = connection.Execute(query, order);
+return rowsAffected == 0 ? NotFound() : Ok(order);
+```
+
+### Delete Operation
+
+The delete action receives the primary key in the `key` property of the `CRUDModel`. It returns `NoContent()` when the removal succeeds and `NotFound` when no matching row exists.
+
+```csharp
+int rowsAffected = connection.Execute(query, new { OrderID = orderId });
+return rowsAffected == 0 ? NotFound() : NoContent();
+```
+
+## Run the Application
+
+Build and run the application:
+
+```powershell
+dotnet restore
+dotnet build
+dotnet run
+```
+
+Open the URL shown in the terminal output. The Pivot Table loads SQL Server data through the controller and Dapper.
+
+
+
+## Troubleshooting
+
+| Symptom | Likely Cause | Resolution |
+|---------|--------------|------------|
+| Pivot Table shows no data | Controller not reachable or API returned an error | Verify the application is running and inspect the browser network panel. |
+| `405 Method Not Allowed` on read | The `POST /api/Order` action is missing or routed incorrectly | Confirm `OrderController` has `[ApiController]`, the `Post` action has `[HttpPost]`, and `AddControllers()` plus `MapControllers()` are present in `Program.cs`. |
+| `SqlException` or `Cannot connect to server` | SQL Server is not running or configuration is wrong | Start SQL Server and confirm the connection string values. |
+| `Invalid object name 'Orders'` | Table not created or wrong database | Run the SQL script in Step 1 against the `OrderDB` database. |
+| Insert/Update/Delete does nothing | The edit dialog does not send a valid primary key | Confirm `OrderID` is present in the payload and set as `IsPrimaryKey` in `BeginDrillThrough`. |
+| Insert returns a record without `OrderID` | The insert query does not return the generated identity value | Use `OUTPUT INSERTED.OrderID` and assign the result to `order.OrderID`. |
+| CRUD changes do not persist | Validation or database command failed | Inspect the API response and server logs; verify required fields and table permissions. |
+| `Login failed for user ''` | SQL Server login not mapped to a database user, or wrong credentials | Verify the SQL Server login exists and has the required permissions on `OrderDB.Orders`. |
+
+## Implementation Recap
+
+The implementation uses:
+
+1. A SQL Server `OrderDB` database with an `Orders` table.
+2. A Blazor Web App with interactive server rendering.
+3. Syncfusion Blazor Pivot Table and URL adaptor packages.
+4. An `appsettings.json` connection string read through `IConfiguration`.
+5. An `OrderController` with read and CRUD endpoints using Dapper.
+6. `SfDataManager` configured with relative API URLs.
+
+## Complete Sample Repository
+
+A complete sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/syncfusion-blazor-pivot-table-dapper-multi-database-binding-sample/tree/master).
+
+## Summary
+
+This guide demonstrates how to create a SQL Server-backed Syncfusion Blazor Pivot Table using Dapper, URL adaptor remote binding, and CRUD endpoints.
diff --git a/blazor/pivot-table/connecting-to-ORM/entityframework.md b/blazor/pivot-table/connecting-to-ORM/entityframework.md
new file mode 100644
index 0000000000..35fd0ad597
--- /dev/null
+++ b/blazor/pivot-table/connecting-to-ORM/entityframework.md
@@ -0,0 +1,893 @@
+---
+layout: post
+title: Blazor Pivot Table with SQL Server Using EF Core | Syncfusion
+description: Bind SQL Server data to the Syncfusion Blazor Pivot Table using Entity Framework Core with CRUD operations, remote data binding, and URL adaptor support.
+platform: Blazor
+control: Pivot Table
+documentation: ug
+---
+
+# Connecting SQL Server to Blazor Pivot Table with EF Core
+
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivottable) can be connected to a Microsoft SQL Server database using Entity Framework Core. This approach provides a clean and maintainable data-access layer for Blazor applications while keeping the Pivot Table integration simple and scalable.
+
+**What is Entity Framework Core?**
+
+Entity Framework Core is a modern object-relational mapper (ORM) for .NET. It lets developers work with strongly typed .NET objects while EF Core translates these operations into SQL statements for SQL Server. This makes the application easier to maintain and reduces the amount of manual SQL code required.
+
+**Key Benefits of Entity Framework Core**
+
+- **Structured Data Access**: Work with entities and DbContext instead of manually composing SQL statements.
+- **Strongly Typed Models**: Build applications around C# classes that map directly to database tables.
+- **Simplified CRUD**: Perform create, read, update, and delete operations through EF Core methods.
+- **Database Abstraction**: Focus on application logic while EF Core handles the database interaction.
+- **Scalable Architecture**: Separate models, DbContext, and controllers for cleaner application design.
+
+## Prerequisites
+
+Ensure the following software and packages are installed before proceeding:
+
+| Software/Package | Version | Purpose |
+|------------------|---------|---------|
+| Visual Studio 2022 / VS Code | Visual Studio 2022 17.14+ or current VS Code | Development environment; Visual Studio requires the **ASP.NET and web development** workload |
+| .NET SDK | .NET 10 SDK (`net10.0` target framework) | Runtime and build tools |
+| SQL Server | 2019 or later | Database server |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` | Pivot Table UI component |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` | Styling for Pivot Table components |
+| Microsoft.EntityFrameworkCore.SqlServer | 10.0.10 | SQL Server provider for EF Core |
+
+The versions above are the tested combination for this guide. Keep all Syncfusion packages on the same version and all Microsoft EF Core packages on the same version if you update them.
+
+You also need:
+
+- A Syncfusion account and a valid license key when using packages from NuGet.org or a trial installer. See [Register a Syncfusion license key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application).
+- A SQL Server login that can connect to `OrderDB` and read, insert, update, and delete rows in `dbo.Orders`.
+- Permission to create a database and table for Step 1. Otherwise, ask a database administrator to run the script and grant the application login access.
+
+## Architecture and Data Flow
+
+The sample follows a remote data binding architecture where the Blazor Pivot Table does not communicate with SQL Server directly.
+
+```text
+Syncfusion Blazor Pivot Table
+ ↓
+ASP.NET Core Controller
+ ↓
+ApplicationDbContext
+ ↓
+Entity Framework Core
+ ↓
+SQL Server
+```
+
+The request flow is as follows:
+
+1. The Pivot Table sends data requests through the URL adaptor.
+2. The ASP.NET Core controller receives the request and uses ApplicationDbContext.
+3. For reads, the sample queries all rows through Entity Framework Core. For writes, the controller performs the requested insert, update, or delete operation.
+4. The returned rows are mapped to C# entity objects and sent back to the Pivot Table.
+
+## SQL Server and Entity Framework Core Setup
+
+### Step 1: Create the database and table in SQL Server
+
+First, create the SQL Server database structure that will store the order records used by the Pivot Table.
+
+**Instructions**
+
+1. Open SQL Server Management Studio (SSMS) and connect to your local SQL Server instance.
+2. Open a new query window and run the SQL script below.
+3. If you use SQL authentication, confirm that SQL Server authentication is enabled and that the application login is mapped to `OrderDB`.
+4. Run the validation query shown after the sample-data script and confirm that it returns the expected rows.
+
+Run the following SQL script:
+
+```sql
+IF DB_ID('OrderDB') IS NULL
+BEGIN
+ CREATE DATABASE OrderDB;
+END
+GO
+
+USE OrderDB;
+GO
+
+IF OBJECT_ID('dbo.Orders', 'U') IS NULL
+BEGIN
+ CREATE TABLE Orders
+ (
+ OrderID INT IDENTITY(1, 1) PRIMARY KEY,
+ CustomerName VARCHAR(100) NULL,
+ EmployeeID INT NULL,
+ ShipCity VARCHAR(100) NULL,
+ Freight DECIMAL(10, 2) NULL
+ );
+END
+GO
+```
+
+Optional sample data:
+
+```sql
+IF NOT EXISTS (SELECT 1 FROM Orders)
+BEGIN
+ INSERT INTO Orders (CustomerName, EmployeeID, ShipCity, Freight) VALUES
+ ('Toms', 1, 'New York', 35.30),
+ ('Ravi', 2, 'London', 80.20),
+ ('Sven', 1, 'Berlin', 52.10),
+ ('Sara', 3, 'Madrid', 18.40),
+ ('Paul', 2, 'Tokyo', 64.75);
+END
+GO
+```
+
+Run the following validation query:
+
+```sql
+SELECT OrderID, CustomerName, EmployeeID, ShipCity, Freight
+FROM Orders
+ORDER BY OrderID;
+```
+
+Confirm that the query returns the five sample rows (or your existing rows). This verifies that the table is available before connecting the Blazor application.
+
+### Step 2: Create the Blazor Web App
+
+Create a Blazor Web App if you do not already have one:
+
+```bash
+dotnet new blazor -n PivotTableMSSQLEFCore --framework net10.0 --interactivity Server
+cd PivotTableMSSQLEFCore
+```
+
+In Visual Studio, create a new **Blazor Web App** project and select **Interactive render mode: Server**.
+
+### Step 3: Install Required NuGet Packages
+
+The Blazor Web App project is the one that will receive the Syncfusion and EF Core packages.
+
+**Method 1: Using the .NET CLI**
+
+```bash
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 10.0.10
+```
+
+**Method 2: Using NuGet Package Manager UI**
+
+1. Open Visual Studio and navigate to **Tools > NuGet Package Manager > Manage NuGet Packages for Solution**.
+2. Search for and install each package individually:
+
+- `Syncfusion.Blazor.PivotTable`
+- `Syncfusion.Blazor.Themes`
+- `Microsoft.EntityFrameworkCore.SqlServer`
+
+All required packages are now installed.
+
+**Project file reference:** The installed packages appear in the project file as package references for the Syncfusion UI components and EF Core SQL provider.
+
+### Step 4: Configure the Connection String
+
+The connection string is stored in `appsettings.json` under the `ConnectionStrings` section.
+
+```json
+{
+ "ConnectionStrings": {
+ "SQLServer": "Server=;Database=OrderDB;User Id=;Password=;TrustServerCertificate=True;"
+ },
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*"
+}
+```
+
+Replace the placeholder values with the values that match your SQL Server environment:
+
+- `Server`: SQL Server host name or instance name.
+- `Database`: Database name, such as `OrderDB`.
+- `User Id`: SQL Server login name.
+- `Password`: SQL Server login password.
+- `TrustServerCertificate`: Set to `True` for local development scenarios when needed.
+
+**Connection string components:**
+
+| Component | Description |
+|-----------|-------------|
+| Server | The name of the SQL Server instance or host address |
+| Database | The database that contains the `Orders` table |
+| User Id | The SQL login used to connect to the database |
+| Password | The password for that SQL login |
+| TrustServerCertificate | Enables trusted local-development connections when required |
+
+**Store credentials safely**
+
+Do not store production credentials in source control. For local development, store the connection string with user secrets:
+
+```bash
+dotnet user-secrets init
+dotnet user-secrets set "ConnectionStrings:SQLServer" "Server=;Database=OrderDB;User Id=;Password=;TrustServerCertificate=True;"
+```
+
+In deployed environments, use the `ConnectionStrings__SQLServer` environment variable or a managed secret store.
+
+For Windows authentication, use a trusted connection string instead:
+
+```json
+"SQLServer": "Server=;Database=OrderDB;Trusted_Connection=True;TrustServerCertificate=True;"
+```
+
+Named instances use a server value such as `localhost\SQLEXPRESS`; a TCP endpoint can use `localhost,1433`. See [SQL Server connection-string syntax](https://learn.microsoft.com/en-us/sql/connect/ado-net/connection-string-syntax?view=sql-server-ver17).
+
+### Step 5: Create the Entity Model
+
+The sample uses an `Order` entity model to represent each row in the `Orders` table. This model is defined in the `Models` folder.
+
+Create a file named `Models/Order.cs` with the following implementation:
+
+```csharp
+using System.ComponentModel.DataAnnotations;
+
+namespace PivotTableMSSQLEFCore.Models
+{
+ public class Order
+ {
+ [Key]
+ public int OrderID { get; set; }
+
+ public string? CustomerName { get; set; }
+
+ public int? EmployeeID { get; set; }
+
+ public decimal? Freight { get; set; }
+
+ public string? ShipCity { get; set; }
+ }
+}
+```
+
+This model is the shape used by EF Core when reading data from and writing data to the `Orders` table.
+
+**Important details**
+- The property names should align closely with the SQL column names to reduce mapping confusion.
+- The `[Key]` attribute marks `OrderID` as the primary key and helps the CRUD operations identify the record to update or delete.
+- Nullable properties are used here because the sample table allows null values for several columns. `OrderID` is not nullable because it is the primary key.
+
+### Step 6: Create the DbContext
+
+Entity Framework Core uses `DbContext` to manage the entity model and expose the database set. Create a `Data/ApplicationDbContext.cs` file with the following implementation:
+
+```csharp
+using Microsoft.EntityFrameworkCore;
+using PivotTableMSSQLEFCore.Models;
+
+namespace PivotTableMSSQLEFCore.Data
+{
+ public class ApplicationDbContext : DbContext
+ {
+ public ApplicationDbContext(
+ DbContextOptions options)
+ : base(options)
+ {
+ }
+
+ public DbSet Orders => Set();
+ }
+}
+```
+
+The `DbSet` property maps the `Order` entity to the `Orders` table in SQL Server.
+
+**Why this matters:** The `DbContext` is the bridge between the ASP.NET Core application and SQL Server. It tracks entities, generates SQL commands, and exposes the `Orders` set that the controller uses for reading and writing data.
+
+### Step 7: Configure Application Services and Static Assets
+
+Update `Program.cs` to register the required Syncfusion, Razor component, API controller, and Entity Framework Core services.
+
+Store the Syncfusion license key outside source control:
+
+```bash
+dotnet user-secrets init
+dotnet user-secrets set "SyncfusionLicenseKey" ""
+```
+
+```csharp
+using Microsoft.EntityFrameworkCore;
+using PivotTableMSSQLEFCore.Components;
+using PivotTableMSSQLEFCore.Data;
+using Syncfusion.Blazor;
+using Syncfusion.Licensing;
+
+var builder = WebApplication.CreateBuilder(args);
+
+string syncfusionLicenseKey = builder.Configuration["SyncfusionLicenseKey"]
+ ?? throw new InvalidOperationException(
+ "Configuration value 'SyncfusionLicenseKey' is missing.");
+SyncfusionLicenseProvider.RegisterLicense(syncfusionLicenseKey);
+
+builder.Services.AddSyncfusionBlazor();
+
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+
+builder.Services.AddControllers();
+
+string connectionString = builder.Configuration.GetConnectionString("SQLServer")
+ ?? throw new InvalidOperationException(
+ "Connection string 'SQLServer' is missing.");
+
+builder.Services.AddDbContext(options =>
+ options.UseSqlServer(connectionString));
+
+var app = builder.Build();
+
+if (!app.Environment.IsDevelopment())
+{
+ app.UseExceptionHandler("/Error", createScopeForErrors: true);
+ app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.MapControllers();
+
+app.UseAntiforgery();
+
+app.MapStaticAssets();
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
+```
+
+This registration ensures that the controller receives an `ApplicationDbContext` instance that is already configured to use the SQL Server connection string.
+
+**Service registrations**
+- `AddSyncfusionBlazor()` enables the Pivot Table component and its supporting services.
+- `AddRazorComponents()` and `AddInteractiveServerComponents()` prepare the Blazor app for interactive rendering.
+- `AddControllers()` exposes the API endpoints used by the URL Adaptor.
+- `AddDbContext()` wires EF Core to the SQL Server connection string supplied by the application configuration providers.
+
+Add the Syncfusion theme stylesheet inside the `` element and the script before the closing `` element in `Components/App.razor`:
+
+```html
+
+
+```
+
+### Step 8: Create the Controller with Entity Framework Core
+
+The controller acts as the bridge between the Blazor Pivot Table and the EF Core data layer. It exposes the API endpoints that the `SfDataManager` uses for reading and CRUD operations. By keeping the database logic in the controller and the entity mapping in the model and DbContext, the sample remains clean and easy to extend.
+
+The Pivot Table sample uses an ASP.NET Core controller to expose REST endpoints for the Pivot Table. The controller uses `ApplicationDbContext` and EF Core to read and write records. The read action returns the data in the `{ result, count }` format expected by the URL Adaptor, while the insert, update, and delete actions accept `CRUDModel` payloads sent by the pivot table.
+
+Create a controller named `OrderController` in the `Controllers` folder with the following implementation:
+
+```csharp
+using System.Text.Json.Serialization;
+using Microsoft.AspNetCore.Mvc;
+using PivotTableMSSQLEFCore.Data;
+using PivotTableMSSQLEFCore.Models;
+using Syncfusion.Blazor.Data;
+
+namespace PivotTableMSSQLEFCore.Controllers
+{
+ [ApiController]
+ [Route("api/[controller]")]
+ public class OrderController : ControllerBase
+ {
+ private readonly ApplicationDbContext context;
+
+ public OrderController(ApplicationDbContext context)
+ {
+ this.context = context;
+ }
+
+ [HttpPost]
+ public object Post([FromBody] DataManagerRequest request)
+ {
+ _ = request;
+
+ List dataSource = GetOrderData();
+
+ return new
+ {
+ result = dataSource,
+ count = dataSource.Count
+ };
+ }
+
+ private List GetOrderData()
+ {
+ return context.Orders
+ .OrderBy(o => o.OrderID)
+ .ToList();
+ }
+
+ [HttpPost("Insert")]
+ public IActionResult Insert([FromBody] CRUDModel? value)
+ {
+ if (value?.Value is not Order order
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "CustomerName and EmployeeID are required.");
+ }
+
+ context.Orders.Add(order);
+ context.SaveChanges();
+
+ return Ok(order);
+ }
+
+ [HttpPost("Update")]
+ public IActionResult Update([FromBody] CRUDModel? value)
+ {
+ if (value?.Value is not Order order
+ || order.OrderID <= 0
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "OrderID, CustomerName and EmployeeID are required.");
+ }
+
+ Order? existingOrder = context.Orders
+ .FirstOrDefault(o => o.OrderID == order.OrderID);
+
+ if (existingOrder == null)
+ {
+ return NotFound();
+ }
+
+ existingOrder.CustomerName = order.CustomerName;
+ existingOrder.EmployeeID = order.EmployeeID;
+ existingOrder.Freight = order.Freight;
+ existingOrder.ShipCity = order.ShipCity;
+
+ context.SaveChanges();
+
+ return Ok(existingOrder);
+ }
+
+ [HttpPost("Delete")]
+ public IActionResult Delete([FromBody] CRUDModel? value)
+ {
+ if (!int.TryParse(value?.Key?.ToString(), out int orderId))
+ {
+ return BadRequest(
+ "A numeric order key is required.");
+ }
+
+ Order? order = context.Orders
+ .FirstOrDefault(o => o.OrderID == orderId);
+
+ if (order == null)
+ {
+ return NotFound();
+ }
+
+ context.Orders.Remove(order);
+ context.SaveChanges();
+
+ return NoContent();
+ }
+
+ public class CRUDModel where T : class
+ {
+ [JsonPropertyName("action")]
+ public string? Action { get; set; }
+
+ [JsonPropertyName("keyColumn")]
+ public string? KeyColumn { get; set; }
+
+ [JsonPropertyName("key")]
+ public object? Key { get; set; }
+
+ [JsonPropertyName("value")]
+ public T? Value { get; set; }
+
+ [JsonPropertyName("added")]
+ public List? Added { get; set; }
+
+ [JsonPropertyName("changed")]
+ public List? Changed { get; set; }
+
+ [JsonPropertyName("deleted")]
+ public List? Deleted { get; set; }
+
+ [JsonPropertyName("params")]
+ public IDictionary? Params { get; set; }
+ }
+ }
+}
+```
+
+The read action intentionally returns all records because the Pivot Table needs the raw rows for client-side aggregation. The `DataManagerRequest` is accepted to satisfy the URL Adaptor contract but is not used by this small sample. For a large dataset, do not use this implementation unchanged; design a server-side aggregation or virtualization strategy appropriate to the required Pivot Table features.
+
+The `CRUDModel` payload uses `value` for insert and update and `key` for delete. The URL Adaptor can also send `action`, `keyColumn`, and custom `params`; `added`, `changed`, and `deleted` are used by batch requests, which this Normal edit-mode sample does not support. Successful inserts and updates return the saved entity, successful deletes return HTTP 204, invalid payloads return HTTP 400, and unknown keys return HTTP 404.
+
+The sample lets unexpected `DbUpdateException` failures reach ASP.NET Core's exception handler and logs. In a production API, catch database exceptions at an application boundary, log the complete exception, and return a safe [Problem Details](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/error-handling-api?view=aspnetcore-10.0&tabs=minimal-apis) response. Add a concurrency token if multiple users can edit the same rows.
+
+**How Entity Framework Core maps data to C# objects**
+
+Entity Framework Core maps rows from the `Orders` table into the `Order` class using the `DbSet` exposed by `ApplicationDbContext`. The controller retrieves the data by calling `context.Orders` and uses LINQ to order the results before materializing them into `Order` objects.
+
+This means the following table columns:
+
+- `OrderID`
+- `CustomerName`
+- `EmployeeID`
+- `Freight`
+- `ShipCity`
+
+are mapped directly to the corresponding properties of the `Order` model.
+
+The benefit of this approach is that the controller does not need to manually build a data table or manually map each column. EF Core handles the translation between SQL rows and .NET objects so the application code stays focused on business and UI logic.
+
+### Step 9: Configure the Pivot Table with the URL Adaptor
+
+The pivot table binds to the SQL Server-backed API through the `SfDataManager` configured with `Adaptors.UrlAdaptor`. The `Url`, `InsertUrl`, `UpdateUrl`, and `RemoveUrl` properties point at the controller actions created in the previous step.
+
+Open the file named `Home.razor` in the `Components/Pages` folder and replace its contents with the following markup:
+
+```cshtml
+@page "/"
+@using PivotTableMSSQLEFCore.Models
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.PivotView
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ private void BeginDrillThrough(BeginDrillThroughEventArgs args)
+ {
+ for (int i = 0; i < args.GridObj.Columns.Count; i++)
+ {
+ if (args.GridObj.Columns[i].Field == "OrderID")
+ {
+ args.GridObj.Columns[i].IsPrimaryKey = true;
+ }
+ else
+ {
+ args.GridObj.Columns[i].Visible = true;
+ }
+ }
+ }
+}
+```
+
+The Home component has been updated successfully with the Pivot Table.
+
+**Important implementation details**
+- Relative URLs such as `api/Order` work when the Blazor app and API share the same origin. If the API runs on another origin, use the full URL and configure CORS.
+- The `BeginDrillThrough` event is essential for CRUD because it marks `OrderID` as the primary key of the edit dialog grid so update and delete operations can target the correct record.
+- The field arrangement in `PivotViewDataSourceSettings` defines the default layout that the Pivot Table uses when it first renders.
+
+Pivot Table editing applies to relational data sources. Double-click a value cell to open its drill-through grid; use that grid's Add, Edit, Delete, Update, and Cancel commands. See [Editing in the Blazor Pivot Table](https://blazor.syncfusion.com/documentation/pivot-table/editing) for supported modes and limitations.
+
+**Component explanation**
+
+- **``**: The pivot table component bound to the `Order` type.
+- **`ShowFieldList="true"`**: Displays the field list UI so end users can drag fields between rows, columns, and values at runtime.
+- **``**: Defines the default field arrangement: `EmployeeID` as a column, `CustomerName` as a row, and `Freight` as a value.
+- **``**: Wires the pivot table to the API through the URL Adaptor. The four URLs map directly to the controller actions.
+- **``**: Enables cell-level editing, adding, and deleting in `Normal` edit mode.
+- **`BeginDrillThrough` event**: When a user opens the edit dialog from a pivot cell, this handler runs and marks `OrderID` as the primary key so insert, update, and delete operations can target the correct record.
+
+### Step 10: Run the Application
+
+> **URL note:** The sample uses relative URLs such as `api/Order` because the API and Blazor app share an origin. If they are hosted on different origins, use absolute API URLs and configure a named CORS policy with the exact Blazor origin by following [ASP.NET Core CORS guidance](https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-10.0). Register the policy with `AddCors`, and call `UseCors` before `MapControllers`. Do not use `AllowAnyOrigin` with credentials.
+
+Build and run the application from the project directory.
+
+```bash
+dotnet restore
+dotnet build
+dotnet run
+```
+
+Open the application in your browser and navigate to the local development URL. The Pivot Table loads data from SQL Server through the controller and Entity Framework Core.
+
+Verify the complete flow:
+
+1. Confirm that the Pivot Table displays the sample rows as aggregated values.
+2. Double-click a value cell to open the drill-through grid.
+3. Add a row, edit it, and then delete it using the grid commands.
+4. Run the validation query from Step 1 after each operation and confirm that SQL Server contains the expected change.
+
+
+
+## URL Adaptor Configuration
+
+The URL Adaptor is the contract between the Blazor Pivot Table and the SQL Server-backed API. It works as follows:
+
+1. The Pivot Table serializes its current data state into a `DataManagerRequest`.
+2. The `SfDataManager` posts that object to the `Url` endpoint.
+3. The controller processes the request, uses EF Core to read or change data, and returns the response in the format expected by the Pivot Table.
+4. For write operations, the Pivot Table posts a `CRUDModel` payload to the matching insert, update, or remove endpoint.
+
+```cshtml
+
+
+```
+
+| Property | Purpose | Controller Action |
+|----------|---------|-------------------|
+| `Url` | Reads data from the server | `POST /api/Order` |
+| `InsertUrl` | Adds a new record | `POST /api/Order/Insert` |
+| `UpdateUrl` | Updates an existing record | `POST /api/Order/Update` |
+| `RemoveUrl` | Deletes a record | `POST /api/Order/Delete` |
+
+## API Endpoints
+
+The `OrderController` exposes the following REST endpoints:
+
+| Method | Route | Payload | Description |
+|--------|-------|---------|-------------|
+| `POST` | `/api/Order` | `DataManagerRequest` | Returns all order records as `{ result, count }`. |
+| `POST` | `/api/Order/Insert` | `CRUDModel` | Inserts a new order into the `Orders` table. |
+| `POST` | `/api/Order/Update` | `CRUDModel` | Updates an existing order filtered by `OrderID`. |
+| `POST` | `/api/Order/Delete` | `CRUDModel` | Deletes an order using the numeric key. |
+
+**Sample read response:**
+
+```json
+{
+ "result": [
+ { "orderID": 1, "customerName": "Toms", "employeeID": 1, "shipCity": "New York", "freight": 35.30 },
+ { "orderID": 2, "customerName": "Ravi", "employeeID": 2, "shipCity": "London", "freight": 80.20 }
+ ],
+ "count": 2
+}
+```
+
+## CRUD Operations
+
+The Pivot Table performs CRUD operations through the edit dialog in normal edit mode. Each operation calls the corresponding controller endpoint, which uses Entity Framework Core to persist the change to SQL Server.
+
+The flow is consistent for every action:
+
+1. The user edits or adds data in the Pivot Table UI.
+2. The Pivot Table posts the relevant payload to the controller endpoint.
+3. The controller validates the payload and uses `ApplicationDbContext` to interact with SQL Server.
+4. EF Core executes the appropriate database operation and returns a response to the client.
+
+### Data Retrieval Operation
+
+**Purpose:**
+The read operation loads the SQL Server rows into the Pivot Table so the summarized view can render. The controller receives the request from the URL Adaptor and executes a LINQ query through `ApplicationDbContext`.
+
+**Request flow:**
+1. The Pivot Table sends a `DataManagerRequest` to the `Url` endpoint.
+2. The controller receives the request and calls `GetOrderData()`.
+3. EF Core executes the query against the `Orders` table and maps the rows to `Order` entities.
+4. The controller returns `{ result, count }` to the Pivot Table.
+
+**How it works:**
+The `GetOrderData()` helper uses the `Orders` DbSet to query the database in a strongly typed way. The result is materialized as a list of `Order` objects and returned to the Pivot Table.
+
+**Controller code snippet:**
+
+```csharp
+private List GetOrderData()
+{
+ return context.Orders
+ .OrderBy(o => o.OrderID)
+ .ToList();
+}
+```
+
+This code sample shows how the controller executes the EF Core query, materializes the results into `Order` entities, and returns them to the Pivot Table.
+
+### Insert Operation
+
+**Purpose:**
+The insert operation adds a new order to the SQL Server database from the Pivot Table edit dialog. The request is posted to `/api/Order/Insert`, where the controller validates the payload and asks EF Core to add the entity.
+
+**Request flow:**
+1. The user adds a row in the Pivot Table edit dialog.
+2. The Pivot Table posts the `CRUDModel` payload to the `InsertUrl` endpoint.
+3. The controller validates the values and calls `context.Orders.Add(order)`.
+4. EF Core persists the new record to SQL Server and the Pivot Table refreshes its summarized view.
+
+**How it works:**
+The insert action receives the new row through the `value` property of the `CRUDModel`. The posted object has the default `OrderID` value; because SQL Server generates this identity column, EF Core omits it from the generated `INSERT` statement and populates it after `SaveChanges()`. On success, the action returns the saved entity.
+
+**Controller code snippet:**
+
+```csharp
+[HttpPost("Insert")]
+public IActionResult Insert([FromBody] CRUDModel? value)
+{
+ if (value?.Value is not Order order
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "CustomerName and EmployeeID are required.");
+ }
+
+ context.Orders.Add(order);
+ context.SaveChanges();
+
+ return Ok(order);
+}
+```
+
+### Update Operation
+
+**Purpose:**
+The update operation modifies an existing order directly from the Pivot Table edit dialog. The request is posted to `/api/Order/Update`, where the controller locates the entity and applies the changes through EF Core.
+
+**Request flow:**
+1. The user edits a row in the edit dialog and saves the change.
+2. The Pivot Table posts the edited row to the `UpdateUrl` endpoint.
+3. The controller loads the tracked entity from `context.Orders`, updates its values, and calls `SaveChanges()`.
+4. SQL Server updates the matching record and the Pivot Table refreshes the aggregated view.
+
+**How it works:**
+The update action uses the edited row from the `value` property and relies on `OrderID` as the key to identify the existing record. This is why the drill-through grid must mark `OrderID` as the primary key before the edit dialog is used. EF Core tracks the entity and generates the appropriate SQL update when `SaveChanges()` is called.
+
+**Controller code snippet:**
+
+```csharp
+[HttpPost("Update")]
+public IActionResult Update([FromBody] CRUDModel? value)
+{
+ if (value?.Value is not Order order
+ || order.OrderID <= 0
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "OrderID, CustomerName and EmployeeID are required.");
+ }
+
+ Order? existingOrder = context.Orders
+ .FirstOrDefault(o => o.OrderID == order.OrderID);
+
+ if (existingOrder == null)
+ {
+ return NotFound();
+ }
+
+ existingOrder.CustomerName = order.CustomerName;
+ existingOrder.EmployeeID = order.EmployeeID;
+ existingOrder.Freight = order.Freight;
+ existingOrder.ShipCity = order.ShipCity;
+
+ context.SaveChanges();
+
+ return Ok(existingOrder);
+}
+```
+
+### Delete Operation
+
+**Purpose:**
+The delete operation removes an order from the SQL Server table. The Pivot Table posts a key value to `/api/Order/Delete`, and the controller uses EF Core to remove the entity.
+
+**Request flow:**
+1. The user selects a row in the edit dialog and deletes it.
+2. The Pivot Table posts the primary key to the `RemoveUrl` endpoint.
+3. The controller loads the entity and calls `context.Orders.Remove(order)`.
+4. EF Core deletes the matching row in SQL Server and the Pivot Table refreshes to reflect the change.
+
+**How it works:**
+The delete action receives the primary key in the `key` property of the `CRUDModel`. The controller parses that value, finds the matching entity, removes it from the EF Core context, and commits the change with `SaveChanges()`. If the key does not match any row, the action returns `NotFound`.
+
+**Controller code snippet:**
+
+```csharp
+[HttpPost("Delete")]
+public IActionResult Delete([FromBody] CRUDModel? value)
+{
+ if (!int.TryParse(value?.Key?.ToString(), out int orderId))
+ {
+ return BadRequest(
+ "A numeric order key is required.");
+ }
+
+ Order? order = context.Orders
+ .FirstOrDefault(o => o.OrderID == orderId);
+
+ if (order == null)
+ {
+ return NotFound();
+ }
+
+ context.Orders.Remove(order);
+ context.SaveChanges();
+
+ return NoContent();
+}
+```
+
+### Enabling CRUD Through the Edit Dialog
+
+For CRUD operations to work correctly, the primary key column must be marked. The `BeginDrillThrough` event handler does this dynamically when the edit dialog opens:
+
+```csharp
+private void BeginDrillThrough(BeginDrillThroughEventArgs args)
+{
+ for (int i = 0; i < args.GridObj.Columns.Count; i++)
+ {
+ if (args.GridObj.Columns[i].Field == "OrderID")
+ {
+ args.GridObj.Columns[i].IsPrimaryKey = true;
+ }
+ else
+ {
+ args.GridObj.Columns[i].Visible = true;
+ }
+ }
+}
+```
+
+This step is required so the URL Adaptor knows which column to send as the key for update and delete operations.
+
+## Troubleshooting
+
+| Symptom | Likely Cause | Resolution |
+|---------|--------------|------------|
+| Pivot Table shows no data | Controller not reachable or API returned an error | Verify the application is running and inspect the browser network panel. |
+| `405 Method Not Allowed` on read | The `POST /api/Order` action is missing or routed incorrectly | Confirm `OrderController` is decorated with `[ApiController]`, the `Post` action has `[HttpPost]`, and `AddControllers()` + `MapControllers()` are present in `Program.cs`. |
+| `SqlException` or `Cannot connect to server` | SQL Server is not running or configuration is wrong | Start the SQL Server service and confirm the `Server`, `Database`, `User Id`, and `Password` values in the connection string. |
+| `Invalid object name 'Orders'` | Table not created or wrong database | Run the SQL script in Step 1 against the `OrderDB` database. |
+| Insert/Update/Delete does nothing | The drill-through grid is not sending a valid primary key | Confirm that `BeginDrillThrough` sets the `OrderID` grid column's `IsPrimaryKey` property and inspect the outgoing payload. |
+| CRUD changes do not persist | Validation or database command failed | Inspect the API response and server logs; verify required fields and table permissions. |
+| `DbUpdateException` on save | SQL Server rejected the insert, update, or delete | Inspect the inner exception and verify column types, nullability, identity settings, and table permissions. |
+| `Login failed for user ''` | SQL Server login not mapped to a database user, or wrong credentials | Verify the SQL Server login exists and has the required permissions on `OrderDB.Orders`. |
+| Syncfusion license warning | The license key is missing, invalid, or registered too late | Set `SyncfusionLicenseKey` and register it before calling `AddSyncfusionBlazor()`. |
+| Browser reports a CORS error | The API is on another origin without an allowed-origin policy | Add a named CORS policy for the exact Blazor origin and call `UseCors` before mapping controllers. |
+| API returns HTTP 400 | The URL Adaptor payload failed validation or deserialization | Inspect the response body and browser network payload; verify property names, types, and required values. |
+| API returns an antiforgery error | Antiforgery validation was added to the API without a token in the request | Either supply the antiforgery token from the client or apply validation only to endpoints designed for it. |
+
+## Complete Sample Repository
+
+A complete sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/syncfusion-blazor-pivot-table-entity-framework-multi-database-binding-sample/tree/master). Verify package versions in the repository before comparing it with this article.
+
+## Summary
+
+This guide demonstrates how to:
+
+1. Create a SQL Server database with order records using SQL Server Management Studio.
+2. Create the Blazor Web App and install the Syncfusion and Entity Framework Core packages.
+3. Configure the connection string in `appsettings.json` and read it through the EF Core service registration.
+4. Implement an `OrderController` with read and CRUD endpoints using Entity Framework Core.
+5. Register Syncfusion Blazor services, Razor components, and EF Core in `Program.cs`.
+6. Configure the Pivot Table with `SfDataManager` and `Adaptors.UrlAdaptor`.
+7. Run the application and verify the Pivot Table with the troubleshooting steps.
+
+The application now provides a complete sample for summarizing and editing SQL Server data with a modern Pivot Table interface using Entity Framework Core.
diff --git a/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md b/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md
index 6f46b52068..2fd8e28d67 100644
--- a/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md
+++ b/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md
@@ -1,269 +1,648 @@
---
layout: post
-title: "Microsoft SQL Data Binding in Blazor Pivot Table | Syncfusion®"
-component: "Pivot Table"
-description: "Learn how to connect a Microsoft SQL Server database to the Blazor Pivot Table component and much more details."
+title: Blazor Pivot Table with SQL Server via URL Adaptor | Syncfusion®
+description: Bind Microsoft SQL Server data to the Blazor Pivot Table through an ASP.NET Core API and the Syncfusion URL Adaptor.
platform: Blazor
+control: PivotTable
documentation: ug
---
-# Microsoft SQL Data Binding in Blazor Pivot Table
+# Connect SQL Server to a Blazor Pivot Table Using the URL Adaptor
-This guide explains how to connect a Microsoft SQL Server database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display Microsoft SQL data.
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) can load and edit SQL Server data through an ASP.NET Core API. [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) sends HTTP requests to the API, and the API uses [`Microsoft.Data.SqlClient`](https://www.nuget.org/packages/Microsoft.Data.SqlClient/) to access SQL Server.
-## Connecting a Microsoft SQL database to a Blazor Pivot Table
+This guide uses same-origin relative API URLs. The sample read action returns the complete `Orders` table and does not apply `DataManagerRequest` operations. Add server-side filtering, sorting, and paging before using this design with large datasets.
-This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to a Microsoft SQL database by directly retrieving data using the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library.
+## Prerequisites
-### Step 1: Set up a Blazor Pivot Table
-1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide.
+The sample was tested with the following versions and configuration:
-### Step 2: Install the System.Data.SqlClient NuGet package
-1. Open the **NuGet Package Manager** in your project solution.
-2. Search for and install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) package to enable Microsoft SQL Server connectivity.
+| Software or package | Version | Notes |
+|---|---:|---|
+| .NET SDK | 10.0 | Required to target `net10.0` |
+| Visual Studio | 2022 17.14 or later | Install the ASP.NET and web development workload; VS Code and the .NET CLI are also supported |
+| SQL Server | 2019 or later | LocalDB, Express, Developer, and supported remote editions can be used |
+| SQL Server Management Studio | Current release | Optional; another SQL client can run the scripts |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` | Keep all Syncfusion packages on the same version |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` | Provides the component theme |
+| Microsoft.Data.SqlClient | 6.1.1 | SQL Server ADO.NET provider |
-
+The application uses the Blazor Web App template with Interactive Server rendering. Syncfusion packages from NuGet.org require a valid license or trial key; follow the [license-key registration instructions](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application).
-### Step 3: Connect to the Microsoft SQL database
-In the **Index.razor** file, under the `OnInitialized` method, use the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library to connect to a Microsoft SQL database and retrieve data for the Pivot Table.
+## Microsoft SQL Server Database Setup and Application Configuration
-1. **Establish connection**: Use **SqlConnection** with a valid connection string, such as `Server=localhost;Database=Database1;Trusted_Connection=True;`, to connect to the Microsoft SQL database.
-2. **Query and fetch data**: Execute a SQL query, such as `SELECT * FROM table1`, using **SqlCommand** to retrieve data for the Pivot Table.
-3. **Structure the data**: Use the **Fill** method of **SqlDataAdapter** to populate the query results into a **DataTable**, which is then converted to a list for binding to the Pivot Table.
+### Step 1: Create the Blazor Web App
-### Step 4: Bind data to the Pivot Table
-1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
-2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data.
+Create an Interactive Server Blazor Web App:
-```cshtml
-@using Syncfusion.Blazor.PivotView;
-@using System.Data;
-@using System.Data.SqlClient;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+```powershell
+dotnet new blazor -n PivotTableMsSQL -f net10.0 -int Server
+cd PivotTableMsSQL
+```
-@code {
- private List dataSource { get; set; }
+In Visual Studio, the equivalent choices are **Blazor Web App**, **.NET 10**, **Interactive render mode: Server**, and **Interactivity location: Global**.
+
+### Step 2: Create the Database
+
+Start SQL Server and connect with an account that can create a database. Run:
+
+```sql
+IF DB_ID(N'OrderDB') IS NULL
+BEGIN
+ CREATE DATABASE OrderDB;
+END;
+GO
+
+USE OrderDB;
+GO
+
+IF OBJECT_ID(N'dbo.Orders', N'U') IS NULL
+BEGIN
+ CREATE TABLE dbo.Orders
+ (
+ OrderID INT IDENTITY(1, 1) NOT NULL
+ CONSTRAINT PK_Orders PRIMARY KEY,
+ CustomerName VARCHAR(100) NOT NULL,
+ EmployeeID INT NOT NULL,
+ ShipCity VARCHAR(100) NULL,
+ Freight DECIMAL(10, 2) NULL
+ );
+END;
+GO
+
+IF NOT EXISTS (SELECT 1 FROM dbo.Orders)
+BEGIN
+ INSERT INTO dbo.Orders (CustomerName, EmployeeID, ShipCity, Freight)
+ VALUES
+ ('Toms', 1, 'New York', 35.30),
+ ('Ravi', 2, 'London', 80.20),
+ ('Sven', 1, 'Berlin', 52.10),
+ ('Sara', 3, 'Madrid', 18.40),
+ ('Paul', 2, 'Tokyo', 64.75);
+END;
+GO
+
+SELECT OrderID, CustomerName, EmployeeID, ShipCity, Freight
+FROM dbo.Orders
+ORDER BY OrderID;
+GO
+```
- protected override void OnInitialized()
- {
- string conSTR = @"";
- string xquery = "SELECT * FROM table1";
- SqlConnection sqlConnection = new(conSTR);
- sqlConnection.Open();
- SqlCommand sqlCommand = new(xquery, sqlConnection);
- SqlDataAdapter dataAdapter = new(sqlCommand);
- DataTable dataTable = new();
- dataAdapter.Fill(dataTable);
- dataSource = (from DataRow data in dataTable.Rows
- select new OrderDetails()
- {
- Quantity = Convert.ToInt32(data["Quantity"]),
- Product= data["Product"].ToString(),
- Date = data["Date"].ToString(),
- Country = data["Country"].ToString(),
- Amount = Convert.ToDouble(data["Amount"])
- }).ToList();
- }
+The application login needs `SELECT`, `INSERT`, `UPDATE`, and `DELETE` permission on `dbo.Orders`. For example, after creating or selecting an appropriate database user:
- public class OrderDetails
- {
- public int Quantity { get; set; }
- public string Product { get; set; }
- public string Date { get; set; }
- public string Country { get; set; }
- public double Amount { get; set; }
- }
-}
+```sql
+USE OrderDB;
+GO
+GRANT SELECT, INSERT, UPDATE, DELETE ON dbo.Orders TO [YourDatabaseUser];
+GO
```
-### Step 5: Run and verify the Pivot Table
-1. Run the Blazor application.
-2. The Pivot Table will display the Microsoft SQL data, organized according to the defined configuration.
-3. The resulting Pivot Table will look like this:
+Use an account appropriate for your environment. Do not use a highly privileged login such as `sa` for the application.
+
+### Step 3: Install the Packages
-
+Run these commands in the `PivotTableMsSQL` project directory:
-## Connecting a Microsoft SQL to a Blazor Pivot Table via Web API service
+```powershell
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package Microsoft.Data.SqlClient --version 6.1.1
+```
-This section explains how to create a Web API service to fetch data from a Microsoft SQL database and connect it to the Blazor Pivot Table.
+The project file should contain:
-### Create a Web API service to fetch Microsoft SQL data
+```xml
+
+
+
+
+
+```
-Follow these steps to set up a Web API service that retrieves Microsoft SQL data for the Pivot Table.
+### Step 4: Configure the Connection String
-#### Step 1: Create an ASP.NET Core Web application
-1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**.
-2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions.
+For local development, store the connection string with .NET user secrets:
-
+```powershell
+dotnet user-secrets init
+dotnet user-secrets set "ConnectionStrings:SQLServer" "Server=localhost;Database=OrderDB;Integrated Security=True;TrustServerCertificate=True;"
+```
-#### Step 2: Install the System.Data.SqlClient NuGet package
-1. Open the **NuGet Package Manager** in your project solution.
-2. Search for and install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) package to enable Microsoft SQL Server connectivity.
+Common local alternatives are:
-
+```text
+# LocalDB
+Server=(localdb)\MSSQLLocalDB;Database=OrderDB;Integrated Security=True;TrustServerCertificate=True;
-#### Step 3: Create a Web API controller
-1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**.
-2. This controller manages data communication between the Microsoft SQL database and the Pivot Table.
+# SQL Server Express
+Server=.\SQLEXPRESS;Database=OrderDB;Integrated Security=True;TrustServerCertificate=True;
+
+# SQL Server authentication
+Server=localhost;Database=OrderDB;User Id=YOUR_USER;Password=YOUR_PASSWORD;TrustServerCertificate=True;
+```
-#### Step 4: Connect to Microsoft SQL and retrieve data
-In the **PivotController.cs** file, use the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library to connect to a Microsoft SQL database and fetch data for the Pivot Table.
+`TrustServerCertificate=True` is suitable for local development with an untrusted development certificate. Use a trusted server certificate in production. For deployment, provide `ConnectionStrings__SQLServer` through the hosting environment or a secrets manager rather than committing credentials to source control.
-1. **Establish connection**: Use **SqlConnection** with a valid connection string to access the Microsoft SQL database.
-2. **Fetch data**: Run a SQL query, such as `SELECT * FROM table1`, using **SqlCommand** to retrieve data.
-3. **Prepare data**: Use the **Fill** method of **SqlDataAdapter** to store the query results in a **DataTable** for JSON serialization.
+### Step 5: Create the API Controller
+
+Create a `Controllers` folder at the project root, and then create `Controllers/OrderController.cs`:
```csharp
+using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc;
-using Newtonsoft.Json;
-using System.Data;
-using System.Data.SqlClient;
+using Microsoft.Data.SqlClient;
+using Syncfusion.Blazor;
+using Syncfusion.Blazor.Data;
+
+namespace PivotTableMsSQL.Controllers;
-namespace MyWebService.Controllers
+[ApiController]
+[Route("api/[controller]")]
+public sealed class OrderController : ControllerBase
{
- [ApiController]
- [Route("[controller]")]
- public class PivotController : ControllerBase
+ private readonly string connectionString;
+ private readonly ILogger logger;
+
+ public OrderController(
+ IConfiguration configuration,
+ ILogger logger)
+ {
+ connectionString = configuration.GetConnectionString("SQLServer")
+ ?? throw new InvalidOperationException(
+ "ConnectionStrings:SQLServer is not configured.");
+ this.logger = logger;
+ }
+
+ [HttpPost]
+ public async Task Read(
+ [FromBody] DataManagerRequest request,
+ CancellationToken cancellationToken)
{
- private static DataTable FetchSQLResult()
+ _ = request;
+
+ try
+ {
+ List orders = await GetOrdersAsync(cancellationToken);
+ return Ok(new { result = orders, count = orders.Count });
+ }
+ catch (SqlException exception)
{
- string conSTR = @"";
- string xquery = "SELECT * FROM table1";
- SqlConnection sqlConnection = new(conSTR);
- sqlConnection.Open();
- SqlCommand sqlCommand = new(xquery, sqlConnection);
- SqlDataAdapter dataAdapter = new(sqlCommand);
- DataTable dataTable = new();
- dataAdapter.Fill(dataTable);
- sqlConnection.Close();
- return dataTable;
+ logger.LogError(exception, "Unable to read orders.");
+ return Problem(
+ title: "The order data could not be read.",
+ statusCode: StatusCodes.Status500InternalServerError);
}
}
-}
-```
-#### Step 5: Serialize data to JSON
-1. In the **PivotController.cs** file, create a **Get** method that calls **FetchSQLResult** to retrieve Microsoft SQL data.
-2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the **DataTable** into JSON format.
+ [HttpPost("Insert")]
+ public async Task Insert(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
+ {
+ Order? order = request.Value;
+ if (order is null || order.EmployeeID <= 0
+ || string.IsNullOrWhiteSpace(order.CustomerName))
+ {
+ return BadRequest("CustomerName and EmployeeID are required.");
+ }
+
+ const string sql = """
+ INSERT INTO dbo.Orders
+ (CustomerName, EmployeeID, ShipCity, Freight)
+ OUTPUT INSERTED.OrderID
+ VALUES
+ (@CustomerName, @EmployeeID, @ShipCity, @Freight);
+ """;
-> Ensure the **Newtonsoft.Json** NuGet package is installed in your project.
+ try
+ {
+ await using SqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using SqlCommand command = new(sql, connection);
+ AddOrderParameters(command, order);
+
+ object? result = await command.ExecuteScalarAsync(cancellationToken);
+ order.OrderID = Convert.ToInt32(result);
+ return Ok(order);
+ }
+ catch (SqlException exception)
+ {
+ logger.LogError(exception, "Unable to insert an order.");
+ return Problem(
+ title: "The order could not be inserted.",
+ statusCode: StatusCodes.Status500InternalServerError);
+ }
+ }
-```csharp
-using Microsoft.AspNetCore.Mvc;
-using Newtonsoft.Json;
-using System.Data;
-using System.Data.SqlClient;
+ [HttpPost("Update")]
+ public async Task Update(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
+ {
+ Order? order = request.Value;
+ if (order is null || order.OrderID <= 0 || order.EmployeeID <= 0
+ || string.IsNullOrWhiteSpace(order.CustomerName))
+ {
+ return BadRequest(
+ "OrderID, CustomerName, and EmployeeID are required.");
+ }
-namespace MyWebService.Controllers
-{
- [ApiController]
- [Route("[controller]")]
- public class PivotController : ControllerBase
+ const string sql = """
+ UPDATE dbo.Orders
+ SET CustomerName = @CustomerName,
+ EmployeeID = @EmployeeID,
+ ShipCity = @ShipCity,
+ Freight = @Freight
+ WHERE OrderID = @OrderID;
+ """;
+
+ try
+ {
+ await using SqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using SqlCommand command = new(sql, connection);
+ AddOrderParameters(command, order);
+ command.Parameters.Add("@OrderID", System.Data.SqlDbType.Int).Value =
+ order.OrderID;
+
+ int affected = await command.ExecuteNonQueryAsync(cancellationToken);
+ return affected == 0 ? NotFound() : Ok(order);
+ }
+ catch (SqlException exception)
+ {
+ logger.LogError(exception, "Unable to update order {OrderID}.", order.OrderID);
+ return Problem(
+ title: "The order could not be updated.",
+ statusCode: StatusCodes.Status500InternalServerError);
+ }
+ }
+
+ [HttpPost("Delete")]
+ public async Task Delete(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
{
- [HttpGet(Name = "GetSQLResult")]
- public object Get()
+ if (!int.TryParse(request.Key?.ToString(), out int orderID)
+ || orderID <= 0)
{
- return JsonConvert.SerializeObject(FetchSQLResult());
+ return BadRequest("A numeric order key is required.");
}
- private static DataTable FetchSQLResult()
+ const string sql =
+ "DELETE FROM dbo.Orders WHERE OrderID = @OrderID;";
+
+ try
+ {
+ await using SqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using SqlCommand command = new(sql, connection);
+ command.Parameters.Add("@OrderID", System.Data.SqlDbType.Int).Value =
+ orderID;
+
+ int affected = await command.ExecuteNonQueryAsync(cancellationToken);
+ return affected == 0 ? NotFound() : NoContent();
+ }
+ catch (SqlException exception)
+ {
+ logger.LogError(exception, "Unable to delete order {OrderID}.", orderID);
+ return Problem(
+ title: "The order could not be deleted.",
+ statusCode: StatusCodes.Status500InternalServerError);
+ }
+ }
+
+ private async Task> GetOrdersAsync(
+ CancellationToken cancellationToken)
+ {
+ const string sql = """
+ SELECT OrderID, CustomerName, EmployeeID, ShipCity, Freight
+ FROM dbo.Orders
+ ORDER BY OrderID;
+ """;
+
+ List orders = [];
+ await using SqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using SqlCommand command = new(sql, connection);
+ await using SqlDataReader reader =
+ await command.ExecuteReaderAsync(cancellationToken);
+
+ int orderID = reader.GetOrdinal("OrderID");
+ int customerName = reader.GetOrdinal("CustomerName");
+ int employeeID = reader.GetOrdinal("EmployeeID");
+ int shipCity = reader.GetOrdinal("ShipCity");
+ int freight = reader.GetOrdinal("Freight");
+
+ while (await reader.ReadAsync(cancellationToken))
{
- string conSTR = @"";
- string xquery = "SELECT * FROM table1";
- SqlConnection sqlConnection = new(conSTR);
- sqlConnection.Open();
- SqlCommand sqlCommand = new(xquery, sqlConnection);
- SqlDataAdapter dataAdapter = new(sqlCommand);
- DataTable dataTable = new();
- dataAdapter.Fill(dataTable);
- sqlConnection.Close();
- return dataTable;
+ orders.Add(new Order
+ {
+ OrderID = reader.GetInt32(orderID),
+ CustomerName = reader.GetString(customerName),
+ EmployeeID = reader.GetInt32(employeeID),
+ ShipCity = reader.IsDBNull(shipCity)
+ ? null
+ : reader.GetString(shipCity),
+ Freight = reader.IsDBNull(freight)
+ ? null
+ : reader.GetDecimal(freight)
+ });
}
+
+ return orders;
+ }
+
+ private static void AddOrderParameters(
+ SqlCommand command,
+ Order order)
+ {
+ command.Parameters
+ .Add("@CustomerName", System.Data.SqlDbType.VarChar, 100)
+ .Value = order.CustomerName;
+ command.Parameters
+ .Add("@EmployeeID", System.Data.SqlDbType.Int)
+ .Value = order.EmployeeID;
+ command.Parameters
+ .Add("@ShipCity", System.Data.SqlDbType.VarChar, 100)
+ .Value = (object?)order.ShipCity ?? DBNull.Value;
+
+ SqlParameter freight = command.Parameters.Add(
+ "@Freight",
+ System.Data.SqlDbType.Decimal);
+ freight.Precision = 10;
+ freight.Scale = 2;
+ freight.Value = (object?)order.Freight ?? DBNull.Value;
+ }
+
+ public sealed class Order
+ {
+ [Key]
+ public int OrderID { get; set; }
+
+ [Required]
+ public string CustomerName { get; set; } = string.Empty;
+
+ [Required]
+ public int EmployeeID { get; set; }
+
+ public string? ShipCity { get; set; }
+
+ public decimal? Freight { get; set; }
+ }
+
+ public sealed class CrudModel where T : class
+ {
+ public string? Action { get; set; }
+ public string? KeyColumn { get; set; }
+ public object? Key { get; set; }
+ public T? Value { get; set; }
+ public List? Added { get; set; }
+ public List? Changed { get; set; }
+ public List? Deleted { get; set; }
+ public IDictionary? Params { get; set; }
}
}
```
-#### Step 6: Run the Web API service
-1. Build and run the application.
-2. The application will be hosted at `https://localhost:7139/` (the port number may vary).
+`DataManagerRequest` is accepted to satisfy the URL Adaptor read contract, but this sample intentionally returns all rows. The write actions use explicit SQL parameter types, return the generated identity after insert, log SQL failures, and return `400`, `404`, or `500` responses when appropriate.
+
+The `Added`, `Changed`, and `Deleted` collections support batch requests; `Params` carries custom adaptor parameters. This sample uses Normal edit mode and therefore handles the single-record `Value` and `Key` properties.
+
+### Step 6: Register Services and Endpoints
+
+Replace `Program.cs` with:
-#### Step 7: Verify the JSON data
-1. Access the Web API endpoint at `https://localhost:7139/Pivot` to view the JSON data retrieved from the Microsoft SQL database.
-2. The browser will display the JSON data, as shown below.
+```csharp
+using PivotTableMsSQL.Components;
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddSyncfusionBlazor();
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+builder.Services.AddControllers();
-
+// Register the Syncfusion license before builder.Build().
+// Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(
+// "YOUR LICENSE KEY");
-### Connecting the Pivot Table to a Microsoft SQL database using the Web API service
+var app = builder.Build();
+
+if (!app.Environment.IsDevelopment())
+{
+ app.UseExceptionHandler("/Error", createScopeForErrors: true);
+ app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseAntiforgery();
+app.MapStaticAssets();
+app.MapControllers();
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
+```
-This section explains how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to Microsoft SQL data retrieved via the Web API service.
+The API is same-origin, so CORS configuration is not required. If the API is later hosted on another origin, configure an explicit CORS policy that allows only the Blazor application's origin.
-#### Step 1: Set up a Blazor Pivot Table
-1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide.
+Protect the write endpoints with the authentication and authorization mechanism used by your application before production deployment. If cookie-authenticated API actions require antiforgery validation, configure `SfDataManager` to send the request token expected by the server.
-#### Step 2: Configure the Web API URL
-1. In the **Index.razor** file, map the Web API URL (`https://localhost:7139/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
-2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property deserialize Microsoft SQL data into instances of your model data class (e.g., `TValue="OrderDetails"`) for binding to the Pivot Table.
+### Step 7: Add Imports and Theme Resources
-#### Step 3: Define the Pivot Table report
-1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties.
-2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management.
+Add these namespaces to `Components/_Imports.razor`:
```cshtml
+@using System.ComponentModel.DataAnnotations
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.PivotView
+```
+
+In `Components/App.razor`, add the Syncfusion stylesheet inside ``:
+
+```html
+
+```
+
+Add the Syncfusion script immediately before ``, after the template's existing `_framework/blazor.web.js` reference:
+
+```html
+
+```
+
+Do not add a second `_framework/blazor.web.js` reference if the template already contains one.
+
+### Step 8: Configure the Pivot Table
-
-
-
-
+Replace `Components/Pages/Home.razor` with:
+
+```cshtml
+@page "/"
+
+
+
+
+
+
-
+
-
+
-
-
-
-
-
+
+
+
@code {
- public class OrderDetails
+ public sealed class Order
+ {
+ [Key]
+ public int OrderID { get; set; }
+
+ [Required]
+ public string CustomerName { get; set; } = string.Empty;
+
+ [Required]
+ public int EmployeeID { get; set; }
+
+ public string? ShipCity { get; set; }
+
+ public decimal? Freight { get; set; }
+ }
+}
+```
+
+The `[Key]` attribute identifies `OrderID` as the record key. Do not configure the key through `BeginDrillThroughEventArgs.GridObj`; current Syncfusion Pivot Table versions return `GridObj` as `null` in that event.
+
+The relative URLs follow the active scheme, host, port, and path base, avoiding hard-coded development ports and HTTP-to-HTTPS mixed-content failures.
+
+### Step 9: Run and Verify the Application
+
+Restore, build, and run the project:
+
+```powershell
+dotnet restore
+dotnet build
+dotnet run
+```
+
+Open the URL shown in the terminal. Verify the following:
+
+1. The Pivot Table displays `CustomerName` as rows, `EmployeeID` as columns, and the sum of `Freight` as values.
+2. The browser Network panel shows `POST /api/Order` returning `200` with `result` and `count`.
+3. Double-click a value cell to open its raw-record editor.
+4. Add, edit, and delete a record, and confirm the corresponding API request succeeds.
+5. Query `dbo.Orders` to confirm the change was persisted.
+
+Example read response:
+
+```json
+{
+ "result": [
{
- public int Quantity { get; set; }
- public string Product { get; set; }
- public string Date { get; set; }
- public string Country { get; set; }
- public double Amount { get; set; }
- }
+ "orderID": 1,
+ "customerName": "Toms",
+ "employeeID": 1,
+ "shipCity": "New York",
+ "freight": 35.30
+ }
+ ],
+ "count": 1
+}
+```
+
+Example insert request:
+
+```json
+{
+ "action": "insert",
+ "keyColumn": "orderID",
+ "value": {
+ "customerName": "Karen Lee",
+ "employeeID": 3,
+ "shipCity": "Berlin",
+ "freight": 110.00
+ }
+}
+```
+
+Example update request:
+
+```json
+{
+ "action": "update",
+ "keyColumn": "orderID",
+ "value": {
+ "orderID": 1,
+ "customerName": "Toms",
+ "employeeID": 1,
+ "shipCity": "Boston",
+ "freight": 40.00
+ }
+}
+```
+
+Example delete request:
+
+```json
+{
+ "action": "remove",
+ "keyColumn": "orderID",
+ "key": 1
}
```
-#### Step 4: Run and verify the Pivot Table
-1. Run the Blazor application.
-2. The Pivot Table will display the Microsoft SQL data fetched via the Web API, structured according to the defined configuration.
-3. The resulting Pivot Table will look like this:
+
+
+## API Reference
+
+| Method | Route | Payload | Success response |
+|---|---|---|---|
+| `POST` | `/api/Order` | `DataManagerRequest` | `200` with `{ result, count }` |
+| `POST` | `/api/Order/Insert` | `CrudModel` | `200` with the inserted record and generated `OrderID` |
+| `POST` | `/api/Order/Update` | `CrudModel` | `200` with the updated record |
+| `POST` | `/api/Order/Delete` | `CrudModel` | `204` with no body |
+
+The API uses action-oriented routes because they match the URL Adaptor's `InsertUrl`, `UpdateUrl`, and `RemoveUrl` contract.
+
+## Troubleshooting
+
+| Symptom | Resolution |
+|---|---|
+| Pivot Table shows no data | Inspect `POST /api/Order` in the browser Network panel and check the server log. Navigating to the URL with an address-bar `GET` returns `405`. |
+| `405 Method Not Allowed` | Confirm `[HttpPost]`, `AddControllers()`, and `MapControllers()` are present. |
+| SQL connection or login failure | Confirm that SQL Server is running, the connection string is correct, and the login is mapped to an `OrderDB` user with the required table permissions. |
+| `Invalid object name 'dbo.Orders'` | Run the database script against `OrderDB` and confirm the connection string selects that database. |
+| Certificate-chain error | Use `TrustServerCertificate=True` only for local development, or install a trusted SQL Server certificate. |
+| CRUD returns `400` | Inspect the request JSON and confirm required fields and the numeric key are present. |
+| CRUD returns `404` | Confirm that the supplied `OrderID` exists and that `OrderID` is marked with `[Key]` in the component model. |
+| CRUD returns `500` | Check the structured server log and verify the table schema, connection string, and database permissions. |
+| Browser reports mixed content or a redirect failure | Confirm `Home.razor` uses relative `/api/Order` URLs rather than hard-coded HTTP URLs. |
+| Cross-origin request is blocked | Prefer same-origin relative URLs; otherwise configure `AddCors` and `UseCors` for the exact Blazor application origin. |
+| Antiforgery validation fails | Configure the adaptor to send the expected request token, or use an appropriate non-cookie API authentication scheme. |
+| Large datasets are slow | Process `DataManagerRequest` operations on the server instead of returning the entire table. |
+
+For current component behavior, see the [Pivot Table editing documentation](https://blazor.syncfusion.com/documentation/pivot-table/editing) and [Pivot Table data-binding documentation](https://blazor.syncfusion.com/documentation/pivot-table/data-binding).
-
+## Complete Sample Repository
-### Additional resources
-Explore a complete example of the Blazor Pivot Table integrated with an ASP.NET Core Web application to fetch data from a Microsoft SQL database in this [GitHub repository](https://github.com/SyncfusionExamples/aspnetcore-bind-SQL-database-to-pivot-table).
+A complete, working sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/syncfusion-blazor-pivot-table-mssql-database-binding-sample).
diff --git a/blazor/pivot-table/connecting-to-data-source/mysql.md b/blazor/pivot-table/connecting-to-data-source/mysql.md
index 4a09dc6fde..458e9bc7a9 100644
--- a/blazor/pivot-table/connecting-to-data-source/mysql.md
+++ b/blazor/pivot-table/connecting-to-data-source/mysql.md
@@ -1,277 +1,639 @@
---
layout: post
-title: "MySQL Data Binding in Blazor Pivot Table Component | Syncfusion®"
-component: "Pivot Table"
-description: "Learn how to connect a MySQL database to the Blazor Pivot Table component using the MySql.Data library and much more details."
+title: Blazor Pivot Table with MySQL via URL Adaptor | Syncfusion®
+description: Bind MySQL data to the Blazor Pivot Table through an ASP.NET Core API and the Syncfusion URL Adaptor, with create, read, update, and delete support.
platform: Blazor
+control: PivotTable
documentation: ug
---
-# MySQL Data Binding in Blazor Pivot Table Component
+# Connecting MySQL to Blazor Pivot Table Using URL Adaptor
-This guide explains how to connect a MySQL database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display MySQL data.
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) can load and edit MySQL data through an ASP.NET Core API and the Syncfusion URL Adaptor. The adaptor sends read and CRUD requests to controller endpoints; the controller uses `MySql.Data` to execute parameterized SQL against MySQL.
-## Connecting a MySQL Database to a Blazor Pivot Table
+This tutorial is a small-data sample. Its read endpoint returns every raw order because the Pivot Table's built-in engine needs the complete raw dataset to calculate accurate aggregates. For large datasets, use the [Syncfusion server-side Pivot Engine](https://blazor.syncfusion.com/documentation/pivot-table/server-side-pivot-engine) instead of applying ordinary paging to this endpoint.
-This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to a MySQL database by directly retrieving data using the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library.
+## Prerequisites
-### Step 1: Set Up a Blazor Pivot Table
-1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide.
+The sample was tested with the following versions:
-### Step 2: Install the MySql.Data NuGet Package
-1. Open the **NuGet Package Manager** in your project solution and search for **MySql.Data**.
-2. Install the **MySql.Data** package to add MySQL database support.
+| Software or package | Version |
+|---------------------|---------|
+| .NET SDK | 10.0 |
+| MySQL Server | 8.0 or later |
+| MySQL Workbench | 8.0 or later |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` |
+| MySql.Data | 9.4.0 |
-
+Use the same version for all Syncfusion packages. Later compatible patch releases can be used, but verify the Syncfusion release notes before changing versions.
-### Step 3: Connect to MySQL
-In the **Index.razor** file, under the `OnInitialized` method, use the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library to connect to a MySQL database and retrieve data for the Pivot Table.
+You also need:
-1. **Establish Connection**: Use **MySqlConnection** with a valid connection string (e.g., `Server=localhost;Database=mydb;Uid=myuser;Pwd=mypassword;`) to connect to the MySQL database.
-2. **Query and Fetch Data**: Execute a SQL query (e.g., `SELECT * FROM orders`) using **MySqlCommand** to retrieve data for the Pivot Table.
-3. **Structure the Data**: Use **MySqlDataAdapter**'s **Fill** method to populate the query results into a **DataTable**, which is then converted to a list for binding to the Pivot Table.
+- A MySQL account allowed to create the sample database and application user.
+- A valid Syncfusion license or trial key.
+- An available local HTTPS development certificate. Run `dotnet dev-certs https --trust` if the certificate is not already trusted.
-### Step 4: Bind Data to the Pivot Table
-1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
-2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data.
+## MySQL Database Setup and Application Configuration
-The following code connects to a MySQL database, retrieves data, and binds it to the Pivot Table.
+### Step 1: Create the Blazor Web App
-```cshtml
-@using Syncfusion.Blazor.PivotView
-@using MySql.Data.MySqlClient;
-@using Newtonsoft.Json;
-@using System.Data;
-@using Syncfusion.Blazor.Data;
+Create an Interactive Server Blazor Web App:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+```powershell
+dotnet new blazor --name PivotTableMySQL --framework net10.0 --interactivity Server --all-interactive
+cd PivotTableMySQL
+```
-@code {
- private List dataSource { get; set; }
+The remaining commands in this guide must be run from the `PivotTableMySQL` project directory.
+
+### Step 2: Create the MySQL Database and User
+
+Open MySQL Workbench, connect with an administrative account, open a query tab, and run the following script. Replace `CHOOSE_A_STRONG_PASSWORD` before executing it.
+
+```sql
+CREATE DATABASE IF NOT EXISTS Orders
+ CHARACTER SET utf8mb4
+ COLLATE utf8mb4_0900_ai_ci;
+
+CREATE USER IF NOT EXISTS 'pivotapp'@'localhost'
+ IDENTIFIED BY 'CHOOSE_A_STRONG_PASSWORD';
+
+ALTER USER 'pivotapp'@'localhost'
+ IDENTIFIED BY 'CHOOSE_A_STRONG_PASSWORD';
+
+USE Orders;
+
+CREATE TABLE IF NOT EXISTS orders (
+ orderid INT NOT NULL AUTO_INCREMENT,
+ customername VARCHAR(100) NOT NULL,
+ employeeid INT NOT NULL,
+ shipcity VARCHAR(100) NULL,
+ freight DECIMAL(12, 2) NULL,
+ PRIMARY KEY (orderid)
+);
+
+GRANT SELECT, INSERT, UPDATE, DELETE
+ ON Orders.orders
+ TO 'pivotapp'@'localhost';
+
+INSERT INTO orders (customername, employeeid, shipcity, freight)
+VALUES
+ ('Alice Johnson', 1, 'New York', 120.50),
+ ('Bob Smith', 2, 'London', 85.20),
+ ('Carol Davis', 1, 'New York', 210.75),
+ ('David Brown', 3, 'Berlin', 95.00),
+ ('Eve Wilson', 2, 'London', 150.25),
+ ('Frank Moore', 4, 'Tokyo', 60.80),
+ ('Grace Taylor', 1, 'New York', 180.40),
+ ('Henry Anderson', 3, 'Berlin', 220.60),
+ ('Ivy Thomas', 2, 'London', 75.10),
+ ('Jack White', 4, 'Tokyo', 130.90);
+```
- protected override void OnInitialized()
- {
- MySqlConnection connection = new MySqlConnection("");
- connection.Open();
- MySqlCommand command = new MySqlCommand("SELECT * FROM orders", connection);
- MySqlDataAdapter dataAdapter = new MySqlDataAdapter(command);
- DataTable dataTable = new DataTable();
- dataAdapter.Fill(dataTable);
- connection.Close();
- dataSource = (from DataRow data in dataTable.Rows
- select new OrderDetails()
- {
- OrderID = Convert.ToInt32(data["OrderId"]),
- CustomerID = data["CustomerID"].ToString(),
- ShipCity = data["ShipCity"].ToString(),
- ShipName = data["ShipName"].ToString(),
- Freight = Convert.ToDouble(data["Freight"])
- }).ToList();
+The host portion of a MySQL account is significant. The account above is for an application running on the same computer as MySQL. Use the appropriate restricted host value when the application runs elsewhere.
- }
+Verify the setup:
- public class OrderDetails
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public double Freight { get; set; }
- }
-
-}
+```sql
+SELECT * FROM Orders.orders ORDER BY orderid;
+SHOW GRANTS FOR 'pivotapp'@'localhost';
```
-### Step 5: Run and Verify the Pivot Table
-1. Run the Blazor application.
-2. The Pivot Table will display the MySQL data, organized according to the defined configuration.
-3. The resulting Pivot Table will look like this:
+### Step 3: Install the NuGet Packages
-
+Install the tested package versions:
-## Connecting a MySQL to a Blazor Pivot Table via Web API service
+```powershell
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package MySql.Data --version 9.4.0
+```
+
+The resulting package references are:
-This section explains how to create a Web API service to fetch data from a MySQL database and connect it to the Blazor Pivot Table.
+```xml
+
+
+
+
+
+```
-### Create a Web API Service to Fetch MySQL Data
+This sample uses `System.Text.Json`, which is included with ASP.NET Core. `Newtonsoft.Json` is not required.
-Follow these steps to set up a Web API service that retrieves MySQL data for the Pivot Table.
+### Step 4: Store the Connection String and License Key
-#### Step 1: Create an ASP.NET Core Web Application
-1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**.
-2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions.
+Do not put database passwords or license keys in `appsettings.json`. Initialize .NET user secrets and store both values outside the project files:
-
+```powershell
+dotnet user-secrets init
+dotnet user-secrets set "ConnectionStrings:MySQL" "Server=localhost;Port=3306;Database=Orders;Uid=pivotapp;Pwd=CHOOSE_A_STRONG_PASSWORD;SslMode=Preferred;"
+dotnet user-secrets set "SyncfusionLicenseKey" "YOUR_SYNCFUSION_LICENSE_KEY"
+```
-#### Step 2: Install the MySql.Data NuGet Package
-1. Install the [MySql.Data](https://www.nuget.org/packages/MySql.Data) package using the **NuGet Package Manager** to enable MySQL connectivity.
+Replace both placeholder values. For deployment, set `ConnectionStrings__MySQL` and `SyncfusionLicenseKey` through the hosting platform's secret store.
-
+The connection-string components used by the sample are:
-#### Step 3: Create a Web API Controller
-1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**.
-2. This controller manages data communication between the MySQL database and the Pivot Table.
+| Component | Description |
+|-----------|-------------|
+| `Server` | MySQL host name or IP address |
+| `Port` | MySQL port; the default is `3306` |
+| `Database` | Default database, `Orders` |
+| `Uid` | Dedicated application account, `pivotapp` |
+| `Pwd` | Application-account password |
+| `SslMode` | TLS behavior; use `Required` with a correctly configured production server |
-#### Step 4: Connect to MySQL and Retrieve Data
-In the **PivotController.cs** file, use the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library to connect to a MySQL database and fetch data for the Pivot Table.
+### Step 5: Create the Shared Order Model
-1. **Establish Connection**: Use **MySqlConnection** with a valid connection string to access the MySQL database.
-2. **Fetch Data**: Run a SQL query (e.g., `SELECT * FROM orders`) using **MySqlCommand** to retrieve data.
-3. **Prepare Data**: Use **MySqlDataAdapter**'s **Fill** method to store the query results in a **DataTable** for JSON serialization.
+Create a `Models` folder and add `Models/Order.cs`:
```csharp
- using Microsoft.AspNetCore.Mvc;
- using MySql.Data.MySqlClient;
- using Newtonsoft.Json;
- using System.Data;
+using System.ComponentModel.DataAnnotations;
+
+namespace PivotTableMySQL.Models;
+
+public class Order
+{
+ [Key]
+ public int OrderID { get; set; }
+
+ [Required]
+ [StringLength(100)]
+ public string CustomerName { get; set; } = string.Empty;
+
+ [Range(1, int.MaxValue)]
+ public int EmployeeID { get; set; }
- namespace MyWebService.Controllers
+ [Range(typeof(decimal), "0", "9999999999.99")]
+ public decimal? Freight { get; set; }
+
+ [StringLength(100)]
+ public string? ShipCity { get; set; }
+}
+```
+
+The same model is used by the controller and Razor component. The `[Key]` annotation identifies `OrderID` as the primary key when the Pivot Table creates its raw-item edit grid. Do not attempt to access `BeginDrillThroughEventArgs.GridObj`; the [current event documentation](https://blazor.syncfusion.com/documentation/pivot-table/events#begindrillthrough) states that this property is returned as null.
+
+### Step 6: Create the API Controller
+
+Create a `Controllers` folder and add `Controllers/OrderController.cs`:
+
+```csharp
+using System.Data.Common;
+using Microsoft.AspNetCore.Mvc;
+using MySql.Data.MySqlClient;
+using PivotTableMySQL.Models;
+using Syncfusion.Blazor;
+using Syncfusion.Blazor.Data;
+
+namespace PivotTableMySQL.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class OrderController : ControllerBase
+{
+ private readonly string connectionString;
+
+ public OrderController(IConfiguration configuration)
{
- [ApiController]
- [Route("[controller]")]
- public class PivotController : ControllerBase
+ connectionString = configuration.GetConnectionString("MySQL")
+ ?? throw new InvalidOperationException(
+ "ConnectionStrings:MySQL is not configured.");
+
+ if (string.IsNullOrWhiteSpace(connectionString))
{
- public dynamic GetMySQLResult()
- {
- // Replace with your own connection string.
- MySqlConnection connection = new MySqlConnection("");
- connection.Open();
- MySqlCommand command = new MySqlCommand("SELECT * FROM orders", connection);
- MySqlDataAdapter dataAdapter = new MySqlDataAdapter(command);
- DataTable dataTable = new DataTable();
- dataAdapter.Fill(dataTable);
- connection.Close();
- return dataTable;
- }
+ throw new InvalidOperationException(
+ "ConnectionStrings:MySQL must not be empty.");
}
}
-```
+ [HttpPost]
+ public async Task> Read(
+ [FromBody] DataManagerRequest request,
+ CancellationToken cancellationToken)
+ {
+ // The built-in Pivot Table engine requires the complete raw dataset.
+ // DataManagerRequest paging must not be applied to this endpoint.
+ _ = request;
-#### Step 5: Serialize Data to JSON
-1. In the **PivotController.cs** file, create a **Get** method that calls **FetchMySQLResult** to retrieve MySQL data.
-2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the **DataTable** into JSON format.
+ List orders = [];
-> Ensure the **Newtonsoft.Json** NuGet package is installed in your project.
+ const string sql = """
+ SELECT orderid, customername, employeeid, shipcity, freight
+ FROM orders
+ ORDER BY orderid;
+ """;
-The following code sets up the Web API controller to fetch and serialize MySQL data.
+ await using MySqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
-```csharp
- using Microsoft.AspNetCore.Mvc;
- using MySql.Data.MySqlClient;
- using Newtonsoft.Json;
- using System.Data;
+ await using MySqlCommand command = new(sql, connection);
+ await using DbDataReader reader =
+ await command.ExecuteReaderAsync(cancellationToken);
- namespace MyWebService.Controllers
- {
- [ApiController]
- [Route("[controller]")]
- public class PivotController : ControllerBase
+ int orderIdOrdinal = reader.GetOrdinal("orderid");
+ int customerNameOrdinal = reader.GetOrdinal("customername");
+ int employeeIdOrdinal = reader.GetOrdinal("employeeid");
+ int shipCityOrdinal = reader.GetOrdinal("shipcity");
+ int freightOrdinal = reader.GetOrdinal("freight");
+
+ while (await reader.ReadAsync(cancellationToken))
{
- [HttpGet(Name = "GetMySQLResult")]
- public object Get()
+ orders.Add(new Order
{
- return JsonConvert.SerializeObject(GetMySQLResult());
- }
+ OrderID = reader.GetInt32(orderIdOrdinal),
+ CustomerName = reader.GetString(customerNameOrdinal),
+ EmployeeID = reader.GetInt32(employeeIdOrdinal),
+ ShipCity = reader.IsDBNull(shipCityOrdinal)
+ ? null
+ : reader.GetString(shipCityOrdinal),
+ Freight = reader.IsDBNull(freightOrdinal)
+ ? null
+ : reader.GetDecimal(freightOrdinal)
+ });
+ }
- public dynamic GetMySQLResult()
- {
- // Replace with your own connection string.
- MySqlConnection connection = new MySqlConnection("");
- connection.Open();
- MySqlCommand command = new MySqlCommand("SELECT * FROM orders", connection);
- MySqlDataAdapter dataAdapter = new MySqlDataAdapter(command);
- DataTable dataTable = new DataTable();
- dataAdapter.Fill(dataTable);
- connection.Close();
- return dataTable;
- }
+ return Ok(new
+ {
+ result = orders,
+ count = orders.Count
+ });
+ }
+
+ [HttpPost("Insert")]
+ public async Task> Insert(
+ [FromBody] CRUDModel request,
+ CancellationToken cancellationToken)
+ {
+ if (request.Value is not Order order)
+ {
+ return BadRequest("The request must contain an order value.");
+ }
+
+ const string sql = """
+ INSERT INTO orders
+ (customername, employeeid, shipcity, freight)
+ VALUES
+ (@customername, @employeeid, @shipcity, @freight);
+ """;
+
+ await using MySqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+
+ await using MySqlCommand command = new(sql, connection);
+ command.Parameters.Add("@customername", MySqlDbType.VarChar, 100)
+ .Value = order.CustomerName;
+ command.Parameters.Add("@employeeid", MySqlDbType.Int32)
+ .Value = order.EmployeeID;
+ command.Parameters.Add("@shipcity", MySqlDbType.VarChar, 100)
+ .Value = order.ShipCity ?? (object)DBNull.Value;
+ command.Parameters.Add("@freight", MySqlDbType.Decimal)
+ .Value = order.Freight ?? (object)DBNull.Value;
+
+ await command.ExecuteNonQueryAsync(cancellationToken);
+ order.OrderID = checked((int)command.LastInsertedId);
+
+ return Ok(order);
+ }
+
+ [HttpPost("Update")]
+ public async Task> Update(
+ [FromBody] CRUDModel request,
+ CancellationToken cancellationToken)
+ {
+ if (request.Value is not Order order || order.OrderID <= 0)
+ {
+ return BadRequest(
+ "The request must contain an order with a valid OrderID.");
}
+
+ const string sql = """
+ UPDATE orders
+ SET customername = @customername,
+ employeeid = @employeeid,
+ shipcity = @shipcity,
+ freight = @freight
+ WHERE orderid = @orderid;
+ """;
+
+ await using MySqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+
+ await using MySqlCommand command = new(sql, connection);
+ command.Parameters.Add("@customername", MySqlDbType.VarChar, 100)
+ .Value = order.CustomerName;
+ command.Parameters.Add("@employeeid", MySqlDbType.Int32)
+ .Value = order.EmployeeID;
+ command.Parameters.Add("@shipcity", MySqlDbType.VarChar, 100)
+ .Value = order.ShipCity ?? (object)DBNull.Value;
+ command.Parameters.Add("@freight", MySqlDbType.Decimal)
+ .Value = order.Freight ?? (object)DBNull.Value;
+ command.Parameters.Add("@orderid", MySqlDbType.Int32)
+ .Value = order.OrderID;
+
+ int affectedRows =
+ await command.ExecuteNonQueryAsync(cancellationToken);
+
+ return affectedRows == 0 ? NotFound() : Ok(order);
}
+ [HttpPost("Delete")]
+ public async Task Delete(
+ [FromBody] CRUDModel request,
+ CancellationToken cancellationToken)
+ {
+ if (!int.TryParse(request.Key?.ToString(), out int orderId)
+ || orderId <= 0)
+ {
+ return BadRequest("A positive numeric order key is required.");
+ }
+
+ const string sql =
+ "DELETE FROM orders WHERE orderid = @orderid;";
+
+ await using MySqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+
+ await using MySqlCommand command = new(sql, connection);
+ command.Parameters.Add("@orderid", MySqlDbType.Int32)
+ .Value = orderId;
+
+ int affectedRows =
+ await command.ExecuteNonQueryAsync(cancellationToken);
+
+ return affectedRows == 0
+ ? NotFound()
+ : Ok(new { key = orderId });
+ }
+}
```
-#### Step 6: Run the Web API Service
-1. Build and run the application.
-2. The application will be hosted at `https://localhost:7146/` (the port number may vary).
+The controller uses the built-in `Syncfusion.Blazor.Data.CRUDModel` request type. ASP.NET Core automatically returns validation responses for invalid annotated model values. Unhandled database exceptions are converted to Problem Details responses by the middleware configured in the next step.
-#### Step 7: Verify the JSON Data
-1. Access the Web API endpoint at `https://localhost:7146/Pivot` to view the JSON data retrieved from MySQL.
-2. The browser will display the JSON data, as shown below.
+### Step 7: Configure Program.cs
-
+Replace `Program.cs` with:
-### Connecting the Pivot Table to MySQL Using the Web API Service
+```csharp
+using PivotTableMySQL.Components;
+using Syncfusion.Blazor;
+using Syncfusion.Licensing;
-This section explains how to connect the Blazor Pivot Table to MySQL data retrieved via the Web API service.
+var builder = WebApplication.CreateBuilder(args);
-#### Step 1: Set Up a Blazor Pivot Table
-1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide.
+string licenseKey = builder.Configuration["SyncfusionLicenseKey"]
+ ?? throw new InvalidOperationException(
+ "SyncfusionLicenseKey is not configured.");
-#### Step 2: Configure the Web API URL
-1. In the **Index.razor** file, map the Web API URL (`https://localhost:7146/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
-2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property facilitates deserializing MySQL data into instances of your model data class (i.e., TValue="OrderDetails") for binding to the Pivot Table.
+SyncfusionLicenseProvider.RegisterLicense(licenseKey);
-#### Step 3: Define the Pivot Table Report
-1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties.
-2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management.
+builder.Services.AddSyncfusionBlazor();
+builder.Services.AddProblemDetails();
+builder.Services.AddControllers();
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
-The following code connects the Pivot Table to the Web API and configures the report.
+var app = builder.Build();
+
+app.UseExceptionHandler();
+
+if (!app.Environment.IsDevelopment())
+{
+ app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseAntiforgery();
+
+app.MapStaticAssets();
+app.MapControllers();
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
+```
+
+The sample API is same-origin and does not require CORS. If the API and Blazor application are deployed on different origins, configure a named CORS policy that allows only the Blazor application's origin.
+
+### Step 8: Add Imports, Theme, and Scripts
+
+Add these imports to `Components/_Imports.razor`:
```cshtml
+@using PivotTableMySQL.Models
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.PivotView
+```
+
+In the `` element of `Components/App.razor`, add:
+
+```html
+
+```
+
+Before the closing `` tag, add the Syncfusion script after the existing Blazor script:
+
+```html
+
+
+```
+
+Do not add a second `_framework/blazor.web.js` reference if the template already contains it.
+
+### Step 9: Configure the Pivot Table
+
+Replace `Components/Pages/Home.razor` with:
-
-
+```cshtml
+@page "/"
+
+MySQL Pivot Table
+
+
+
+
+
-
+
+
-
+
+
-
+
+
-
-
-
-
+
+
+
+
+```
-@code {
- public class OrderDetails
- {
- public int OrderID { get; set; }
- public string ShipName { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public double Freight { get; set; }
- }
+Relative URLs keep all requests on the application's current scheme, host, and port. They work with both the HTTP and HTTPS launch profiles and avoid mixed-content and CORS failures.
+
+The `[Key]` annotation on the shared `Order.OrderID` property supplies the raw-item grid's primary key. Current Blazor Pivot Table releases return `BeginDrillThroughEventArgs.GridObj` as null, so the component does not use a `BeginDrillThrough` handler to configure columns.
+
+## API Contract
+
+The URL Adaptor uses these endpoints:
+
+| Method | Route | Request body | Success response |
+|--------|-------|--------------|------------------|
+| `POST` | `/api/Order` | `DataManagerRequest` | `{ "result": [...], "count": n }` |
+| `POST` | `/api/Order/Insert` | `CRUDModel` | Inserted `Order`, including its generated `OrderID` |
+| `POST` | `/api/Order/Update` | `CRUDModel` | Updated `Order` |
+| `POST` | `/api/Order/Delete` | `CRUDModel` | `{ "key": orderId }` |
+
+Example insert request:
+
+```json
+{
+ "action": "add",
+ "keyColumn": "OrderID",
+ "value": {
+ "orderID": 0,
+ "customerName": "Karen Lee",
+ "employeeID": 3,
+ "shipCity": "Berlin",
+ "freight": 110.00
+ }
}
```
-#### Step 4: Run and Verify the Pivot Table
-1. Run the Blazor application.
-2. The Pivot Table will display the MySQL data fetched via the Web API, structured according to the defined configuration.
-3. The resulting Pivot Table will look like this:
+Example update request:
+
+```json
+{
+ "action": "update",
+ "keyColumn": "OrderID",
+ "key": 1,
+ "value": {
+ "orderID": 1,
+ "customerName": "Alice Johnson",
+ "employeeID": 1,
+ "shipCity": "Boston",
+ "freight": 125.00
+ }
+}
+```
+
+Example delete request:
+
+```json
+{
+ "action": "remove",
+ "keyColumn": "OrderID",
+ "key": 1
+}
+```
+
+Property-name casing in captured requests can vary with the serializer settings used by a specific package release. ASP.NET Core's default web serializer matches property names case-insensitively.
+
+## Run and Verify the Application
+
+Restore, build, and run the project:
+
+```powershell
+dotnet restore
+dotnet build
+dotnet run
+```
+
+Open the HTTPS URL printed in the terminal. Then verify:
+
+- The Pivot Table displays the ten sample orders.
+- Adding a raw record creates a new row in `Orders.orders`.
+- Editing a raw record changes the matching `orderid`.
+- Deleting a raw record removes the matching `orderid`.
+- The browser Network panel shows `POST` requests to the four `/api/Order` endpoints.
+
+
+
+Verify the database after CRUD testing:
+
+```sql
+SELECT * FROM Orders.orders ORDER BY orderid;
+```
+
+The read endpoint accepts only `POST`; navigating to `/api/Order` in the browser address bar sends `GET` and correctly returns `405 Method Not Allowed`.
+
+## Data Flow Diagram
+
+The following image illustrates how data flows between MySQL, the ASP.NET Core controller, and the Syncfusion Blazor Pivot Table.
+
+
+
+## Production Security
+
+This tutorial's CRUD endpoints are intentionally unauthenticated for local development. Do not expose them publicly in this form.
+
+Before deployment:
+
+1. Configure an ASP.NET Core authentication scheme appropriate for the application.
+2. Add `[Authorize]` to `OrderController` or an equivalent authorization policy.
+3. Restrict the MySQL application account to the required database, operations, and source host.
+4. Use `SslMode=Required` with a trusted MySQL server certificate.
+5. Keep the connection string and license key in the deployment platform's secret store.
+6. If cookie authentication protects the API, configure antiforgery tokens for adaptor write requests; otherwise use an appropriate non-cookie API authentication scheme.
+7. Restrict CORS to known origins if the client and API are hosted separately.
+
+## Large Datasets
+
+Do not apply `Skip`, `Take`, or ordinary DataManager paging to the read action in this sample. Doing so sends only part of the raw dataset to the built-in Pivot Table engine and produces incomplete aggregates.
+
+For large datasets, follow the [server-side Pivot Engine guide](https://blazor.syncfusion.com/documentation/pivot-table/server-side-pivot-engine). The server-side engine performs aggregation, filtering, grouping, and sorting on the server and sends only the required pivot results to the browser.
+
+## Troubleshooting
+
+| Symptom | Resolution |
+|---------|------------|
+| `ConnectionStrings:MySQL is not configured` | Run the `dotnet user-secrets set "ConnectionStrings:MySQL" "..."` command from the project directory or configure `ConnectionStrings__MySQL`. |
+| `SyncfusionLicenseKey is not configured` | Store a valid key with user secrets or the deployment secret store. |
+| `Unable to connect to any of the specified MySQL hosts` | Confirm that MySQL is running and verify `Server`, `Port`, TLS settings, and firewall access. |
+| `Access denied for user 'pivotapp'` | Verify the password, account host, and `SHOW GRANTS FOR 'pivotapp'@'localhost'`. |
+| `Table 'Orders.orders' doesn't exist` | Run the database script and preserve the lowercase `orders` table name, especially on Linux. |
+| `405 Method Not Allowed` for `/api/Order` | Test through the Pivot Table or send a `POST` request; an address-bar request is `GET`. |
+| CRUD returns `400 Bad Request` | Inspect the Problem Details response and confirm required fields, field lengths, numeric ranges, and request shape. |
+| Update or delete returns `404 Not Found` | Confirm that the request contains an existing positive `OrderID` key. |
+| Editing affects the wrong row | Confirm that the shared model includes `[Key]` on `OrderID` and that the client and controller both use that model. |
+| Browser reports mixed content or CORS | Keep the relative `/api/Order` URLs for same-origin hosting; otherwise configure HTTPS and a restricted CORS policy. |
+| Authentication plugin error | Keep MySQL's `caching_sha2_password` authentication and use the documented `MySql.Data` version or a later compatible release; do not switch to deprecated `mysql_native_password`. |
+| Pivot values are incomplete for a large dataset | Remove ordinary endpoint paging and migrate to the Syncfusion server-side Pivot Engine. |
+
+## Complete Sample Repository
+
+A complete, working sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/syncfusion-blazor-pivot-table-mysql-database-binding-sample).
+
+## Summary
-
+The application now:
-### Additional Resources
-Explore a complete example of the Blazor Pivot Table integrated with MySQL using a Web API service in this [GitHub repository](https://github.com/SyncfusionExamples/web-bind-MySQL-database-to-pivot-table/tree/master/Blazor).
\ No newline at end of file
+1. Connects to MySQL with a dedicated least-privilege account.
+2. Keeps credentials and the Syncfusion license key outside source control.
+3. Shares one annotated `Order` model between the controller and Pivot Table.
+4. Uses asynchronous, parameterized MySQL commands.
+5. Exposes documented URL Adaptor read and CRUD endpoints.
+6. Uses relative same-origin URLs and standardized Problem Details errors.
+7. Identifies the supported server-side approach for large datasets.
diff --git a/blazor/pivot-table/connecting-to-data-source/postgreSQL.md b/blazor/pivot-table/connecting-to-data-source/postgreSQL.md
index d9e61319d3..2832b70e6f 100644
--- a/blazor/pivot-table/connecting-to-data-source/postgreSQL.md
+++ b/blazor/pivot-table/connecting-to-data-source/postgreSQL.md
@@ -1,7 +1,7 @@
---
layout: post
title: Blazor Pivot Table with PostgreSQL via URL Adaptor | Syncfusion®
-description: Bind PostgreSQL data to Blazor Pivot Table using Npgsql and the URL Adaptor with complete CRUD, drill-through, and field list support.
+description: Bind PostgreSQL data to a Blazor Pivot Table using Npgsql and the URL Adaptor, with CRUD, drill-through editing, and field list support.
platform: Blazor
control: PivotTable
documentation: ug
@@ -9,92 +9,64 @@ documentation: ug
# Connecting PostgreSQL to Blazor Pivot Table Using URL Adaptor
-The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) supports binding data from a PostgreSQL database using the **URL Adaptor**. This remote-data binding approach exposes the database through an HTTP API controller and lets the pivot table communicate with the server over standard HTTP. Server-side query processing is required before using the pattern for large datasets.
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) can bind to PostgreSQL data exposed by an ASP.NET Core controller. In this example, [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses `Adaptors.UrlAdaptor` to read and modify order records through HTTP endpoints.
-### What is the URL Adaptor?
-
-The URL Adaptor is a Syncfusion data adaptor that delegates every data operation—read, insert, update, and delete—to a remote endpoint. Instead of fetching the entire dataset into the browser, the pivot table posts a serialized [`DataManagerRequest`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to a controller action, and the server returns the processed result. This keeps the pivot table lightweight and pushes the heavy lifting to the server.
-
-### Key Benefits of the URL Adaptor
-
-- **Remote API contract**: The URL Adaptor sends requests to an HTTP endpoint that returns a `{ result, count }` response. The sample below loads the complete `orders` table; add explicit `DataManagerRequest` processing before using it for large datasets.
-- **RESTful contract**: A clean HTTP API that any client (Blazor, Angular, React, mobile) can consume.
-- **Full CRUD Support**: Dedicated `Insert`, `Update`, and `Remove` endpoints power cell editing and drill-through operations in the pivot table.
-- **Loose Coupling**: The pivot component knows only the endpoint URLs, not the underlying database or data-access technology.
-- **Scalability**: Stateless controllers and connection-pooled database access can scale horizontally when the API also applies server-side query operations.
-
-### What is Npgsql?
-
-[Npgsql](https://www.npgsql.org/) is the open-source ADO.NET data provider for PostgreSQL. It allows .NET applications to connect to PostgreSQL, execute SQL commands, and read results using `NpgsqlConnection`, `NpgsqlCommand`, and `NpgsqlDataAdapter`. This sample uses the direct `Npgsql` package and does not use Entity Framework Core.
+This sample intentionally loads the complete `orders` table so that the Pivot Table can aggregate the raw records in the application. Use it only for small datasets. For large datasets, use a server-side aggregation design or an OLAP/data-engine solution instead of returning every source row.
## Prerequisites
-Ensure the following software and packages are installed before proceeding:
+Install or obtain the following:
-| Software/Package | Version | Purpose |
-|-----------------|---------|---------|
-| Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload |
+| Software or package | Tested version | Purpose |
+|---|---:|---|
+| Visual Studio | 2026 (18.0 or later) | IDE with the ASP.NET and web development workload |
| .NET SDK | 10.0 | Runtime and build tools |
| PostgreSQL Server | 12 or later | Database server |
-| pgAdmin 4 | Latest | PostgreSQL GUI management tool |
-| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` | Pivot Table and UI components |
-| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` | Styling for Pivot Table components |
-| Npgsql | 10.0.3 | PostgreSQL data provider for .NET |
-
-The sample targets .NET 10 and the corresponding Syncfusion Blazor release. Do not use wildcard package versions. If you use another .NET or Syncfusion version, verify the API differences before applying the code.
-
-`{{site.blazorversion}}` is resolved by the documentation build. When copying the commands into a standalone project, replace it with the concrete Syncfusion version used by the sample.
-
-### Step 0: Create the Blazor application
+| pgAdmin 4 | 9.6 or later | Optional PostgreSQL administration UI |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` | Pivot Table and data components |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` | Component themes |
+| Npgsql | 10.0.3 | PostgreSQL provider for .NET |
-Create a **Blazor Web App** named `URLAdaptor` with the .NET 10 SDK. Select **Interactive Server** interactivity and enable HTTPS. The project should contain `Program.cs`, `appsettings.json`, `wwwroot`, `Components`, and `Properties/launchSettings.json`.
+You also need:
-If PostgreSQL and pgAdmin are not already installed, install them first, start the PostgreSQL service, and create a database user with permission to connect to `OrderDB`, use the `public` schema, read and modify `public.orders`, and use the `orders_orderid_seq` sequence.
+- A PostgreSQL account that can create a database, or an administrator who can create it for you.
+- A valid [Syncfusion license or trial key](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application).
+- Permission to store local development secrets with the [.NET Secret Manager](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets?view=aspnetcore-10.0&tabs=windows%2Cpowershell).
-Syncfusion packages obtained from NuGet.org also require a valid Syncfusion license or trial key. Register the key before the first Syncfusion component is initialized; see the [Syncfusion license-key instructions](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application).
+## Create the Blazor Web App
-## Setting Up the PostgreSQL Environment
+Create a **Blazor Web App** named `URLAdaptor` that targets .NET 10. Select **Interactive Server** interactivity and enable HTTPS.
-### Step 1: Create the Database and Table in PostgreSQL
+You can also create it from a terminal:
-First, the **PostgreSQL database** structure must be created to store order records.
-
-**UI Instructions (Using pgAdmin 4):**
+```powershell
+dotnet new blazor -n URLAdaptor -f net10.0 -int Server
+cd URLAdaptor
+```
-1. **Open pgAdmin 4** and connect to the PostgreSQL server.
-2. **Create Database**:
- - Right-click on **Databases** → Select **Create** → **Database**
- - Enter name: `OrderDB`
- - Click **Save**
-3. **Create the table and sample rows using one of these methods**:
- - **UI method:** Expand `OrderDB` → **Schemas** → **public** → **Tables**, create `orders`, and define the columns from the SQL script; then insert the sample rows separately.
- - **SQL method:** Right-click on `OrderDB` → **Query Tool**, copy the table/sample-data script below, and execute it with F5 or the Run button. Do not create the table manually first.
+The remaining paths in this guide are relative to the `URLAdaptor` project directory.
-If you prefer SQL for database creation, run the separate database-creation script while connected to the maintenance database, then open a new Query Tool connection to `OrderDB` for the table/sample-data script.
+## Create the PostgreSQL Database
-4. **Verify the table and sample rows**:
- - Right-click on `OrderDB` → **Query Tool**
- - Run `SELECT * FROM public.orders;`
+Start PostgreSQL, open pgAdmin or `psql`, and connect as a role that can create databases.
-**Database creation script** (run while connected to the maintenance database, such as `postgres`):
+Run this statement while connected to a maintenance database such as `postgres`:
```sql
-CREATE DATABASE OrderDB;
+CREATE DATABASE "OrderDB";
```
-After the database is created, open a new pgAdmin Query Tool connection to `OrderDB` and run the following table and sample-data script:
+Reconnect to `OrderDB`, then create the table and sample data:
```sql
--- Create orders table
CREATE TABLE public.orders (
- orderid SERIAL PRIMARY KEY,
+ orderid INTEGER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
customername VARCHAR(100) NOT NULL,
employeeid INTEGER NOT NULL,
shipcity VARCHAR(100),
- freight NUMERIC(12,2)
+ freight NUMERIC(12, 2)
);
--- Insert sample data
INSERT INTO public.orders (customername, employeeid, shipcity, freight)
VALUES
('Alice Johnson', 1, 'New York', 120.50),
@@ -107,624 +79,518 @@ VALUES
('Henry Anderson', 3, 'Berlin', 220.60),
('Ivy Thomas', 2, 'London', 75.10),
('Jack White', 4, 'Tokyo', 130.90);
-```
-After executing this script, the order records are stored in the `orders` table within the `OrderDB` database. The database is now ready for integration with the Blazor application.
-
-**Verify the Inserted Records:**
+SELECT * FROM public.orders ORDER BY orderid;
+```
-To confirm the table and sample data were created correctly, run the following verification query in the pgAdmin **Query Tool** against `OrderDB`:
+For local development, you can use the role that created the database. For a separate application role, have a database administrator run the following commands in `OrderDB`, replacing `url_adaptor_app` and the example password:
```sql
-SELECT * FROM public.orders;
+CREATE ROLE url_adaptor_app LOGIN PASSWORD 'replace-with-a-strong-password';
+GRANT CONNECT ON DATABASE "OrderDB" TO url_adaptor_app;
+GRANT USAGE ON SCHEMA public TO url_adaptor_app;
+GRANT SELECT, INSERT, UPDATE, DELETE ON TABLE public.orders TO url_adaptor_app;
+GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO url_adaptor_app;
```
-The screenshot below shows the records successfully inserted into the `orders` table in PostgreSQL.
-
-
-
-**Image Content:**
-- pgAdmin Query Tool window.
-- The `SELECT * FROM public.orders` query at the top.
-- The results grid below showing all 10 sample records with columns `orderid`, `customername`, `employeeid`, `shipcity`, and `freight`.
+The sequence grant supports PostgreSQL installations or schemas that use sequence-backed identity columns.
-**Purpose:** Confirms the database table and sample data are ready before the Blazor application is wired up, helping customers catch PostgreSQL setup issues early.
+## Install the NuGet Packages
-**Capture Source:** pgAdmin 4 → `OrderDB` → right-click → **Query Tool** → run `SELECT * FROM public.orders;`.
-
-
-### Step 2: Install Required NuGet Packages
-
-The `URLAdaptor` Blazor Web App was created in Step 0. Install the required packages in the web project selected as the Package Manager Console's **Default project**.
-
-**Method 1: Using Package Manager Console**
-
-1. Open Visual Studio 2026.
-2. Navigate to **Tools → NuGet Package Manager → Package Manager Console**.
-3. Run the following commands:
+Run the following commands in the project directory.
```powershell
-Install-Package Syncfusion.Blazor.PivotTable -Version {{site.blazorversion}}
-Install-Package Syncfusion.Blazor.Themes -Version {{site.blazorversion}}
-Install-Package Npgsql -Version 10.0.3
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package Npgsql --version 10.0.3
```
-**Method 2: Using NuGet Package Manager UI**
+The project file should contain equivalent package references:
-1. Open **Visual Studio 2026 → Tools → NuGet Package Manager → Manage NuGet Packages for Solution**.
-2. Search for and install each package individually:
- - **[Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/)** (version {{site.blazorversion}})
- - **[Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)** (version {{site.blazorversion}})
- - **Npgsql** (version 10.0.3)
+```xml
+
+
+
+
+
+```
-**Project File Reference**
+## Configure Secrets and the Connection String
-The installed packages are reflected in the **URLAdaptor.csproj** file:
+Do not store a database password or license key in `appsettings.json`. Initialize Secret Manager and add both values:
-```xml
-
+```powershell
+dotnet user-secrets init
+dotnet user-secrets set "ConnectionStrings:PostgreSQL" "Host=localhost;Port=5432;Database=OrderDB;Username=url_adaptor_app;Password=replace-with-your-password"
+dotnet user-secrets set "Syncfusion:LicenseKey" "YOUR LICENSE KEY"
+```
-
- net10.0
- enable
- enable
-
+If you use the local `postgres` role instead, change `Username` and `Password` accordingly.
-
-
-
-
-
+For deployment, provide these settings through a secrets manager or environment variables:
-
+```text
+ConnectionStrings__PostgreSQL
+Syncfusion__LicenseKey
```
-All required packages are now installed.
+See the [Npgsql connection-string reference](https://www.npgsql.org/doc/connection-string-parameters.html) for SSL, pooling, timeout, and certificate options required by your PostgreSQL environment.
-### Step 3: Configure the Connection String
+## Create the Shared Order Model
-A connection string contains the information needed to connect the application to the PostgreSQL database, including the server address, database name, and authentication credentials.
+Create `Models/Order.cs`:
-The sample stores the connection string in configuration and injects it into `OrderController`. This keeps credentials out of source code and allows each environment to provide its own database settings.
-
-**Instructions:**
+```csharp
+using System.ComponentModel.DataAnnotations;
-1. Open `appsettings.json` and add the following configuration:
+namespace URLAdaptor.Models;
-```json
+public class Order
{
- "ConnectionStrings": {
- "PostgreSQL": "Host=localhost;Port=5432;Database=OrderDB;Username=postgres;Password=replace-with-your-password;"
- }
-}
-```
+ [Key]
+ public int? OrderID { get; set; }
-2. In `OrderController`, inject `IConfiguration` and retrieve the named connection string:
+ [Required]
+ public string? CustomerName { get; set; }
-```csharp
-private readonly string ConnectionString;
+ [Required]
+ public int? EmployeeID { get; set; }
-public OrderController(IConfiguration configuration)
-{
- ConnectionString = configuration.GetConnectionString("PostgreSQL")
- ?? throw new InvalidOperationException("The PostgreSQL connection string is not configured.");
+ public decimal? Freight { get; set; }
+ public string? ShipCity { get; set; }
}
```
-**Connection String Components:**
-
-| Component | Description |
-|-----------|-------------|
-| Host | The address of the PostgreSQL server (`localhost` for local development) |
-| Port | The port number on which PostgreSQL is running (default is `5432`) |
-| Database | The database name (in this case, `OrderDB`) |
-| Username | The PostgreSQL username (default is `PostgreSQL`) |
-| Password | The password for the PostgreSQL user account |
-
-This `ConnectionString` field is reused by every database action when opening Npgsql connections.
+The nullable key allows an inserted record to omit `OrderID`; PostgreSQL generates it and the API returns it after insertion.
-> **Security Note:** Do not commit passwords to source control. For local development, use .NET user secrets; for deployment, use environment variables or a secrets manager such as Azure Key Vault. The environment-variable form is `ConnectionStrings__PostgreSQL`.
+## Create the API Controller
-The database connection string has been configured successfully.
-
-
-### Step 4: Create the Controller
-
-The controller is the heart of the URL Adaptor integration. It exposes HTTP endpoints that the pivot table calls for reading and modifying data. The sample uses raw Npgsql commands to keep the data-access code explicit and easy to follow.
-
-**Instructions:**
-
-1. Inside the `Controllers` folder, create a new file named **OrderController.cs**.
-2. Define the `OrderController` class with the following code:
+Create the `Controllers` folder and add `Controllers/OrderController.cs`:
```csharp
-using Microsoft.AspNetCore.Mvc;
-using Syncfusion.Blazor.Data;
-using Npgsql;
-using System.Data;
using System.ComponentModel.DataAnnotations;
using System.Text.Json.Serialization;
+using Microsoft.AspNetCore.Mvc;
+using Npgsql;
+using NpgsqlTypes;
+using Syncfusion.Blazor.Data;
+using URLAdaptor.Models;
-namespace URLAdaptor.Controllers
+namespace URLAdaptor.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class OrderController : ControllerBase
{
- [ApiController]
- [Route("api/[controller]")]
- public class OrderController : ControllerBase
- {
- private readonly string ConnectionString;
+ private readonly string connectionString;
+ private readonly ILogger logger;
- public OrderController(IConfiguration configuration)
- {
- ConnectionString = configuration.GetConnectionString("PostgreSQL")
- ?? throw new InvalidOperationException("The PostgreSQL connection string is not configured.");
- }
+ public OrderController(
+ IConfiguration configuration,
+ ILogger logger)
+ {
+ connectionString = configuration.GetConnectionString("PostgreSQL")
+ ?? throw new InvalidOperationException(
+ "The PostgreSQL connection string is not configured.");
+ this.logger = logger;
+ }
- [HttpPost]
- public object Post([FromBody] DataManagerRequest request)
- {
- // This sample intentionally returns the complete table. The request is
- // accepted to satisfy the URL Adaptor contract but is not processed.
- _ = request;
- List dataSource = GetOrderData();
+ [HttpPost]
+ public async Task> Read(
+ [FromBody] DataManagerRequest request,
+ CancellationToken cancellationToken)
+ {
+ _ = request;
+ List orders = [];
- return new { result = dataSource, count = dataSource.Count };
- }
+ const string sql = """
+ SELECT orderid, customername, employeeid, shipcity, freight
+ FROM public.orders
+ ORDER BY orderid
+ """;
- private List GetOrderData()
+ try
{
- const string query = "SELECT orderid, customername, employeeid, shipcity, freight FROM public.orders ORDER BY orderid";
-
- using NpgsqlConnection connection = new(ConnectionString);
- connection.Open();
-
- using NpgsqlCommand command = new(query, connection);
- using NpgsqlDataAdapter dataAdapter = new(command);
-
- DataTable dataTable = new();
- dataAdapter.Fill(dataTable);
-
- return (from DataRow row in dataTable.Rows
- select new Order
- {
- OrderID = Convert.ToInt32(row["orderid"]),
- CustomerName = row["customername"].ToString(),
- EmployeeID = Convert.ToInt32(row["employeeid"]),
- ShipCity = row.IsNull("shipcity") ? null : row["shipcity"].ToString(),
- Freight = row.IsNull("freight") ? null : Convert.ToDecimal(row["freight"])
- }).ToList();
- }
+ await using NpgsqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using NpgsqlCommand command = new(sql, connection);
+ await using NpgsqlDataReader reader =
+ await command.ExecuteReaderAsync(cancellationToken);
- [HttpPost]
- [Route("Insert")]
- public IActionResult Insert([FromBody] CRUDModel value)
- {
- if (value.Value is not Order order || string.IsNullOrWhiteSpace(order.CustomerName) || !order.EmployeeID.HasValue)
+ while (await reader.ReadAsync(cancellationToken))
{
- return BadRequest("CustomerName and EmployeeID are required.");
+ orders.Add(new Order
+ {
+ OrderID = reader.GetInt32(0),
+ CustomerName = reader.GetString(1),
+ EmployeeID = reader.GetInt32(2),
+ ShipCity = reader.IsDBNull(3) ? null : reader.GetString(3),
+ Freight = reader.IsDBNull(4) ? null : reader.GetDecimal(4)
+ });
}
- const string query = "INSERT INTO public.orders (customername, freight, shipcity, employeeid) " +
- "VALUES (@customername, @freight, @shipcity, @employeeid)";
+ return Ok(new { result = orders, count = orders.Count });
+ }
+ catch (NpgsqlException exception)
+ {
+ logger.LogError(exception, "Unable to read orders from PostgreSQL.");
+ return Problem("The order data could not be loaded.");
+ }
+ }
- using NpgsqlConnection connection = new(ConnectionString);
- connection.Open();
+ [HttpPost("Insert")]
+ public async Task> Insert(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
+ {
+ if (request.Value is not Order order ||
+ string.IsNullOrWhiteSpace(order.CustomerName) ||
+ !order.EmployeeID.HasValue)
+ {
+ return BadRequest("CustomerName and EmployeeID are required.");
+ }
- using NpgsqlCommand command = new(query, connection);
- command.Parameters.AddWithValue("customername", order.CustomerName);
- command.Parameters.AddWithValue("freight", order.Freight.HasValue ? order.Freight.Value : (object)DBNull.Value);
- command.Parameters.AddWithValue("shipcity", order.ShipCity ?? (object)DBNull.Value);
- command.Parameters.AddWithValue("employeeid", order.EmployeeID.Value);
- command.ExecuteNonQuery();
+ const string sql = """
+ INSERT INTO public.orders
+ (customername, freight, shipcity, employeeid)
+ VALUES
+ ($1, $2, $3, $4)
+ RETURNING orderid
+ """;
+ try
+ {
+ await using NpgsqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using NpgsqlCommand command = new(sql, connection);
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Varchar, Value = order.CustomerName });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Numeric, Value = order.Freight ?? (object)DBNull.Value });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Varchar, Value = order.ShipCity ?? (object)DBNull.Value });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Integer, Value = order.EmployeeID.Value });
+
+ object? generatedKey = await command.ExecuteScalarAsync(cancellationToken);
+ order.OrderID = Convert.ToInt32(generatedKey);
return Ok(order);
}
-
- [HttpPost]
- [Route("Update")]
- public IActionResult Update([FromBody] CRUDModel value)
+ catch (PostgresException exception)
+ when (exception.SqlState == PostgresErrorCodes.CheckViolation ||
+ exception.SqlState == PostgresErrorCodes.NotNullViolation ||
+ exception.SqlState == PostgresErrorCodes.ForeignKeyViolation)
{
- if (value.Value is not Order order || !order.OrderID.HasValue || string.IsNullOrWhiteSpace(order.CustomerName) || !order.EmployeeID.HasValue)
- {
- return BadRequest("OrderID, CustomerName, and EmployeeID are required.");
- }
-
- const string query = "UPDATE public.orders SET customername=@customername, freight=@freight, " +
- "employeeid=@employeeid, shipcity=@shipcity WHERE orderid=@orderid";
-
- using NpgsqlConnection connection = new(ConnectionString);
- connection.Open();
-
- using NpgsqlCommand command = new(query, connection);
- command.Parameters.AddWithValue("customername", order.CustomerName);
- command.Parameters.AddWithValue("freight", order.Freight.HasValue ? order.Freight.Value : (object)DBNull.Value);
- command.Parameters.AddWithValue("employeeid", order.EmployeeID.Value);
- command.Parameters.AddWithValue("shipcity", order.ShipCity ?? (object)DBNull.Value);
- command.Parameters.AddWithValue("orderid", order.OrderID.Value);
-
- return command.ExecuteNonQuery() == 0
- ? NotFound()
- : Ok(order);
+ logger.LogWarning(exception, "PostgreSQL rejected an inserted order.");
+ return BadRequest("The order violates a database constraint.");
}
-
- [HttpPost]
- [Route("Delete")]
- public IActionResult Delete([FromBody] CRUDModel value)
+ catch (NpgsqlException exception)
{
- if (!int.TryParse(value.Key?.ToString(), out int orderId))
- {
- return BadRequest("A numeric order key is required.");
- }
-
- const string query = "DELETE FROM public.orders WHERE orderid=@orderid";
+ logger.LogError(exception, "Unable to insert an order.");
+ return Problem("The order could not be inserted.");
+ }
+ }
- using NpgsqlConnection connection = new(ConnectionString);
- connection.Open();
+ [HttpPost("Update")]
+ public async Task> Update(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
+ {
+ if (request.Value is not Order order ||
+ !order.OrderID.HasValue ||
+ string.IsNullOrWhiteSpace(order.CustomerName) ||
+ !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "OrderID, CustomerName, and EmployeeID are required.");
+ }
- using NpgsqlCommand command = new(query, connection);
- command.Parameters.AddWithValue("orderid", orderId);
+ const string sql = """
+ UPDATE public.orders
+ SET customername = $1,
+ freight = $2,
+ employeeid = $3,
+ shipcity = $4
+ WHERE orderid = $5
+ """;
- return command.ExecuteNonQuery() == 0
- ? NotFound()
- : NoContent();
+ try
+ {
+ await using NpgsqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using NpgsqlCommand command = new(sql, connection);
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Varchar, Value = order.CustomerName });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Numeric, Value = order.Freight ?? (object)DBNull.Value });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Integer, Value = order.EmployeeID.Value });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Varchar, Value = order.ShipCity ?? (object)DBNull.Value });
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Integer, Value = order.OrderID.Value });
+
+ int affectedRows = await command.ExecuteNonQueryAsync(cancellationToken);
+ return affectedRows == 0 ? NotFound() : Ok(order);
+ }
+ catch (PostgresException exception)
+ when (exception.SqlState == PostgresErrorCodes.CheckViolation ||
+ exception.SqlState == PostgresErrorCodes.NotNullViolation ||
+ exception.SqlState == PostgresErrorCodes.ForeignKeyViolation)
+ {
+ logger.LogWarning(exception, "PostgreSQL rejected an updated order.");
+ return BadRequest("The order violates a database constraint.");
+ }
+ catch (NpgsqlException exception)
+ {
+ logger.LogError(exception, "Unable to update order {OrderID}.", order.OrderID);
+ return Problem("The order could not be updated.");
}
+ }
- public class Order
+ [HttpPost("Delete")]
+ public async Task> Delete(
+ [FromBody] CrudModel request,
+ CancellationToken cancellationToken)
+ {
+ if (!int.TryParse(request.Key?.ToString(), out int orderID))
{
- [Key]
- public int? OrderID { get; set; }
- public string? CustomerName { get; set; }
- public int? EmployeeID { get; set; }
- public decimal? Freight { get; set; }
- public string? ShipCity { get; set; }
+ return BadRequest("A numeric order key is required.");
}
- public class CRUDModel where T : class
+ const string sql =
+ "DELETE FROM public.orders WHERE orderid = $1";
+
+ try
{
- [JsonPropertyName("action")]
- public string? Action { get; set; }
- [JsonPropertyName("keyColumn")]
- public string? KeyColumn { get; set; }
- [JsonPropertyName("key")]
- public object? Key { get; set; }
- [JsonPropertyName("value")]
- public T? Value { get; set; }
- [JsonPropertyName("added")]
- public List? Added { get; set; }
- [JsonPropertyName("changed")]
- public List? Changed { get; set; }
- [JsonPropertyName("deleted")]
- public List? Deleted { get; set; }
- [JsonPropertyName("params")]
- public IDictionary? Params { get; set; }
+ await using NpgsqlConnection connection = new(connectionString);
+ await connection.OpenAsync(cancellationToken);
+ await using NpgsqlCommand command = new(sql, connection);
+ command.Parameters.Add(new NpgsqlParameter
+ { NpgsqlDbType = NpgsqlDbType.Integer, Value = orderID });
+
+ int affectedRows = await command.ExecuteNonQueryAsync(cancellationToken);
+ return affectedRows == 0
+ ? NotFound()
+ : Ok(new { key = orderID });
+ }
+ catch (NpgsqlException exception)
+ {
+ logger.LogError(exception, "Unable to delete order {OrderID}.", orderID);
+ return Problem("The order could not be deleted.");
}
}
}
-```
-**Explanation:**
+public class CrudModel where T : class
+{
+ [JsonPropertyName("action")]
+ public string? Action { get; set; }
+
+ [JsonPropertyName("keyColumn")]
+ public string? KeyColumn { get; set; }
+
+ [JsonPropertyName("key")]
+ public object? Key { get; set; }
+
+ [JsonPropertyName("value")]
+ public T? Value { get; set; }
-- **`Post` action (`POST /api/Order`)**: Reads the full dataset from PostgreSQL and returns it as `{ result, count }`. The sample accepts `DataManagerRequest` but does not process its query operations.
-- **`GetOrderData` helper**: Opens an Npgsql connection, runs a `SELECT` against `public.orders`, handles nullable columns, and projects the rows into `Order` objects.
-- **`Insert` action (`POST /api/Order/Insert`)**: Validates a `CRUDModel`, executes a parameterized `INSERT`, and returns the inserted record.
-- **`Update` action (`POST /api/Order/Update`)**: Validates the primary key, executes a parameterized `UPDATE`, and returns `404` when no row matches.
-- **`Delete` action (`POST /api/Order/Delete`)**: Validates the numeric `Key`, executes a parameterized `DELETE`, and returns `404` when no row matches.
-- The `[ApiController]` attribute enables automatic model validation and HTTP API conventions for the controller.
+ [JsonPropertyName("added")]
+ public List? Added { get; set; }
-The controller has been successfully created with read and full CRUD support.
+ [JsonPropertyName("changed")]
+ public List? Changed { get; set; }
+
+ [JsonPropertyName("deleted")]
+ public List? Deleted { get; set; }
+
+ [JsonPropertyName("params")]
+ public IDictionary? Params { get; set; }
+}
+```
-> **Read endpoint contract:** The `POST /api/Order` endpoint accepts a JSON `DataManagerRequest` body and returns `{ result, count }`. It is invoked only by the Pivot Table's URL Adaptor over `POST`; it does not respond to a browser address-bar `GET` request and is not meant to be opened directly.
+The URL Adaptor uses `value` for insert and update records and `key` for the delete identifier. The remaining `CrudModel` properties support the complete DataManager request shape even though this sample does not use batch operations.
-### Step 5: Register Services in Program.cs
+The controller returns:
-The `Program.cs` file is where application services are registered and configured. This file must be updated to enable Syncfusion Blazor, Razor components, and the API controllers that back the URL Adaptor.
+| Endpoint | Success | Client error | Missing row | Database error |
+|---|---|---|---|---|
+| `POST /api/Order` | `200` with `{ result, count }` | `400` for an invalid body | Not applicable | `500` problem response |
+| `POST /api/Order/Insert` | `200` with the inserted record and generated key | `400` | Not applicable | `500` problem response |
+| `POST /api/Order/Update` | `200` with the updated record | `400` | `404` | `500` problem response |
+| `POST /api/Order/Delete` | `200` with the deleted key | `400` | `404` | `500` problem response |
-**Instructions:**
+## Register Services and Endpoints
-1. Open the `Program.cs` file at the project root.
-2. Replace its contents with the following code:
+Replace `Program.cs` with:
```csharp
-using URLAdaptor.Components;
using Syncfusion.Blazor;
+using URLAdaptor.Components;
var builder = WebApplication.CreateBuilder(args);
-// ========== SYNCFUSION BLAZOR CONFIGURATION ==========
builder.Services.AddSyncfusionBlazor();
-
-// ========== RAZOR COMPONENTS ==========
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
-
-// ========== API CONTROLLERS (backs the URL Adaptor) ==========
builder.Services.AddControllers();
var app = builder.Build();
-// Register the Syncfusion license before any Syncfusion component is initialized.
-Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
+string licenseKey = builder.Configuration["Syncfusion:LicenseKey"]
+ ?? throw new InvalidOperationException(
+ "The Syncfusion license key is not configured.");
+Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey);
-// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
- // The default HSTS value is 30 days. Change for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
-app.MapControllers();
-
app.UseAntiforgery();
-
app.MapStaticAssets();
+app.MapControllers();
app.MapRazorComponents()
.AddInteractiveServerRenderMode();
app.Run();
```
-**Explanation:**
-
-- **`AddSyncfusionBlazor()`**: Registers Syncfusion Blazor services, including the Pivot Table and theme resources.
-- **`AddRazorComponents()` and `AddInteractiveServerComponents()`**: Enables Blazor server-side rendering with interactive components.
-- **`AddControllers()`**: Registers the API controllers (`OrderController`) so the URL Adaptor endpoints are reachable.
-- **`MapControllers()`**: Adds the controller routes to the application's endpoint pipeline.
-- **`UseAntiforgery()`**: Enables anti-forgery middleware for endpoints that explicitly require it. The sample API actions do not add anti-forgery validation.
-
-> **Note:** The URL Adaptor posts JSON directly to controller endpoints; Blazor interactive-server transport does not automatically add a token to arbitrary API requests. If you add anti-forgery validation to these browser-accessible write actions, configure the adaptor to send the request token and document the matching server configuration.
-
-The service registration has been completed successfully.
-
-## Integrating the Blazor Pivot Table
-
-### Step 1: Configure the Pivot Table Imports and Theme
-
-Syncfusion provides pre-built UI components such as the Pivot Table, which summarizes large datasets into a multidimensional view.
+The controller actions do not opt into antiforgery validation. If you add an antiforgery policy to these cookie-authenticated endpoints, configure `SfDataManager` to send the matching request token. For a public deployment, also add authentication, authorization, rate limiting, and an appropriate production logging policy.
-**Instructions:**
+## Configure Imports and Static Assets
-* The `Syncfusion.Blazor.PivotTable` package was installed in **Step 2** of the previous section.
-* Import the required namespaces in the `Components/_Imports.razor` file:
+Add these namespaces to `Components/_Imports.razor`:
-```csharp
-@using System.Net.Http
-@using System.Net.Http.Json
-@using Microsoft.AspNetCore.Components.Forms
-@using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.AspNetCore.Components.Web
-@using static Microsoft.AspNetCore.Components.Web.RenderMode
-@using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.JSInterop
-@using URLAdaptor
-@using URLAdaptor.Components
+```cshtml
@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.PivotView
+@using URLAdaptor.Models
```
-* Add the stylesheet and scripts in the `Components/App.razor` file. Find the `` section and add:
-
-```html
-
-
-```
-
-* And include the Syncfusion script reference before the closing `` tag:
+The .NET 10 Blazor Web App template already includes `_framework/blazor.web.js` in `Components/App.razor`; do not add it a second time.
-```html
-
-
-```
+Add the Syncfusion theme in the `` element:
-For this project, the **bootstrap5** theme is used. A different theme can be selected or customized based on project requirements. Refer to the [Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming options.
-
-The complete `App.razor` for the sample looks like this:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+```cshtml
+
```
-Blazor components are now configured and ready to use. For additional guidance, refer to the Pivot Table [getting-started](https://blazor.syncfusion.com/documentation/pivot-table/getting-started-webapp) documentation.
+Add the Syncfusion script before the closing `` tag:
-### Step 2: Add the PivotTable Package Reference
-
-Confirm the `Syncfusion.Blazor.PivotTable` package is referenced. It provides the Pivot Table and the transitive `Syncfusion.Blazor.Data` assembly used by `SfDataManager` and `Adaptors`.
-
-The relevant section of **URLAdaptor.csproj**:
-
-```xml
-
-
-
-
-
+```cshtml
+
```
-The package references are now in place.
+Keep the existing framework script:
-### Step 3: Configure the Pivot Table with the URL Adaptor
+```cshtml
+
+```
-The pivot table binds to the PostgreSQL-backed API through the [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) configured with [`Adaptors.UrlAdaptor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html). The `Url`, `InsertUrl`, `UpdateUrl`, and `RemoveUrl` properties point at the controller actions created in **Step 4**.
+See [Blazor component themes](https://blazor.syncfusion.com/documentation/appearance/themes) for other supported themes.
-**Instructions:**
+## Configure the Pivot Table
-1. Open the file named `Home.razor` in the `Components/Pages` folder.
-2. Replace its contents with the following markup:
+Replace `Components/Pages/Home.razor` with:
```cshtml
@page "/"
-@using System.ComponentModel.DataAnnotations
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.PivotView
-
-
-
+
+
+
+
-
+
-
+
-
+
-
-
-
+
+
+
-@code{
- public List Orders { get; set; } = new();
-
- private void beginDrillThrough(BeginDrillThroughEventArgs args)
+@code {
+ private static void BeginDrillThrough(
+ BeginDrillThroughEventArgs args)
{
- // Configure the BeginDrillThrough event to set the primary key for CRUD operations.
- // Iterate through all columns in the edit dialog grid.
- for (int i = 0; i < args.GridObj.Columns.Count; i++)
+ foreach (var column in args.GridObj.Columns)
{
- // Check if the current column is the primary key column.
- if (args.GridObj.Columns[i].Field == "OrderID")
- {
- // Mark this column as the primary key so DataManager uses it
- // to uniquely identify records during CRUD operations.
- args.GridObj.Columns[i].IsPrimaryKey = true;
- }
- else
- {
- // Ensure other columns are visible in the edit dialog grid.
- args.GridObj.Columns[i].Visible = true;
- }
+ column.Visible = true;
+ column.IsPrimaryKey = column.Field == nameof(Order.OrderID);
}
}
-
- public class Order
- {
- public int OrderID { get; set; }
- public string? CustomerName { get; set; }
- public int EmployeeID { get; set; }
- public decimal? Freight { get; set; }
- public string? ShipCity { get; set; }
- }
}
```
-**Component Explanation:**
-
-- **``**: The pivot table component bound to the `Order` type.
-- **`ShowFieldList="true"`**: Displays the field list UI so end users can drag fields between rows, columns, and values at runtime.
-- **``**: Defines the default field arrangement—`EmployeeID` as a column, `CustomerName` as a row, and `Freight` as a value.
-- **``**: Wires the pivot table to the API via the URL Adaptor. The four URLs map directly to the controller actions.
-- **``**: Enables cell-level editing, adding, and deleting in `Normal` edit mode.
-- **`BeginDrillThrough` event**: When a user opens the edit dialog from a pivot cell, this handler runs and marks `OrderID` as the primary key of the edit dialog grid so insert/update/delete operations can target the correct record.
-
-The Home component has been updated successfully with the Pivot Table.
-
-**Pivot Table with PostgreSQL Data:**
+`BeginDrillThrough` marks `OrderID` as the edit grid's primary key. The URL Adaptor sends the edited record, including `OrderID`, to the update endpoint and sends the primary-key value in `key` to the delete endpoint.
-When `dotnet run` launches the application and the browser loads the URL shown in the terminal, the Pivot Table renders the PostgreSQL `orders` data with the configured field arrangement: `CustomerName` as rows, `EmployeeID` as columns, and `Freight` aggregated as a value. The Field List panel is available so end users can rearrange fields at runtime.
+The editing APIs shown here are tested with the Syncfusion version listed in the prerequisites. See [editing in the Blazor Pivot Table](https://blazor.syncfusion.com/documentation/pivot-table/editing) and the [`BeginDrillThroughEventArgs` API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.BeginDrillThroughEventArgs.html) when using another package version.
-
+## Build and Verify the Application
-**Image Content:**
-- The Blazor application running in the browser at `http://localhost:5145`.
-- The `SfPivotView` rendered with the configured rows (`CustomerName`), columns (`EmployeeID`), and value (`Freight`).
-- The **Field List** panel open or accessible, demonstrating runtime layout customization.
-- Aggregated subtotals and grand totals visible in the pivot body.
-- No records edited yet — this is the pristine pre-CRUD state.
+Confirm that PostgreSQL is running and that the configured role can read and modify `public.orders`. Then restore, build, and run the application:
-**Purpose:** Confirms that the data flow (PostgreSQL → Npgsql → OrderController → URL Adaptor → Pivot Table) is wired correctly before the CRUD sections show modified states.
-
-**Capture Source:** Run `dotnet run`, open the browser at the URL shown in the terminal, and capture the full Pivot Table with the field list immediately after the first render (before any insert/update/delete).
-
-## URL Adaptor Configuration
-
-The URL Adaptor is the contract between the Blazor Pivot Table and the PostgreSQL-backed API. It works as follows:
-
-1. The pivot table serializes its current data state into a `DataManagerRequest` object.
-2. The `SfDataManager` posts that object as JSON to the `Url` endpoint (`POST /api/Order`).
-3. The controller deserialize the request, queries PostgreSQL, and returns `{ result, count }`.
-4. For write operations, the pivot table posts a `CRUDModel` payload to the matching `InsertUrl`, `UpdateUrl`, or `RemoveUrl`.
-
-```html
-
-
+```powershell
+dotnet restore
+dotnet build
+dotnet run
```
-| Property | Purpose | Controller Action |
-|----------|---------|-------------------|
-| `Url` | Reads data from the server | `POST /api/Order` → `Post` |
-| `InsertUrl` | Adds a new record | `POST /api/Order/Insert` → `Insert` |
-| `UpdateUrl` | Updates an existing record | `POST /api/Order/Update` → `Update` |
-| `RemoveUrl` | Deletes a record | `POST /api/Order/Delete` → `Delete` |
-
-> **URL Tip:** Relative URLs keep the adaptor on the same origin and automatically use the active HTTP or HTTPS profile. If absolute URLs are required, update both the scheme and port to match `Properties/launchSettings.json`.
+Open the HTTPS URL shown in the terminal. The Pivot Table should display `CustomerName` as rows, `EmployeeID` as columns, and the sum of `Freight` as values.
-The sample returns `400` for invalid CRUD payloads, `404` when an update or delete key does not exist, and `500` for unhandled database exceptions. Add structured logging and a production exception handler before exposing these endpoints publicly.
+Before testing the UI, you can verify the read endpoint with PowerShell. Replace the URL with the HTTPS address printed by `dotnet run`:
-The URL Adaptor has been successfully configured. The CRUD sections below include screenshots of the `CRUDModel` value received by the `Insert`, `Update`, and `Delete` controller actions.
+```powershell
+Invoke-RestMethod `
+ -Method Post `
+ -Uri "https://localhost:7001/api/Order" `
+ -ContentType "application/json" `
+ -Body "{}"
+```
-## API Endpoints
+A browser address-bar request sends `GET`, so it is not a valid test for this `POST` endpoint.
-The `OrderController` exposes the following REST endpoints:
+## Test CRUD Operations
-| Method | Route | Payload | Description |
-|--------|-------|---------|-------------|
-| `POST` | `/api/Order` | `DataManagerRequest` | Returns all order records as `{ result, count }`; this sample does not process request operations. |
-| `POST` | `/api/Order/Insert` | `CRUDModel` | Inserts a new order into the `orders` table. |
-| `POST` | `/api/Order/Update` | `CRUDModel` | Updates an existing order filtered by `Order ID`. |
-| `POST` | `/api/Order/Delete` | `CRUDModel` | Deletes an order using the `Key` (primary key value). |
+Double-click an aggregated value cell to open its underlying records.
-**Sample read response:**
+- To insert, select **Add**, enter `CustomerName`, `EmployeeID`, and optional values, then save. PostgreSQL generates `OrderID`, and the insert response returns it.
+- To update, select a row, select **Edit**, change a value, and save. The edited record supplies `OrderID`.
+- To delete, select a row, select **Delete**, and confirm. The edit grid supplies `OrderID` as the request key.
-```json
-{
- "result": [
- { "orderID": 1, "customerName": "Alice Johnson", "employeeID": 1, "shipCity": "New York", "freight": 120.50 },
- { "orderID": 2, "customerName": "Bob Smith", "employeeID": 2, "shipCity": "London", "freight": 85.20 }
- ],
- "count": 2
-}
-```
+After each operation, the Pivot Table refreshes its aggregated values. If it does not, inspect the write response in the browser Network panel and confirm that it returned a success status and the documented JSON body.
-**Sample insert payload:**
+Representative payloads are:
```json
{
"action": "insert",
- "keyColumn": "orderID",
+ "keyColumn": "OrderID",
"value": {
"customerName": "Karen Lee",
"employeeID": 3,
@@ -734,180 +600,44 @@ The `OrderController` exposes the following REST endpoints:
}
```
-## CRUD Operations
-
-The Pivot Table performs CRUD operations through cell editing and the edit dialog. Each operation calls the corresponding controller endpoint, which executes the appropriate PostgreSQL command.
-
-### Insert
-
-Record insertion allows new orders to be added directly through the edit dialog of the Pivot Table component. The adaptor serializes the new row into a `CRUDModel` and posts it to `/api/Order/Insert`.
-
-The `Insert` action is implemented in the complete controller in Step 4. It validates required fields and uses parameterized SQL.
-
-**What happens behind the scenes:**
-
-1. The user opens the edit dialog from a pivot cell and adds a new row.
-2. The pivot table posts the new row to `InsertUrl`.
-3. The controller builds an `INSERT` statement and executes it through Npgsql.
-4. PostgreSQL stores the new record (the `Order ID` SERIAL column auto-increments).
-5. The pivot table refreshes by calling the read endpoint, and the new record appears in the summarized view.
-
-The screenshot below shows the `CRUDModel` value received in the `Insert` controller action — the `Value` parameter carrying the `Action`, `KeyColumn`, and the new order record (`CustomerName`, `EmployeeID`, `ShipCity`, `Freight`) that will be inserted into the `orders` table.
-
-
-
-**Image Content:**
-- The `Insert` action of `OrderController` open in the editor.
-- The `Value` parameter of type `CRUDModel` expanded to reveal its contents.
-- The `Action` set to `"insert"`, the `KeyColumn` set to `"orderID"`, and the `Value` property holding the new order fields: `CustomerName`, `EmployeeID`, `ShipCity`, and `Freight`.
-
-**Purpose:** Confirms the exact `CRUDModel` value received by the `Insert` action so customers can verify that the client-side payload maps correctly to the server-side `Value` parameter before the `INSERT` statement runs.
-
-**Capture Source:** Trigger an insert from the edit dialog (double-click a pivot cell, click **Add**, fill in a row, click **Update**) and inspect the `Value` parameter received by the `Insert` controller action.
-
-### Update
-
-Record modification allows order details to be updated directly within the edit dialog. The adaptor serializes the edited row and posts it to `/api/Order/Update`.
-
-The `Update` action is implemented in the complete controller in Step 4. It validates `OrderID`, uses parameterized SQL, and reports a missing row as `404 Not Found`.
-
-**What happens behind the scenes:**
-
-1. The user edits a row in the edit dialog and saves it.
-2. The pivot table posts the edited row to `UpdateUrl`.
-3. The controller builds an `UPDATE` statement filtered by `Order ID` and executes it.
-4. PostgreSQL updates the matching record.
-5. The pivot table refreshes and reflects the updated aggregated value.
-
-The screenshot below shows the `CRUDModel` value received in the `Update` controller action — the `Value` parameter carrying the `Action`, `KeyColumn`, and the edited order record (`CustomerName`, `EmployeeID`, `ShipCity`, `Freight`, and the `OrderID` used as the update filter) that will update the matching row in the `orders` table.
-
-
-
-**Image Content:**
-- The `Update` action of `OrderController` open in the editor.
-- The `Value` parameter of type `CRUDModel` expanded to reveal its contents.
-- The `Action` set to `"update"`, the `KeyColumn` set to `"orderID"`, and the `Value` property holding the modified order fields — including the changed `Freight` or `ShipCity` — along with the `OrderID` used to filter the `UPDATE`.
-
-**Purpose:** Confirms the exact `CRUDModel` value received by the `Update` action so customers can verify that the client-side payload maps correctly to the server-side `Value` parameter and the `Order ID` filter before the `UPDATE` statement runs.
-
-**Capture Source:** Trigger an update from the edit dialog (double-click a pivot cell, select a row, click **Edit**, modify a field, click **Update**) and inspect the `Value` parameter received by the `Update` controller action.
-
-### Delete
-
-Record deletion allows orders to be removed directly from the edit dialog. The adaptor posts the primary key of the deleted row to `/api/Order/Delete`.
-
-The `Delete` action is implemented in the complete controller in Step 4. It validates the numeric primary key and reports a missing row as `404 Not Found`.
-
-**What happens behind the scenes:**
-
-1. The user selects a row in the edit dialog and deletes it.
-2. The pivot table posts the `Key` (primary key value) to `RemoveUrl`.
-3. The controller builds a `DELETE` statement filtered by `Order ID` and executes it.
-4. PostgreSQL removes the matching record.
-5. The pivot table refreshes and the record is removed from the summarized view.
-
-The screenshot below shows the `CRUDModel` value received in the `Delete` controller action — the `Value` parameter carrying the `Action`, `KeyColumn`, and the `Key` (primary key value of the deleted row) that the `DELETE` statement uses to filter by `Order ID`.
-
-
-
-**Image Content:**
-- The `Delete` action of `OrderController` open in the editor.
-- The `Value` parameter of type `CRUDModel` expanded to reveal its contents.
-- The `Action` set to `"remove"`, the `KeyColumn` set to `"orderID"`, and the `Key` containing the `Order ID` of the deleted record.
-
-**Purpose:** Confirms the exact `CRUDModel` value received by the `Delete` action so customers can verify that the primary key (`Key`) is being received correctly before the `DELETE` statement runs.
-
-**Capture Source:** Trigger a delete from the edit dialog (double-click a pivot cell, select a row, click **Delete**, confirm) and inspect the `Value` parameter received by the `Delete` controller action.
-
-### Enabling CRUD via the BeginDrillThrough Event
-
-For CRUD operations to work in the edit dialog, the primary key column must be marked. The `BeginDrillThrough` event handler does this dynamically when the edit dialog opens:
-
-```csharp
-private void beginDrillThrough(BeginDrillThroughEventArgs args)
+```json
{
- for (int i = 0; i < args.GridObj.Columns.Count; i++)
- {
- if (args.GridObj.Columns[i].Field == "OrderID")
- {
- args.GridObj.Columns[i].IsPrimaryKey = true;
- }
- else
- {
- args.GridObj.Columns[i].Visible = true;
- }
- }
+ "action": "update",
+ "keyColumn": "OrderID",
+ "value": {
+ "orderID": 1,
+ "customerName": "Alice Johnson",
+ "employeeID": 1,
+ "shipCity": "Boston",
+ "freight": 125.00
+ }
}
```
-This step is required so the URL Adaptor knows which column to send as the `Key` for update and delete operations.
-
-## Data Flow Diagram
-
-The following image illustrates how data flows between PostgreSQL, the ASP.NET Core controller, and the Syncfusion Blazor Pivot Table.
-
-
-
-1. **PostgreSQL** stores the `orders` records.
-2. The **Npgsql data provider** establishes the connection between the application and the PostgreSQL database and executes SQL commands.
-3. The **`OrderController`** exposes API endpoints that handle data retrieval and CRUD operations.
-4. The **URL Adaptor** configured in the `SfDataManager` communicates with the controller endpoints by sending `DataManagerRequest` and `CRUDModel` payloads.
-5. The **`SfPivotView`** consumes the returned data and renders it in the Pivot Table. User modifications are sent back to the controller through the configured CRUD endpoints.
-
-## Run the Application
-
-**Build the Application**
-
-1. Open the terminal or Package Manager Console in Visual Studio.
-2. Navigate to the project directory.
-3. Run the following command to restore packages and build:
-
-```powershell
-dotnet restore
-dotnet build
-```
-
-**Run the Application**
-
-Execute the following command:
-
-```powershell
-dotnet run
+```json
+{
+ "action": "remove",
+ "keyColumn": "OrderID",
+ "key": 1
+}
```
-**Access the Application**
-
-1. Open a web browser.
-2. Navigate to the URL shown in the terminal output (for example, `http://localhost:5145`).
-3. The PostgreSQL-backed Pivot Table is now running with read and CRUD support. Refer to the screenshot in [Step 3](#step-3-configure-the-pivot-table-with-the-url-adaptor) for the rendered output.
-
-> **URL Reminder:** `Home.razor` uses relative API URLs, so no port change is required. If you replace them with absolute URLs, match the scheme and port shown in `Properties/launchSettings.json`.
-
-
## Troubleshooting
-| Symptom | Likely Cause | Resolution |
-|---------|--------------|------------|
-| Pivot table shows no data | Controller not reachable or API returned an error | Verify the application is running and inspect the browser Network panel. Data is loaded only through the Pivot Table's URL Adaptor; the read endpoint requires a `POST` request and is not meant to be opened directly in the browser address bar. |
-| `405 Method Not Allowed` on read | The `POST /api/Order` action is missing or routed incorrectly | Confirm `OrderController` is decorated with `[ApiController]`, has `[HttpPost]` on `Post`, and `AddControllers()` + `MapControllers()` are present in `Program.cs`. |
-| `Connection refused` or `NpgsqlException` | PostgreSQL is not running or configuration is wrong | Start the PostgreSQL service and confirm the `ConnectionStrings:PostgreSQL` settings and database-user permissions. |
-| `relation "orders" does not exist` | Table not created or wrong schema | Run the SQL script in **Step 1** against `OrderDB`. Confirm the table is in the `public` schema and named `orders` (lowercase). |
-| Insert/Update/Delete does nothing | The edit grid does not send a valid primary key | Confirm `OrderID` is present in the raw-item model and marked with `[Key]`; inspect the request payload for `key` or `value.orderID`. |
-| CRUD changes do not persist | Validation or database command failed | Inspect the API response and server logs; verify required fields, table permissions, and the `public.orders` schema. |
-| CORS errors in browser console | API served on a different origin than the Blazor app | Serve both on the same origin, or enable CORS on the controller for the Blazor app's origin. |
-| Antiforgery validation fails on POST | An antiforgery policy was added but the adaptor does not send a token | Configure the adaptor and server to exchange a request token, or use non-cookie authentication for the API; do not assume Blazor transport supplies the token. |
-| Pivot table aggregates look wrong | `Freight` column type mismatch | Ensure `Freight` is a numeric column in PostgreSQL and `decimal` in the `Order` model so aggregation functions correctly. |
-| Edit dialog shows unexpected columns | Raw-item grid defaults are being used | Configure the supported Pivot Table editing settings for the package version in use; do not rely on `BeginDrillThrough.GridObj` being populated. |
-
-## Complete Implementation
-
-The complete implementation is assembled across the earlier steps:
-
-1. `appsettings.json` and `OrderController.cs` are provided in [Step 3](#step-3-configure-the-connection-string) and [Step 4](#step-4-create-the-controller).
-2. Service registration and license registration are provided in [Step 5](#step-5-register-services-in-programcs).
-3. `Home.razor`, the relative adaptor URLs, the `[Key]` model property, and editing settings are provided in [Pivot Table Step 3](#step-3-configure-the-pivot-table-with-the-url-adaptor).
-
-The sample uses relative API URLs, parameterized Npgsql commands, nullable-column handling, and explicit validation for CRUD requests.
+| Symptom | Likely cause | Resolution |
+|---|---|---|
+| Pivot Table shows no data | The API returned an error or is unreachable | Inspect the browser Network panel and send a `POST` request with `{}` to `/api/Order`. |
+| `405 Method Not Allowed` | The endpoint was tested with `GET` | Use `POST` and confirm `AddControllers()` and `MapControllers()` are present. |
+| `NpgsqlException` or connection refused | PostgreSQL is stopped or the connection string is wrong | Start PostgreSQL and verify the host, port, database, credentials, SSL settings, and role permissions. |
+| `relation "orders" does not exist` | The script ran in the wrong database or schema | Run the table script in `OrderDB` and confirm `public.orders` exists. |
+| `permission denied for table orders` | The application role lacks table privileges | Grant `SELECT`, `INSERT`, `UPDATE`, and `DELETE` on `public.orders`. |
+| Insert fails while reads work | The role lacks identity-sequence privileges | Grant `USAGE` and `SELECT` on sequences in the `public` schema. |
+| Insert or update returns `400` | Required values are missing or a constraint rejected the row | Inspect the response and server log; supply `CustomerName` and `EmployeeID`. |
+| Update or delete returns `404` | The supplied `OrderID` no longer exists | Refresh the Pivot Table and retry with a current record. |
+| Editing sends no usable key | The edit grid did not mark `OrderID` as its primary key | Confirm the shared model has `[Key]` and the `BeginDrillThrough` handler runs. |
+| CORS error | The API and Blazor app are on different origins | Keep the relative URLs or configure a restricted CORS policy for the Blazor origin. |
+| Antiforgery validation fails | A policy requires a token that the adaptor does not send | Configure the client and server to exchange the token, or use an appropriate non-cookie API authentication design. |
+| Aggregates are incorrect | `Freight` has an incompatible type | Keep PostgreSQL `freight` numeric and the .NET property `decimal?`. |
## Complete Sample Repository
@@ -915,14 +645,4 @@ A complete, working sample implementation is available in the [GitHub repository
## Summary
-This guide demonstrates how to:
-
-1. Create a PostgreSQL database with order records using pgAdmin 4.
-2. Create the .NET 10 Blazor Web App and install the Syncfusion and Npgsql packages.
-3. Configure the connection string without committing credentials.
-4. Implement an `OrderController` with read and parameterized CRUD endpoints.
-5. Register Syncfusion Blazor services, the license key, and API controllers in `Program.cs`.
-6. Configure the Pivot Table with relative `SfDataManager` URLs and `Adaptors.UrlAdaptor`.
-7. Run and verify the application using the troubleshooting steps.
-
-The application now provides a complete sample for summarizing and editing PostgreSQL data with a modern Pivot Table interface. The read endpoint is invoked only by the URL Adaptor over `POST` and is not browsable directly in the address bar; implement server-side query processing before using this pattern for large datasets.
\ No newline at end of file
+This guide provides a small-dataset URL Adaptor implementation with parameterized SQL, generated-key handling, validation, logging, and CRUD endpoints. Use a server-side aggregation architecture for production-scale datasets.
diff --git a/blazor/pivot-table/connecting-to-data-source/sqlite-server.md b/blazor/pivot-table/connecting-to-data-source/sqlite-server.md
new file mode 100644
index 0000000000..f87e0e6b1a
--- /dev/null
+++ b/blazor/pivot-table/connecting-to-data-source/sqlite-server.md
@@ -0,0 +1,730 @@
+---
+layout: post
+title: Blazor Pivot Table with SQLite via URL Adaptor | Syncfusion®
+description: Bind a SQLite database to the Blazor Pivot Table through an ASP.NET Core API and the Syncfusion URL Adaptor.
+platform: Blazor
+control: PivotTable
+documentation: ug
+---
+
+# Connect SQLite to a Blazor Pivot Table Using the URL Adaptor
+
+The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) can load and edit SQLite data through an ASP.NET Core API. [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) sends HTTP requests to the API, and the API uses [`Microsoft.Data.Sqlite`](https://www.nuget.org/packages/Microsoft.Data.Sqlite/) to access the SQLite database.
+
+This guide uses same-origin relative API URLs. The sample read action returns the complete `Orders` table and does not apply `DataManagerRequest` operations. Add server-side filtering, sorting, and paging before using this design with large datasets.
+
+## Prerequisites
+
+The sample was tested with the following versions and configuration:
+
+| Software or package | Version | Notes |
+|---|---:|---|
+| .NET SDK | 10.0 | Required to target `net10.0` |
+| Visual Studio | 2026 18.0 or later | Required to target `net10.0`; install the ASP.NET and web development workload. VS Code and the .NET CLI are also supported |
+| SQLite tools | 3.x or later | The `sqlite3` command-line shell or a GUI tool is needed to create and inspect the database; `Microsoft.Data.Sqlite` supplies the runtime provider and native engine |
+| Syncfusion.Blazor.PivotTable | `{{site.blazorversion}}` (31.2.10 or later) | [.NET 10 support starts with 31.2.10](https://blazor.syncfusion.com/documentation/common/how-to/version-compatibility); keep all Syncfusion packages on the same version |
+| Syncfusion.Blazor.Themes | `{{site.blazorversion}}` (31.2.10 or later) | Provides the component theme |
+| Microsoft.Data.Sqlite | 10.0.10 | SQLite ADO.NET provider aligned with .NET 10 |
+
+The application uses the Blazor Web App template with Interactive Server rendering. Syncfusion packages from NuGet.org require a valid license or trial key; follow the [license-key registration instructions](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application).
+
+## SQLite Database Setup and Application Configuration
+
+### Step 1: Create the Blazor Web App
+
+Create an Interactive Server Blazor Web App:
+
+```powershell
+dotnet new blazor -n PivotTableSQLite -f net10.0 -int Server -ai
+cd PivotTableSQLite
+```
+
+In Visual Studio, the equivalent choices are **Blazor Web App**, **.NET 10**, **Interactive render mode: Server**, and **Interactivity location: Global**.
+
+### Step 2: Create the SQLite Database
+
+SQLite stores an entire database in a single file, so there is no server to install or configure. Download the SQLite tools from the [SQLite download page](https://www.sqlite.org/download.html) and use either the `sqlite3` command-line shell or a GUI client such as DB Browser for SQLite.
+
+Create the database file `Orders.db` and open it:
+
+```powershell
+sqlite3 Orders.db
+```
+
+Run the following script to create the `Orders` table and seed it with sample rows:
+
+```sql
+CREATE TABLE IF NOT EXISTS Orders
+(
+ OrderID INTEGER PRIMARY KEY AUTOINCREMENT,
+ CustomerName TEXT NOT NULL,
+ EmployeeID INTEGER NOT NULL,
+ ShipCity TEXT NULL,
+ Freight REAL NULL
+);
+
+INSERT INTO Orders (CustomerName, EmployeeID, ShipCity, Freight)
+SELECT * FROM (VALUES
+ ('Toms', 1, 'New York', 35.30),
+ ('Ravi', 2, 'London', 80.20),
+ ('Sven', 1, 'Berlin', 52.10),
+ ('Sara', 3, 'Madrid', 18.40),
+ ('Paul', 2, 'Tokyo', 64.75)
+) AS seed
+WHERE NOT EXISTS (SELECT 1 FROM Orders);
+```
+
+Verify the inserted data:
+
+```sql
+SELECT OrderID, CustomerName, EmployeeID, ShipCity, Freight
+FROM Orders
+ORDER BY OrderID;
+
+.quit
+```
+
+Expected output:
+
+| OrderID | CustomerName | EmployeeID | ShipCity | Freight |
+|---:|---|---:|---|---:|
+| 1 | Toms | 1 | New York | 35.30 |
+| 2 | Ravi | 2 | London | 80.20 |
+| 3 | Sven | 1 | Berlin | 52.10 |
+| 4 | Sara | 3 | Madrid | 18.40 |
+| 5 | Paul | 2 | Tokyo | 64.75 |
+
+Copy the generated `Orders.db` file to a location the ASP.NET Core application can read, and use that path in the connection string configured in the next steps.
+
+### Step 3: Install the Required NuGet Packages
+
+Run these commands in the `PivotTableSQLite` project directory:
+
+```powershell
+dotnet add package Syncfusion.Blazor.PivotTable --version {{site.blazorversion}}
+dotnet add package Syncfusion.Blazor.Themes --version {{site.blazorversion}}
+dotnet add package Microsoft.Data.Sqlite --version 10.0.10
+```
+
+The project file should contain:
+
+```xml
+
+
+
+
+
+```
+
+### Step 4: Configure the Connection String
+
+Store the SQLite connection string in `appsettings.json`:
+
+```json
+{
+ "ConnectionStrings": {
+ "SQLite": "Data Source="
+ },
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*"
+}
+```
+
+> **Note:** Replace `` with the actual SQLite database file name or the full path to the database file used in your environment. For example, `Data Source=Orders.db` for a file in the application working directory, or `Data Source=C:/Data/Orders.db` for an absolute path.
+
+A relative `Data Source` path is resolved from the application's process working directory. Use an absolute path in deployments where the working directory can differ from the project directory.
+
+### Step 5: Create the API Controller
+
+Create a `Controllers` folder at the project root, and then create `Controllers/OrderController.cs`. In this sample, the `Order` model and the `CRUDModel` wrapper are defined inside `OrderController.cs` rather than in a separate file. The same `Order` shape is also declared in the Pivot Table page (`Home.razor`) so the component can strongly type its data source. Keeping the model close to the code that uses it makes the contract between the controller and the page easy to follow.
+
+```csharp
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Data.Sqlite;
+using Syncfusion.Blazor.Data;
+using Syncfusion.Blazor;
+
+namespace PivotTableSQLite.Controllers
+{
+ [ApiController]
+ [Route("api/[controller]")]
+ public class OrderController : ControllerBase
+ {
+ private readonly string connectionString;
+
+ public OrderController(IConfiguration configuration)
+ {
+ connectionString = configuration.GetConnectionString("SQLite")
+ ?? throw new InvalidOperationException(
+ "The SQLite connection string is not configured.");
+ }
+
+ [HttpPost]
+ public object Post([FromBody] DataManagerRequest request)
+ {
+ _ = request;
+
+ List dataSource = GetOrderData();
+
+ return new
+ {
+ result = dataSource,
+ count = dataSource.Count
+ };
+ }
+
+ private List GetOrderData()
+ {
+ List orders = new();
+
+ const string query =
+ @"SELECT
+ OrderID,
+ CustomerName,
+ EmployeeID,
+ Freight,
+ ShipCity
+ FROM Orders
+ ORDER BY OrderID";
+
+ using SqliteConnection connection = new(connectionString);
+ connection.Open();
+
+ using SqliteCommand command = new(query, connection);
+ using SqliteDataReader reader = command.ExecuteReader();
+
+ while (reader.Read())
+ {
+ orders.Add(new Order
+ {
+ OrderID = reader.IsDBNull(0) ? null : reader.GetInt32(0),
+ CustomerName = reader.IsDBNull(1) ? null : reader.GetString(1),
+ EmployeeID = reader.IsDBNull(2) ? null : reader.GetInt32(2),
+ Freight = reader.IsDBNull(3) ? null : Convert.ToDecimal(reader.GetDouble(3)),
+ ShipCity = reader.IsDBNull(4) ? null : reader.GetString(4)
+ });
+ }
+
+ return orders;
+ }
+
+ [HttpPost("Insert")]
+ public IActionResult Insert([FromBody] CRUDModel value)
+ {
+ if (value.Value is not Order order
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "CustomerName and EmployeeID are required.");
+ }
+
+ const string query =
+ @"INSERT INTO Orders
+ (CustomerName, EmployeeID, Freight, ShipCity)
+ VALUES
+ (@CustomerName, @EmployeeID, @Freight, @ShipCity)";
+
+ using SqliteConnection connection = new(connectionString);
+ connection.Open();
+
+ using SqliteCommand command = new(query, connection);
+
+ command.Parameters.AddWithValue(
+ "@CustomerName",
+ order.CustomerName);
+
+ command.Parameters.AddWithValue(
+ "@EmployeeID",
+ order.EmployeeID.Value);
+
+ command.Parameters.AddWithValue(
+ "@Freight",
+ order.Freight.HasValue
+ ? order.Freight.Value
+ : DBNull.Value);
+
+ command.Parameters.AddWithValue(
+ "@ShipCity",
+ order.ShipCity ?? (object)DBNull.Value);
+
+ command.ExecuteNonQuery();
+
+ using SqliteCommand keyCommand = new(
+ "SELECT last_insert_rowid();",
+ connection);
+
+ order.OrderID = Convert.ToInt32(keyCommand.ExecuteScalar());
+
+ return Ok(order);
+ }
+
+ [HttpPost("Update")]
+ public IActionResult Update([FromBody] CRUDModel value)
+ {
+ if (value.Value is not Order order
+ || !order.OrderID.HasValue
+ || string.IsNullOrWhiteSpace(order.CustomerName)
+ || !order.EmployeeID.HasValue)
+ {
+ return BadRequest(
+ "OrderID, CustomerName and EmployeeID are required.");
+ }
+
+ const string query =
+ @"UPDATE Orders
+ SET CustomerName = @CustomerName,
+ EmployeeID = @EmployeeID,
+ Freight = @Freight,
+ ShipCity = @ShipCity
+ WHERE OrderID = @OrderID";
+
+ using SqliteConnection connection = new(connectionString);
+ connection.Open();
+
+ using SqliteCommand command = new(query, connection);
+
+ command.Parameters.AddWithValue(
+ "@CustomerName",
+ order.CustomerName);
+
+ command.Parameters.AddWithValue(
+ "@EmployeeID",
+ order.EmployeeID.Value);
+
+ command.Parameters.AddWithValue(
+ "@Freight",
+ order.Freight.HasValue
+ ? order.Freight.Value
+ : DBNull.Value);
+
+ command.Parameters.AddWithValue(
+ "@ShipCity",
+ order.ShipCity ?? (object)DBNull.Value);
+
+ command.Parameters.AddWithValue(
+ "@OrderID",
+ order.OrderID.Value);
+
+ int rowsAffected = command.ExecuteNonQuery();
+
+ return rowsAffected == 0
+ ? NotFound()
+ : Ok(order);
+ }
+
+ [HttpPost("Delete")]
+ public IActionResult Delete([FromBody] CRUDModel value)
+ {
+ if (!int.TryParse(value.Key?.ToString(), out int orderId))
+ {
+ return BadRequest(
+ "A numeric order key is required.");
+ }
+
+ const string query =
+ @"DELETE FROM Orders
+ WHERE OrderID = @OrderID";
+
+ using SqliteConnection connection = new(connectionString);
+ connection.Open();
+
+ using SqliteCommand command = new(query, connection);
+
+ command.Parameters.AddWithValue(
+ "@OrderID",
+ orderId);
+
+ int rowsAffected = command.ExecuteNonQuery();
+
+ return rowsAffected == 0
+ ? NotFound()
+ : NoContent();
+ }
+
+ public class Order
+ {
+ [Key]
+ public int? OrderID { get; set; }
+
+ public string? CustomerName { get; set; }
+
+ public int? EmployeeID { get; set; }
+
+ public decimal? Freight { get; set; }
+
+ public string? ShipCity { get; set; }
+ }
+
+ public class CRUDModel where T : class
+ {
+ [JsonPropertyName("action")]
+ public string? Action { get; set; }
+
+ [JsonPropertyName("keyColumn")]
+ public string? KeyColumn { get; set; }
+
+ [JsonPropertyName("key")]
+ public object? Key { get; set; }
+
+ [JsonPropertyName("value")]
+ public T? Value { get; set; }
+
+ [JsonPropertyName("added")]
+ public List? Added { get; set; }
+
+ [JsonPropertyName("changed")]
+ public List? Changed { get; set; }
+
+ [JsonPropertyName("deleted")]
+ public List? Deleted { get; set; }
+
+ [JsonPropertyName("params")]
+ public IDictionary? Params { get; set; }
+ }
+
+ }
+}
+```
+
+The controller exposes the read, insert, update, and delete endpoints described in the [API Contract](#api-contract). The exception middleware configured in the next step logs unhandled `SqliteException` instances and returns generic problem responses without exposing database paths or SQL details.
+
+### Step 6: Configure Program.cs
+
+Replace `Program.cs` with:
+
+```csharp
+using PivotTableSQLite.Components;
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Register the Syncfusion license before builder.Build().
+// Syncfusion packages require a valid license or trial key.
+// Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(
+// "YOUR LICENSE KEY");
+
+builder.Services.AddSyncfusionBlazor();
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+ .AddInteractiveServerComponents();
+
+builder.Services.AddControllers();
+builder.Services.AddProblemDetails();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+ app.UseHsts();
+}
+
+app.UseExceptionHandler();
+app.UseHttpsRedirection();
+
+app.MapControllers();
+
+app.UseAntiforgery();
+
+app.MapStaticAssets();
+
+app.MapRazorComponents()
+ .AddInteractiveServerRenderMode();
+
+app.Run();
+```
+
+Key registration points:
+
+- `AddSyncfusionBlazor()` registers the Syncfusion Blazor services required by the Pivot Table.
+- `AddRazorComponents().AddInteractiveServerComponents()` enables Interactive Server rendering.
+- `AddControllers()` registers the API controllers, including `OrderController`.
+- `AddProblemDetails()` and `UseExceptionHandler()` log unhandled failures and return generic error responses.
+- `MapControllers()` routes requests to the API endpoints.
+- `MapStaticAssets()` maps the application's static web assets, including assets supplied by referenced component packages.
+
+> **Note:** Remove the comment markers and fill in your Syncfusion license or trial key in `Program.cs` before running the application. Follow the [license-key registration instructions](https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application) for details.
+
+### Step 7: Configure the Pivot Table
+
+Add these namespaces to `Components/_Imports.razor`:
+
+```cshtml
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.PivotView
+```
+
+In `Components/App.razor`, add the Syncfusion stylesheet inside ``:
+
+```html
+
+```
+
+Add the Syncfusion script immediately before ``, after the template's existing `_framework/blazor.web.js` reference:
+
+```html
+
+```
+
+Do not add a second `_framework/blazor.web.js` reference if the template already contains one. The completed `App.razor` should look like:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Replace `Components/Pages/Home.razor` with the following markup. The `SfDataManager` URLs use same-origin relative paths (`/api/Order`, `/api/Order/Insert`, etc.) so they resolve against whatever port the application is launched on, avoiding hard-coded development ports and HTTP-to-HTTPS mixed-content failures:
+
+```cshtml
+@page "/"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private void BeginDrillThrough(BeginDrillThroughEventArgs args)
+ {
+ // Identify the key used by URL Adaptor update and delete requests.
+ for (int i = 0; i < args.GridObj.Columns.Count; i++)
+ {
+ if (args.GridObj.Columns[i].Field == "OrderID")
+ {
+ args.GridObj.Columns[i].IsPrimaryKey = true;
+ }
+ else
+ {
+ args.GridObj.Columns[i].Visible = true;
+ }
+ }
+ }
+
+ public class Order
+ {
+ public int? OrderID { get; set; }
+ public string? CustomerName { get; set; }
+ public int? EmployeeID { get; set; }
+ public decimal? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ }
+}
+```
+
+The `BeginDrillThrough` event is used to mark `OrderID` as the primary key on the drill-through grid. This tells the DataManager which column uniquely identifies each record so that insert, update, and delete requests carry the correct key. Without this configuration, the write operations cannot target the intended row.
+
+## API Contract
+
+| Method | Route | Payload | Success response |
+|---|---|---|---|
+| `POST` | `/api/Order` | `DataManagerRequest` | `200` with `{ result, count }` |
+| `POST` | `/api/Order/Insert` | `CRUDModel` | `200` with the inserted record |
+| `POST` | `/api/Order/Update` | `CRUDModel` | `200` with the updated record |
+| `POST` | `/api/Order/Delete` | `CRUDModel` | `204` with no body |
+
+The API uses action-oriented routes because they match the URL Adaptor's `InsertUrl`, `UpdateUrl`, and `RemoveUrl` contract.
+
+For write requests, `action` identifies the operation, `keyColumn` names the primary-key field, `key` carries the value used by delete operations, and `value` carries the inserted or updated record. The Syncfusion model also supports `added`, `changed`, and `deleted` collections for batch editing, `params` for additional values, and `table` for an optional table name; this sample uses normal editing and does not consume those optional properties.
+
+| Route | Failure response |
+|---|---|
+| `/api/Order` | `500` when the database cannot be queried |
+| `/api/Order/Insert` | `400` when required fields are missing; `500` on a database failure |
+| `/api/Order/Update` | `400` when required fields are missing; `404` when the key does not exist; `500` on a database failure |
+| `/api/Order/Delete` | `400` when the key is not numeric; `404` when the key does not exist; `500` on a database failure |
+
+Example read response:
+
+```json
+{
+ "result": [
+ {
+ "orderID": 1,
+ "customerName": "Toms",
+ "employeeID": 1,
+ "freight": 35.30,
+ "shipCity": "New York"
+ },
+ {
+ "orderID": 2,
+ "customerName": "Ravi",
+ "employeeID": 2,
+ "freight": 80.20,
+ "shipCity": "London"
+ },
+ {
+ "orderID": 3,
+ "customerName": "Sven",
+ "employeeID": 1,
+ "freight": 52.10,
+ "shipCity": "Berlin"
+ },
+ {
+ "orderID": 4,
+ "customerName": "Sara",
+ "employeeID": 3,
+ "freight": 18.40,
+ "shipCity": "Madrid"
+ },
+ {
+ "orderID": 5,
+ "customerName": "Paul",
+ "employeeID": 2,
+ "freight": 64.75,
+ "shipCity": "Tokyo"
+ }
+ ],
+ "count": 5
+}
+```
+
+Example insert request:
+
+```json
+{
+ "action": "insert",
+ "keyColumn": "orderID",
+ "value": {
+ "customerName": "Mei Chen",
+ "employeeID": 4,
+ "shipCity": "Sydney",
+ "freight": 142.50
+ }
+}
+```
+
+The insert response returns the persisted record with the generated `orderID` populated.
+
+Example update request:
+
+```json
+{
+ "action": "update",
+ "keyColumn": "orderID",
+ "value": {
+ "orderID": 3,
+ "customerName": "Sven",
+ "employeeID": 1,
+ "shipCity": "Hamburg",
+ "freight": 60.00
+ }
+}
+```
+
+Example delete request:
+
+```json
+{
+ "action": "remove",
+ "keyColumn": "orderID",
+ "key": 5
+}
+```
+
+## Run and Verify the Application
+
+Build and run the project:
+
+```powershell
+dotnet build
+dotnet run
+```
+
+Open the URL shown in the terminal. Verify the following:
+
+1. The Pivot Table displays `CustomerName` as rows, `EmployeeID` as columns, and the sum of `Freight` as values.
+2. The browser Network panel shows `POST /api/Order` returning `200` with `result` and `count`.
+3. Double-click a value (summary) cell to open its raw-record editor.
+4. Add a record and confirm that `POST /api/Order/Insert` returns the generated, nonzero `orderID`.
+5. Edit and delete records, and confirm the corresponding API requests succeed with that key.
+6. Query the `Orders` table (using your SQLite client) to confirm the changes were persisted locally. For deployed apps with no direct database access, re-open the drill-through editor and confirm that the rows reflect the changes.
+
+## Production Considerations
+
+SQLite is ideal for local development, embedded scenarios, and small-to-medium workloads. Before using this design in production, consider the following:
+
+- **Concurrency:** SQLite allows multiple readers but serializes writers. For write-heavy workloads, switch to a client-server database such as SQL Server or PostgreSQL.
+- **Server-side data operations:** The sample returns the entire `Orders` table. Apply `DataManagerRequest` `where`, `sorted`, `skip`, and `take` parameters on the server before using this design with large datasets.
+- **Connection string:** Store the connection string through the hosting environment or a secrets manager rather than committing production paths to source control.
+- **File location:** Place the database file on durable storage with appropriate backup and recovery procedures. SQLite keeps the entire database in a single file.
+- **Authentication and authorization:** Protect the write endpoints with the authentication and authorization mechanism used by your application.
+- **Antiforgery:** If cookie-authenticated API actions require antiforgery validation, configure `SfDataManager` to send the request token expected by the server.
+- **WAL mode:** For better concurrent read/write performance, consider enabling Write-Ahead Logging (`PRAGMA journal_mode=WAL;`) on the database.
+- **Deployment:** For cross-origin hosting, configure an explicit CORS policy that allows only the Blazor application's origin.
+
+## Troubleshooting
+
+| Symptom | Resolution |
+|---|---|
+| Pivot Table shows no data | Inspect `POST /api/Order` in the browser Network panel and check the server log. A `GET` request from the browser address bar returns `405`. |
+| `405 Method Not Allowed` | Confirm `[HttpPost]`, `AddControllers()`, and `MapControllers()` are present. |
+| `No such table: Orders` | Create the `Orders` table in the database file pointed to by the connection string and confirm the connection string selects that file. |
+| `The SQLite connection string is not configured.` | Add a `ConnectionStrings:SQLite` entry to `appsettings.json` and restart the application. |
+| `Unable to open database file` | Confirm the database file path is valid and that the application process has read/write permission on the file and its folder. |
+| The database file is locked | Ensure no other process holds an exclusive lock, and consider enabling WAL mode for concurrent access. |
+| CRUD returns `400` | Inspect the request JSON and confirm required fields (`CustomerName`, `EmployeeID`) and a numeric key are present. |
+| CRUD returns `404` | Confirm that the supplied `OrderID` exists and that `OrderID` is marked as the primary key in the `BeginDrillThrough` event handler. |
+| CRUD returns `500` | Check the server log and verify the table schema, connection string, and file permissions. |
+| Browser reports mixed content or a redirect failure | Confirm `Home.razor` uses same-origin relative URLs (for example `/api/Order`) rather than hard-coded HTTP URLs. |
+| Cross-origin request is blocked | Prefer same-origin relative URLs; otherwise configure `AddCors` and `UseCors` for the exact Blazor application origin. |
+| Antiforgery validation fails | Configure the adaptor to send the expected request token, or use an appropriate non-cookie API authentication scheme. |
+| Large datasets are slow | Process `DataManagerRequest` operations on the server instead of returning the entire table. |
+
+For current component behavior, see the [Pivot Table editing documentation](https://blazor.syncfusion.com/documentation/pivot-table/editing) and [Pivot Table data-binding documentation](https://blazor.syncfusion.com/documentation/pivot-table/data-binding).
+
+## Complete Sample Repository
+
+A complete, working sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/syncfusion-blazor-pivot-table-sqlite-database-binding-sample/tree/master).
diff --git a/blazor/pivot-table/images/blazor-pivot-table-Dapper-MSSQL.webp b/blazor/pivot-table/images/blazor-pivot-table-Dapper-MSSQL.webp
new file mode 100644
index 0000000000..b8b44fb578
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-Dapper-MSSQL.webp differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-EFCore-MSSQL.webp b/blazor/pivot-table/images/blazor-pivot-table-EFCore-MSSQL.webp
new file mode 100644
index 0000000000..bbec45841c
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-EFCore-MSSQL.webp differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-MSSQL.webp b/blazor/pivot-table/images/blazor-pivot-table-MSSQL.webp
new file mode 100644
index 0000000000..d56b6880a3
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-MSSQL.webp differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-MySQL-FlowDiagram.webp b/blazor/pivot-table/images/blazor-pivot-table-MySQL-FlowDiagram.webp
new file mode 100644
index 0000000000..082c53b605
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-MySQL-FlowDiagram.webp differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-MySQL.webp b/blazor/pivot-table/images/blazor-pivot-table-MySQL.webp
new file mode 100644
index 0000000000..7f60a7aea8
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-MySQL.webp differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-FlowDiagram.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-FlowDiagram.webp
deleted file mode 100644
index 4b2d64785d..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-FlowDiagram.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-crud-pgadmintool.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-crud-pgadmintool.webp
deleted file mode 100644
index 3726278d84..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-crud-pgadmintool.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-delete.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-delete.webp
deleted file mode 100644
index 0a6bac5a16..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-delete.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-insert.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-insert.webp
deleted file mode 100644
index c032ea4c6e..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-insert.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-update.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-update.webp
deleted file mode 100644
index 5eb11091ca..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL-update.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL.webp b/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL.webp
deleted file mode 100644
index fd308e51c1..0000000000
Binary files a/blazor/pivot-table/images/blazor-pivot-table-PostgreSQL.webp and /dev/null differ
diff --git a/blazor/pivot-table/images/blazor-pivot-table-sqlite.webp b/blazor/pivot-table/images/blazor-pivot-table-sqlite.webp
new file mode 100644
index 0000000000..62612dbda6
Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivot-table-sqlite.webp differ
diff --git a/blazor/progress-bar/getting-started-webapp.md b/blazor/progress-bar/getting-started-webapp.md
index 70e8d23c1a..dd01877b98 100644
--- a/blazor/progress-bar/getting-started-webapp.md
+++ b/blazor/progress-bar/getting-started-webapp.md
@@ -239,4 +239,4 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBdjwtiTGZpYwVi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
-N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
+N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear?theme=fluent2) that shows you how to render and configure the ProgressBar.
diff --git a/blazor/progress-bar/getting-started-with-server-app.md b/blazor/progress-bar/getting-started-with-server-app.md
index d3a3447228..5f7adb78fa 100644
--- a/blazor/progress-bar/getting-started-with-server-app.md
+++ b/blazor/progress-bar/getting-started-with-server-app.md
@@ -233,4 +233,4 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRDmtMpmSCgUuy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
-N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
+N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear?theme=fluent2) that shows you how to render and configure the ProgressBar.
diff --git a/blazor/progress-bar/getting-started.md b/blazor/progress-bar/getting-started.md
index f33818f567..c207903091 100644
--- a/blazor/progress-bar/getting-started.md
+++ b/blazor/progress-bar/getting-started.md
@@ -227,4 +227,4 @@ Change the type of the ProgressBar by using the [Type](https://help.syncfusion.c
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLdZQNizGfKVGOC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular ProgressBar](images/blazor-circular-progressbar.webp)" %}
-N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear) that shows you how to render and configure the ProgressBar.
+N> You can also explore our [Blazor ProgressBar example](https://blazor.syncfusion.com/demos/progress-bar/linear?theme=fluent2) that shows you how to render and configure the ProgressBar.
diff --git a/blazor/query-builder/clone-group-rule.md b/blazor/query-builder/clone-group-rule.md
index 135d99ae91..8d2c1401d8 100644
--- a/blazor/query-builder/clone-group-rule.md
+++ b/blazor/query-builder/clone-group-rule.md
@@ -101,4 +101,4 @@ Cloning is available via the user interface and programmatically:
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBdXwXuLcDhpRbs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Cloning a group and rule in Blazor Query Builder](./images/clone-group-rule.webp)" %}
-N> Ensure that the IDs passed to `CloneGroup` and `CloneRule` refer to existing items in the current model. The cloning buttons can be shown or hidden via `QueryBuilderShowButtons`. You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to learn how to render and configure the Query Builder.
\ No newline at end of file
+N> Ensure that the IDs passed to `CloneGroup` and `CloneRule` refer to existing items in the current model. The cloning buttons can be shown or hidden via `QueryBuilderShowButtons`. You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to learn how to render and configure the Query Builder.
\ No newline at end of file
diff --git a/blazor/query-builder/columns-binding.md b/blazor/query-builder/columns-binding.md
index 662471fe99..96f95a3e1e 100644
--- a/blazor/query-builder/columns-binding.md
+++ b/blazor/query-builder/columns-binding.md
@@ -9,13 +9,13 @@ documentation: ug
# Columns in Blazor QueryBuilder Component
-Column definitions provide the schema used by the Query Builder’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource). They determine how field values are rendered and how users create or delete conditions and groups. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is required to map data source fields to Query Builder columns.
+Column definitions provide the schema used by the Query Builder’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource). They determine how field values are rendered and how users create or delete conditions and groups. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumns.html) is required to map data source fields to Query Builder columns.
N> If the column field is not present in the data source, the column renders with empty values.
## Auto generation
-[Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the data source when the `Columns` declaration is empty or not provided at initialization. In this case, all fields in the `DataSource` are bound as Query Builder columns.
+[Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumns.html) are automatically generated from the data source when the `Columns` declaration is empty or not provided at initialization. In this case, all fields in the `DataSource` are bound as Query Builder columns.
N> When columns are auto-generated, the column type is inferred from the first record of the data source.
@@ -56,7 +56,7 @@ N> If both the field and label are not defined for a column, it renders with `em
## Operators
-Define the allowed operators for a column in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) collection. Custom operator sets can be configured using the column’s [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html). The following built-in operators and their supported data types are available:
+Define the allowed operators for a column in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumns.html) collection. Custom operator sets can be configured using the column’s [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html). The following built-in operators and their supported data types are available:
| Operators | Description | Supported Types |
| ------------ | ----------------------- | ------------------ |
@@ -114,7 +114,7 @@ N> By default, the `Step` value is 1.
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVnZctaVcTRZYhr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor QueryBuilder Step](./images/blazor-querybuilder-step.webp)" %}
-N> You can also explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder.
+N> You can also explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to learn how to render and configure the Query Builder.
## Format
@@ -159,11 +159,11 @@ In the following sample, the date field is formatted as `MM-yyyy-dd` and the num
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBntwZaLQxlXWnO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor QueryBuilder Format](./images/blazor-querybuilder-format.webp)" %}
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
+N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
## Validations
-Validation enables checking of rule inputs and displays errors for invalid fields. To enable validation, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to `true`. After enabling, fields are validated based on the configured rules and column settings.
+Validation enables checking of rule inputs and displays errors for invalid fields. To enable validation, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AllowValidation) to `true`. After enabling, fields are validated based on the configured rules and column settings.
N> You can set `Min` and `Max` values for numeric fields using `QueryBuilderColumnValidation`.
diff --git a/blazor/query-builder/data-binding.md b/blazor/query-builder/data-binding.md
index 481dd4c281..5aaaac7f2b 100644
--- a/blazor/query-builder/data-binding.md
+++ b/blazor/query-builder/data-binding.md
@@ -251,4 +251,4 @@ Complex data binding allows you to work with nested objects and subfields. Bind
-N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the Query Builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the Query Builder.
\ No newline at end of file
diff --git a/blazor/query-builder/drag-and-drop.md b/blazor/query-builder/drag-and-drop.md
index d42adbaea9..442d5bfeb4 100644
--- a/blazor/query-builder/drag-and-drop.md
+++ b/blazor/query-builder/drag-and-drop.md
@@ -12,9 +12,9 @@ documentation: ug
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports drag-and-drop reordering of rules and groups for a more intuitive query-building experience. Enable this per instance by setting the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AllowDragAndDrop) property to `true` (default is `false`). Rules and groups can be dragged within the same group or across groups; items retain their type (a rule cannot be dropped as a group and vice versa).
Drag-and-drop events provide hooks to monitor and customize behavior:
-- [`DragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDragStart.html): Fires when a drag begins (access the source item and cancel if needed).
+- [`DragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderEvents-1.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderEvents_1_RuleDragStarting): Fires when a drag begins (access the source item and cancel if needed).
- [`Drag`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrag.html): Fires during dragging (track current target and position).
-- [`Drop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrop.html): Fires when the item is dropped (determine target group and insert index, or cancel to enforce business rules).
+- [`Drop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderEvents-1.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderEvents_1_RuleDropped): Fires when the item is dropped (determine target group and insert index, or cancel to enforce business rules).
Touch input is supported on mobile and tablet devices. For accessibility, consider offering parallel UI actions (such as add/remove buttons) for users who rely on keyboard navigation.
@@ -69,4 +69,4 @@ Touch input is supported on mobile and tablet devices. For accessibility, consid
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVntmtEVPNqOzjT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Dragging a rule to reorder within a group in the Blazor Query Builder](./images/drag-and-drop.webp)" %}
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
+N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/filtering.md b/blazor/query-builder/filtering.md
index 811cef6f1d..a17d6fd4c5 100644
--- a/blazor/query-builder/filtering.md
+++ b/blazor/query-builder/filtering.md
@@ -101,4 +101,4 @@ Creation and deletion can be done through the UI or programmatically.
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrdZwXuBFsbVQDk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Filtering in Blazor Query Builder](./images/blazor-querybuilder-filtering.webp)" %}
-N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/how-to/change-display-mode.md b/blazor/query-builder/how-to/change-display-mode.md
index 076aaac3c1..8cfd39acd5 100644
--- a/blazor/query-builder/how-to/change-display-mode.md
+++ b/blazor/query-builder/how-to/change-display-mode.md
@@ -9,7 +9,7 @@ documentation: ug
# Change Display Mode in Blazor QueryBuilder Component
-Query Builder can render in a horizontal or vertical layout. Configure the layout by setting the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DisplayMode) property.
+Query Builder can render in a horizontal or vertical layout. Configure the layout by setting the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DisplayMode) property.
```cshtml
@using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/how-to/restrict-group.md b/blazor/query-builder/how-to/restrict-group.md
index 6cc2faa994..5415839801 100644
--- a/blazor/query-builder/how-to/restrict-group.md
+++ b/blazor/query-builder/how-to/restrict-group.md
@@ -9,7 +9,7 @@ documentation: ug
# Restrict the Groups in Blazor QueryBuilder Component
-Limit how many condition groups users can create in the Query Builder by setting the [`MaxGroupCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_MaxGroupCount) property.
+Limit how many condition groups users can create in the Query Builder by setting the [`MaxGroupCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_MaxGroupCount) property.
N> By default, `MaxGroupCount` is set to 5.
diff --git a/blazor/query-builder/how-to/right-to-left.md b/blazor/query-builder/how-to/right-to-left.md
index f68428c76e..e9d3b503bd 100644
--- a/blazor/query-builder/how-to/right-to-left.md
+++ b/blazor/query-builder/how-to/right-to-left.md
@@ -9,7 +9,7 @@ documentation: ug
# Right to Left in Blazor QueryBuilder Component
-Right-to-left (RTL) support mirrors the text direction and layout of the Query Builder for languages that read right to left, improving usability and accessibility for Arabic, Persian (Farsi), Urdu, Hebrew, and similar locales. To enable RTL for a Query Builder instance, set the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_EnableRtl) property to `true`.
+Right-to-left (RTL) support mirrors the text direction and layout of the Query Builder for languages that read right to left, improving usability and accessibility for Arabic, Persian (Farsi), Urdu, Hebrew, and similar locales. To enable RTL for a Query Builder instance, set the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableRtl) property to `true`.
```cshtml
@using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/how-to/sort-the-columns.md b/blazor/query-builder/how-to/sort-the-columns.md
index c6b82dc59c..ce52212ae9 100644
--- a/blazor/query-builder/how-to/sort-the-columns.md
+++ b/blazor/query-builder/how-to/sort-the-columns.md
@@ -9,7 +9,7 @@ documentation: ug
# Sort the Columns in Blazor QueryBuilder Component
-Sort the field list shown in the Query Builder’s field (column) dropdown to improve in large schemas. Set the [`SortDirection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_SortDirection) property to `SortDirection.Ascending` or `SortDirection.Descending` to control the order. Sorting is applied per component instance and is based on the displayed field labels.
+Sort the field list shown in the Query Builder’s field (column) dropdown to improve in large schemas. Set the [`SortDirection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SortDirection) property to `SortDirection.Ascending` or `SortDirection.Descending` to control the order. Sorting is applied per component instance and is based on the displayed field labels.
```cshtml
@using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/import-export.md b/blazor/query-builder/import-export.md
index 60c9f971cb..7ccd28afe4 100644
--- a/blazor/query-builder/import-export.md
+++ b/blazor/query-builder/import-export.md
@@ -565,4 +565,4 @@ Convert the current rules to MongoDB query syntax using [`GetMongoQuery`](https:
```
-N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/localization.md b/blazor/query-builder/localization.md
index 74e83667e3..d7c0e96794 100644
--- a/blazor/query-builder/localization.md
+++ b/blazor/query-builder/localization.md
@@ -11,4 +11,4 @@ documentation: ug
[Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports localization for UI text (such as button labels, operator names, and messages) and honors the application’s culture for date and number formatting. See the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for end-to-end guidance on configuring languages, providing translations, and switching cultures in Blazor apps.
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/lock-group-rule.md b/blazor/query-builder/lock-group-rule.md
index 554914692b..0f624086ed 100644
--- a/blazor/query-builder/lock-group-rule.md
+++ b/blazor/query-builder/lock-group-rule.md
@@ -96,4 +96,4 @@ Locking can be done through the user interface or programmatically.
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
+N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/separate-connector.md b/blazor/query-builder/separate-connector.md
index b68d84c7a5..d5447ec876 100644
--- a/blazor/query-builder/separate-connector.md
+++ b/blazor/query-builder/separate-connector.md
@@ -65,4 +65,4 @@ Use the [`EnableIndividualConditions`](https://help.syncfusion.com/cr/blazor/Syn
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
+N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/templates.md b/blazor/query-builder/templates.md
index 70ba631158..7e9b223d58 100644
--- a/blazor/query-builder/templates.md
+++ b/blazor/query-builder/templates.md
@@ -362,4 +362,4 @@ In the following sample, the DropDownList is used to switch the group condition
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLdXwtYAZGLMfnM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Query Builder with a header template](./images/templates/blazor-querybuilder-header-template.webp)" %}
-N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=fluent2) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/range-slider/accessibility.md b/blazor/range-slider/accessibility.md
index f93bc070c3..f5e7ba9870 100644
--- a/blazor/range-slider/accessibility.md
+++ b/blazor/range-slider/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
# Accessibility in Blazor Range Slider Component
-The [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) is characterized with complete [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#slider) Accessibility support that helps to access by on-screen readers and other assistive technology devices. This component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) is characterized with complete [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#slider) Accessibility support that helps to access by on-screen readers and other assistive technology devices. This component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The Blazor Range Slider component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
@@ -55,7 +55,7 @@ The Blazor Range Slider component follows the [WAI-ARIA](https://www.w3.org/WAI/
## Keyboard interaction
-Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for sliders. Use the following shortcut keys to interact with the slider.
+Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/WAI/ARIA/apg/#slider) described for sliders. Use the following shortcut keys to interact with the slider.
| Windows | Mac | Actions |
| --- | --- | --- |
diff --git a/blazor/sidebar/accessibility.md b/blazor/sidebar/accessibility.md
index c23adcd833..112500fe8e 100644
--- a/blazor/sidebar/accessibility.md
+++ b/blazor/sidebar/accessibility.md
@@ -39,7 +39,7 @@ The accessibility compliance for the Blazor Sidebar component is outlined below.
## WAI-ARIA attributes
-The Blazor Sidebar component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility standards. By default, the Sidebar utilizes the [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role) role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case.
+The Blazor Sidebar component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility standards. By default, the Sidebar utilizes the [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/complementary_role) role, with the option to modify the ARIA role based on provided attributes to the root element, depending on the specific use case.
If there are multiple complementary landmark roles or aside elements in a document, it is important to provide a label for each landmark using the `aria-label` attribute. Alternatively, if the aside has a descriptive title, it can be referenced using the `aria-labelledby` attribute. This label will help assistive technology users quickly understand the purpose of each landmark.
diff --git a/blazor/sidebar/custom-context.md b/blazor/sidebar/custom-context.md
index 368dcdaccd..05d8b7a55b 100644
--- a/blazor/sidebar/custom-context.md
+++ b/blazor/sidebar/custom-context.md
@@ -13,6 +13,8 @@ documentation: ug
By default, [Blazor Sidebar](https://www.syncfusion.com/blazor-components/blazor-sidebar) initializes context to the body element. Using the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Target) property, set context element to initialize Sidebar inside any HTML element apart from the body element.
+The Sidebar expand behavior can be customized using the [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Type) property. It supports the [`Auto`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SidebarType.html#Syncfusion_Blazor_Navigations_SidebarType_Auto), [`Over`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SidebarType.html#Syncfusion_Blazor_Navigations_SidebarType_Over), [`Push`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SidebarType.html#Syncfusion_Blazor_Navigations_SidebarType_Push), and [`Slide`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SidebarType.html#Syncfusion_Blazor_Navigations_SidebarType_Slide) types, with `Auto` as the default type.
+
In the following sample, click the toggle button to expand or collapse the Sidebar.
```cshtml
diff --git a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
index b577b96553..7fb4e69752 100644
--- a/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
+++ b/blazor/sidebar/how-to/sidebar-in-the-dotnet8-application.md
@@ -13,7 +13,10 @@ documentation: ug
Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .NET 8 application. Next, include the `@rendermode InteractiveServer` directive in the `Routes.razor` page of the application. When you specify InteractiveServer as the render mode for the Routes component, you are enabling interactive server-side rendering (SSR) for your entire Blazor application.
-```cshtml
+N> Add the following code in the `MainLayout.razor` file. The `@Body` property is available only in layout components.
+
+{% tabs %}
+{% highlight razor tabtitle="MainLayout.razor" %}
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Inputs
@@ -167,14 +170,15 @@ Integrate the Blazor Sidebar component into the `MainLayout.razor` page of the .
-```
-
-```cshtml
+{% endhighlight %}
+{% endtabs %}
-<--Add it in Router.razor--->
+{% tabs %}
+{% highlight razor tabtitle="Routes.razor" %}
@rendermode InteractiveServer
-```
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/skeleton/effects.md b/blazor/skeleton/effects.md
index 3fad035b36..2bf95185f0 100644
--- a/blazor/skeleton/effects.md
+++ b/blazor/skeleton/effects.md
@@ -9,7 +9,7 @@ documentation: ug
# Shimmer Effect in Blazor Skeleton Component
-You can use the [Effect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html#Syncfusion_Blazor_Notifications_SfSkeleton_Effect) property to change animation effect in the skeleton component. Skeleton supports `Wave`, `Pulse` and `Fade` effects and by default, the `Effect` is set to `Wave` effect.
+You can use the [`Effect`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfSkeleton.html#Syncfusion_Blazor_Notifications_SfSkeleton_Effect) property to change animation effect in the skeleton component. Skeleton supports [`Wave`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ShimmerEffect.html#Syncfusion_Blazor_Notifications_ShimmerEffect_Wave), [`Pulse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ShimmerEffect.html#Syncfusion_Blazor_Notifications_ShimmerEffect_Pulse), [`Fade`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ShimmerEffect.html#Syncfusion_Blazor_Notifications_ShimmerEffect_Fade), and [`None`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ShimmerEffect.html#Syncfusion_Blazor_Notifications_ShimmerEffect_None) effects and by default, the `Effect` is set to `Wave` effect. If no animation effect is required, set the `Effect` property to `None`.
{% tabs %}
{% highlight razor %}
diff --git a/blazor/tabs/accessibility.md b/blazor/tabs/accessibility.md
index 7d61d2ba5c..4446df88e3 100644
--- a/blazor/tabs/accessibility.md
+++ b/blazor/tabs/accessibility.md
@@ -57,7 +57,7 @@ The following list of attributes are added in the Tab.
## Keyboard interaction
-By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#Tabpanel) practices. Once focused on the active Tab element, you can use the following key combination for interacting with the Tab.
+By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#Tabpanel) practices. Once focused on the active Tab element, you can use the following key combination for interacting with the Tab.
| Windows | Mac | Actions |
|--- |--- | --- |
diff --git a/blazor/tabs/content-render-modes.md b/blazor/tabs/content-render-modes.md
index e147916a6a..5df3e0aa0b 100644
--- a/blazor/tabs/content-render-modes.md
+++ b/blazor/tabs/content-render-modes.md
@@ -216,7 +216,7 @@ In the following code example, Calendar and Scheduler have been rendered in firs
You can check out our Blazor demo here - https://blazor.syncfusion.com/demos/
-
Also user guide will be avail here - https://blazor.syncfusion.com/documentation/introduction/
+
Also user guide will be avail here - https://blazor.syncfusion.com/documentation/introduction
diff --git a/blazor/tabs/getting-started-webapp.md b/blazor/tabs/getting-started-webapp.md
index cf71cd2b37..0daada82e8 100644
--- a/blazor/tabs/getting-started-webapp.md
+++ b/blazor/tabs/getting-started-webapp.md
@@ -347,6 +347,5 @@ Selected Tab
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/tabs/getting-started.md b/blazor/tabs/getting-started.md
index 027c86547b..fb6708b4ef 100644
--- a/blazor/tabs/getting-started.md
+++ b/blazor/tabs/getting-started.md
@@ -335,6 +335,5 @@ Selected Tab
## See also
-1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/telemetry.md b/blazor/telemetry.md
new file mode 100644
index 0000000000..fcb2bdd7c4
--- /dev/null
+++ b/blazor/telemetry.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: Telemetry Usage Details in Blazor | Syncfusion
+description: Syncfusion® Telemetry collects anonymous usage data in Blazor to improve product quality, track feature adoption, and guide product planning.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Syncfusion® Telemetry
+
+Syncfusion® Telemetry library collects **anonymous usage data** to improve product quality and user experience. This data helps us better understand product usage, feature adoption, usage trends, and make informed decisions about future product planning.
+
+Telemetry is **enabled by default**. However, you can disable it at any time if required.
+
+N> Telemetry is automatically disabled in production environments. No data is collected from deployed applications or end users.
+
+## Why do we collect telemetry?
+
+We collect telemetry data to:
+
+* Understand feature adoption and usage trends
+* Identify frequently used components and frameworks
+* Prioritize future product planning and investments.
+* Detect compatibility trends across:
+ * .NET versions
+ * Operating systems
+ * Development environments
+
+## What data is collected?
+
+Syncfusion® collects only a limited set of anonymous usage data during development to understand product usage and improve product planning. The following data is collected **only in development mode:**
+
+
+
+
+
Field
+
Description
+
+
+
+
+
Architecture
+
System architecture information (for example, x64 or x86).
+
+
+
Component Name
+
Name of the Syncfusion component being used.
+
+
+
Feature Name
+
Name of the Syncfusion feature being used.
+
+
+
Assembly Name
+
Name of the Syncfusion assembly or package in use.
+
+
+
SDK Name
+
Name of the Syncfusion SDK being used.
+
+
+
SDK Version
+
Version of the SDK shipped with the product.
+
+
+
Framework
+
Target development framework (for example, .NET or .NET Core).
+
+
+
Framework Version
+
Version of the target framework (for example, .NET 10.0.9).
+
+
+
Operating System
+
Operating system used during development.
+
+
+
Session ID
+
Unique session identifier stored as a hashed value.
+
+
+
Machine Name
+
Hashed machine name value that cannot be traced back to the original machine.
+
+
+
Event Name
+
Name of the product event being tracked.
+
+
+
+
+N> No user-generated content (e.g., code, files, or personal data) is collected.
+
+## Where Does Telemetry Apply?
+
+Telemetry applies only to the use of Syncfusion® products during development.
+
+* It is limited to **developer environments**
+* It focuses on **product and feature usage**
+* It does **not apply to production applications**
+* It does **not collect any data from end users**
+
+Telemetry is designed solely to help improve the development experience and product quality, without impacting productions applications or users.
+
+## Telemetry Supported Components
+
+Telemetry is supported across major Syncfusion® Blazor components, including data visualization, data management, scheduling, editing, file management, and diagramming controls. For a complete list of supported components are listed below.
+
+
+
+
+
Component Name
+
Assembly Name
+
+
+
+
+
Grid
+
Syncfusion.Blazor.Grid
+
+
+
TreeGrid
+
Syncfusion.Blazor.TreeGrid
+
+
+
PivotTable
+
Syncfusion.Blazor.PivotTable
+
+
+
Gantt
+
Syncfusion.Blazor.Gantt
+
+
+
Charts, Accumulation Chart
+
Syncfusion.Blazor.Charts
+
+
+
StockChart
+
Syncfusion.Blazor.StockChart
+
+
+
ChartWizard
+
Syncfusion.Blazor.ChartWizard
+
+
+
Maps
+
Syncfusion.Blazor.Maps
+
+
+
FileManager
+
Syncfusion.Blazor.FileManager
+
+
+
Schedule
+
Syncfusion.Blazor.Schedule
+
+
+
RichTextEditor
+
Syncfusion.Blazor.RichTextEditor
+
+
+
BlockEditor
+
Syncfusion.Blazor.BlockEditor
+
+
+
SmartRichTextEditor
+
Syncfusion.Blazor.SmartRichTextEditor
+
+
+
Diagram
+
Syncfusion.Blazor.Diagram
+
+
+
ImageEditor
+
Syncfusion.Blazor.ImageEditor
+
+
+
+
+## Telemetry in Development Mode Only
+
+Telemetry is designed to run only in development environments.
+* Enabled by default during development
+* Automatically disabled in production builds
+* No data is collected from deployed applications
+
+This ensures that telemetry does not affect your application users or production systems
+
+## What information is Not collected?
+
+Syncfusion® does not collect:
+
+* Personal information (name, email address, customer ID, company information)
+* Source code
+* Documents or files
+* Application data
+* User-generated content
+* Business data
+* Prompts or AI conversations
+* Authentication credentials
+* License keys
+* Any information that can directly identify an individual
+
+## How to Disable Telemetry (Opt-out)?
+
+You can disable telemetry in Syncfusion® Blazor products by calling the `Telemetry.Disable()` API before using any Syncfusion® product APIs in your application.
+
+### Step 1: Add the telemetry namespace
+
+Add the following namespace in the `Program.cs` file where your application starts using Syncfusion® components:
+
+{% tabs %}
+
+{% highlight c# tabtitle="C#" %}
+using Syncfusion.Telemetry;
+{% endhighlight %}
+
+{% endtabs %}
+
+
+### Step 2: Disable telemetry at application startup
+
+Call the `Telemetry.Disable()` in `Program.cs` file before initializing or rendering any Syncfusion® component.
+
+{% tabs %}
+
+{% highlight c# tabtitle="C#" %}
+using Syncfusion.Telemetry;
+
+// Disable Syncfusion telemetry data collection.
+Telemetry.Disable();
+// Your Syncfusion product code follows here after disabling the telemetry.
+{% endhighlight %}
+
+{% endtabs %}
+
+Now, the telemetry is disabled, you can continue using Syncfusion® Blazor products based on your application requirements. The Syncfusion® product will work normally, but telemetry data will not be collected or sent.
+
+N> The `Telemetry.Disable()` API should be called, before creating or using any Syncfusion® components.
+
+## FAQs
+
+### Why am I getting "System.Net.Http.HttpRequestException - No such host is known" error?
+
+
+
+
+
Exception
+
+ Why am I getting "System.Net.Http.HttpRequestException - No such host is known" error?
+
+
+
+
+
+
Reason
+
+
This error may occur in the following scenarios:
+
+
Your application does not have internet connectivity.
+
All the exception settings are enabled in your application.
+
+
+ When exception handling is enabled and the application lacks internet access,
+ the telemetry module attempts to send data to Azure Application Insights,
+ which can trigger this exception.
+
+
+
+
+
Solution
+
+
+ To resolve this error and prevent the exception from being thrown,
+ you can #how-to-disable-telemetry-opt-out
+ in your application. This will turn off telemetry data collection entirely.
+
+
+
+
+
diff --git a/blazor/textarea/events.md b/blazor/textarea/events.md
index 73de827ae4..8ffd396dd2 100644
--- a/blazor/textarea/events.md
+++ b/blazor/textarea/events.md
@@ -80,7 +80,7 @@ The TextArea triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusi
## Blur event
-The TextArea triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when focus leaves the component. Use this event to handle actions when focus moves away. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextAreaFocusOutEventArgs.html) argument provides details about the blur event.
+The TextArea triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) event when focus leaves the component. Use this event to handle actions when focus moves away. The [TextAreaFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusOutEventArgs.html) argument provides details about the blur event.
```cshtml
@using Syncfusion.Blazor.Inputs
diff --git a/blazor/textarea/styles-appearance.md b/blazor/textarea/styles-appearance.md
index 1834635bf2..85619528bf 100644
--- a/blazor/textarea/styles-appearance.md
+++ b/blazor/textarea/styles-appearance.md
@@ -1,7 +1,7 @@
---
layout: post
title: Style and appearance in Blazor TextArea Component | Syncfusion®
-description: Learn here all about Style and appearance of the Blazor Textarea component and much more.
+description: Learn how to style and customize the Blazor TextArea component, including sizing, height, colors, and borders.
platform: Blazor
control: TextArea
documentation: ug
@@ -77,7 +77,7 @@ Applying these classes helps align the TextArea with the overall density and vis
## Filled and outline mode
The Filled and Outline modes can be enabled in the TextArea component by adding the `e-outline` or `e-filled` class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_CssClass) API.
-By adding these classes, users can choose between a filled or outline appearance for the TextArea control, aligning with the design aesthetics of their application. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/default-functionalities?theme=material3).
+By adding these classes, users can choose between a filled or outline appearance for the TextArea control, aligning with the design aesthetics of their application. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/default-functionalities?theme=fluent2).
{% tabs %}
{% highlight razor %}
diff --git a/blazor/textbox/how-to/create-custom-component-with-validation.md b/blazor/textbox/how-to/create-custom-component-with-validation.md
index 0bd7cbaa1b..a18592c6d5 100644
--- a/blazor/textbox/how-to/create-custom-component-with-validation.md
+++ b/blazor/textbox/how-to/create-custom-component-with-validation.md
@@ -35,7 +35,7 @@ An `EditForm` with a bound model is declared in the main Razor page. Inside the
{% endhighlight %}
{% endtabs %}
-The `SfTooltip` wraps the `CustomTextBox`, and the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) is set to the `id` of an element within the custom component so that the tooltip anchors to that input. Place `ValidationMessage` inside the [`TooltipTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.TooltipTemplates.html) to display validation errors within the tooltip for the same bound property.
+The `SfTooltip` wraps the `CustomTextBox`, and the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) is set to the `id` of an element within the custom component so that the tooltip anchors to that input. Place `ValidationMessage` inside the [`TooltipTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) to display validation errors within the tooltip for the same bound property.
diff --git a/blazor/textbox/validation.md b/blazor/textbox/validation.md
index 77e62f3715..3f577439a7 100644
--- a/blazor/textbox/validation.md
+++ b/blazor/textbox/validation.md
@@ -49,4 +49,4 @@ TextBox supports to set the attributes directly also.
## See also
-* [Create Edit Forms with FluentValidation and Blazor Components](https://www.syncfusion.com/blogs/post/create-edit-forms-with-fluentvalidation-and-syncfusion-blazor-components.aspx)
\ No newline at end of file
+* [Create Edit Forms with FluentValidation and Blazor Components](https://www.syncfusion.com/blogs/post/create-edit-forms-with-fluentvalidation-and-syncfusion-blazor-components)
\ No newline at end of file
diff --git a/blazor/toast/config.md b/blazor/toast/config.md
index ee1a4b6623..78e26a4775 100644
--- a/blazor/toast/config.md
+++ b/blazor/toast/config.md
@@ -240,7 +240,7 @@ Both the width and height properties allow setting pixels/numbers/percentage. Th
await ToastObj.HideAsync();
this.Width = "100%";
this.Title = "";
- this.ToastContent = "
Take a look at our next generation JavascriptLEARN MORE
";
+ this.ToastContent = "
Take a look at our next generation Javascript LEARN MORE
";
StateHasChanged();
}
else
diff --git a/blazor/toast/getting-started-webapp.md b/blazor/toast/getting-started-webapp.md
index 361150bb26..c3f86d91a8 100644
--- a/blazor/toast/getting-started-webapp.md
+++ b/blazor/toast/getting-started-webapp.md
@@ -263,7 +263,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor)
+* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/how-to-show-or-hide-any-page-using-blazor-toast)
* [Getting Started with Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
* [Getting Started with Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
diff --git a/blazor/toast/getting-started.md b/blazor/toast/getting-started.md
index 3cd95f5af6..baa2abbded 100644
--- a/blazor/toast/getting-started.md
+++ b/blazor/toast/getting-started.md
@@ -251,6 +251,6 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/show-or-hide-toast-from-any-page-using-service-in-blazor)
+* [Show or hide toast from any page using service in Blazor](https://support.syncfusion.com/kb/article/11734/how-to-show-or-hide-any-page-using-blazor-toast)
* [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-dotnet-cli)
* [Getting Started with Blazor Server App in Visual Studio or .NET CLI](../getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
diff --git a/blazor/toggle-switch-button/getting-started-webapp.md b/blazor/toggle-switch-button/getting-started-webapp.md
index aa6fed582a..26fd93ea8c 100644
--- a/blazor/toggle-switch-button/getting-started-webapp.md
+++ b/blazor/toggle-switch-button/getting-started-webapp.md
@@ -255,6 +255,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
diff --git a/blazor/treegrid/columns/column-menu.md b/blazor/treegrid/columns/column-menu.md
index 2932f003ca..64198a53d6 100644
--- a/blazor/treegrid/columns/column-menu.md
+++ b/blazor/treegrid/columns/column-menu.md
@@ -9,7 +9,7 @@ documentation: ug
# Column menu in Blazor Tree Grid Component
-The column menu has options to integrate features like sorting, filtering, and autofit. It shows a menu with the integrated feature when users click on an icon in the column header. To enable column menu, define the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property as true.
+The column menu has options to integrate features like sorting, filtering, and autofit. It shows a menu with the integrated feature when users click on an icon in the column header. To enable column menu, define the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ShowColumnMenu) property as true.
The default items are displayed in the following table.
@@ -87,4 +87,4 @@ public class TreeData
-N> The column menu can be disabled for a particular column by defining the `ShowColumnMenu` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper as false.
+N> The column menu can be disabled for a particular column by defining the `ShowColumnMenu` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper as false.
diff --git a/blazor/treegrid/columns/column-reorder.md b/blazor/treegrid/columns/column-reorder.md
index 086fa7cc7d..57f08b581f 100644
--- a/blazor/treegrid/columns/column-reorder.md
+++ b/blazor/treegrid/columns/column-reorder.md
@@ -75,7 +75,7 @@ public class TreeData
-N> You can disable reordering a particular column by setting the `AllowReordering` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper to false.
+N> You can disable reordering a particular column by setting the `AllowReordering` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper to false.
## Reorder single column
diff --git a/blazor/treegrid/columns/column-resizing.md b/blazor/treegrid/columns/column-resizing.md
index 6629bcd8a5..3105b95fe2 100644
--- a/blazor/treegrid/columns/column-resizing.md
+++ b/blazor/treegrid/columns/column-resizing.md
@@ -75,12 +75,12 @@ public class TreeData
-N> You can disable resizing for a particular column by setting the `AllowResizing` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component to false.
+N> You can disable resizing for a particular column by setting the `AllowResizing` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component to false.
In RTL mode, you can click and drag the left edge of the header cell to resize the column.
## Min and max width
-Column resize can be restricted between minimum and maximum width by defining the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_MinWidth) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_MaxWidth) properties in [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component.
+Column resize can be restricted between minimum and maximum width by defining the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_MinWidth) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_MaxWidth) properties in [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component.
In the following sample, minimum and maximum width are defined for **TaskName** and **Duration** columns.
@@ -148,7 +148,7 @@ public class TreeData
## Resize stacked column
-Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowResizing) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) as **false** to its columns.
+Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for any particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowResizing) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) as **false** to its columns.
{% tabs %}
diff --git a/blazor/treegrid/columns/column-template.md b/blazor/treegrid/columns/column-template.md
index 51dd39c1d0..435086a73a 100644
--- a/blazor/treegrid/columns/column-template.md
+++ b/blazor/treegrid/columns/column-template.md
@@ -225,7 +225,7 @@ N> The column template feature is used to render the customized element value in
The following screenshot represents the column Template.
-N> * Tree Grid actions such as editing, filtering and sorting etc. will depend upon the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html). If the `Field` is not specified in the
+N> * Tree Grid actions such as editing, filtering and sorting etc. will depend upon the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field). If the `Field` is not specified in the
template column, the tree grid actions cannot be performed.
* For Templated tree grid component, [ModelType](../templates.md#template-modeltype) property of tree grid should be defined.
@@ -331,7 +331,7 @@ N> For Templated Tree Grid component, [ModelType](../templates.md#template-model
## Using image inside template
-You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component to specify the custom image content. Inside the `Template`, you can access the data using the implicit named parameter **context** of Model type.
+You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component to specify the custom image content. Inside the `Template`, you can access the data using the implicit named parameter **context** of Model type.
```cshtml
@using Syncfusion.Blazor.TreeGrid
@@ -540,7 +540,7 @@ The following screenshot represents the Image Template.
## Using hyperlink column
-You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) to render the hyperlinks and for routing, [UriHelper](https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized.
+You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) to render the hyperlinks and for routing, [UriHelper](https://learn.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0) can be utilized.
This can be achieved by initially defining an anchor tag inside the column template and binding click event to it. By using the named parameter **context** of Model type, we can pass the row data to click event handler.
diff --git a/blazor/treegrid/editing/column-validation.md b/blazor/treegrid/editing/column-validation.md
index 3db66fc3c0..50ad066356 100644
--- a/blazor/treegrid/editing/column-validation.md
+++ b/blazor/treegrid/editing/column-validation.md
@@ -9,7 +9,7 @@ documentation: ug
# Column validation in Blazor TreeGrid Component
-Column validation allows to validate the edited or added row data and it displays errors for invalid fields before saving data. Tree Grid uses **Form Validator** component for column validation. The validation rules can be set by defining the [TreeGridColumn. ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ValidationRules.html).
+Column validation allows to validate the edited or added row data and it displays errors for invalid fields before saving data. Tree Grid uses **Form Validator** component for column validation. The validation rules can be set by defining the [TreeGridColumn. ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ValidationRules).
```cshtml
@using TreeGridComponent.Data;
@@ -432,7 +432,7 @@ The output will be as follows.
## Disable in-built validator component
-`Validator` property can also be used to disable the in-built validator component used by the tree grid. For instance, by default, the tree grid uses two validator components, `DataAnnotationValidator` and an internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ValidationRules) property, for handling edit form validation. If you are willing to use only the `DataAnnotationValidator` component, then it could be simply achieved by using the `Validator` component inside [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html).
+`Validator` property can also be used to disable the in-built validator component used by the tree grid. For instance, by default, the tree grid uses two validator components, `DataAnnotationValidator` and an internal [ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ValidationRules) property, for handling edit form validation. If you are willing to use only the `DataAnnotationValidator` component, then it could be simply achieved by using the `Validator` component inside [TreeGridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEditSettings.html).
{% tabs %}
diff --git a/blazor/treegrid/events.md b/blazor/treegrid/events.md
index 5b96ead0dd..c2372ec74b 100644
--- a/blazor/treegrid/events.md
+++ b/blazor/treegrid/events.md
@@ -2562,7 +2562,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
```
## Sorting
-[Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Sorting) event is raised before a sorting action is performed or a column is removed from sorting in the Tree Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
+[Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Sorting) event is raised before a sorting action is performed or a column is removed from sorting in the Tree Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
```cshtml
@@ -2617,7 +2617,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## Sorted
-[Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Sorted) event is raised after a sorting action is performed or a column is removed from sorting in the Tree Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
+[Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Sorted) event is raised after a sorting action is performed or a column is removed from sorting in the Tree Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -2671,7 +2671,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## Searching
-[Searching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Searching) event is raised before the search action is performed in the Tree Grid.
+[Searching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Searching) event is raised before the search action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -2725,7 +2725,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## Searched
-[Searched](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Searched) event is raised after the search action is performed in the Tree Grid.
+[Searched](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Searched) event is raised after the search action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -2778,7 +2778,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowCreating
-[RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowCreating) event triggers before the add action is performed in the Tree Grid.
+[RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreating) event triggers before the add action is performed in the Tree Grid.
```cshtml
@@ -2834,7 +2834,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowCreated
-[RowCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowCreated) event is raised after the add action is performed in the Tree Grid.
+[RowCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreated) event is raised after the add action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -2889,7 +2889,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowUpdating
-[RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowUpdating) event is raised before the edited or added data is saved in the Tree Grid.
+[RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowUpdating) event is raised before the edited or added data is saved in the Tree Grid.
```cshtml
@@ -2945,7 +2945,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowUpdated
-[RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowUpdated) event is raised after edited or added data is saved in the Tree Grid.
+[RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowUpdated) event is raised after edited or added data is saved in the Tree Grid.
```cshtml
@@ -3001,7 +3001,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowDeleting
-[RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowDeleting) event is raised before the record is deleted in the Tree Grid.
+[RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDeleting) event is raised before the record is deleted in the Tree Grid.
```cshtml
@@ -3057,7 +3057,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowDeleted
-[RowDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowDeleted) event is raised after a record is deleted in the Tree Grid.
+[RowDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDeleted) event is raised after a record is deleted in the Tree Grid.
```cshtml
@@ -3113,7 +3113,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## EditCanceling
-[EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~EditCanceling) event is raised before canceling the update of edited or added data in the Tree Grid.
+[EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Cancelling) event is raised before canceling the update of edited or added data in the Tree Grid.
```cshtml
@@ -3170,7 +3170,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## EditCanceled
-[EditCanceled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~EditCanceled) event is raised after canceling the update of edited or added data in the Tree Grid.
+[EditCanceled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Cancelled) event is raised after canceling the update of edited or added data in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3226,7 +3226,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## OnRowEditStart
-[OnRowEditStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~OnRowEditStart) event is raised before when the editing action of a row begins in the Tree Grid.
+[OnRowEditStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_BeforeRowEditing) event is raised before when the editing action of a row begins in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3282,7 +3282,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowEditing
-[RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowEditing) event is raised before the edit action is performed in the Tree Grid.
+[RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowEditing) event is raised before the edit action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3337,7 +3337,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## RowEdited
-[RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~RowEdited) event is raised after the edit action is performed in the Tree Grid.
+[RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowEdited) event is raised after the edit action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3392,7 +3392,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## Filtering
-[Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Filtering) event is raised before the filtering or clear filtering action is performed in the Tree Grid.
+[Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Filtering) event is raised before the filtering or clear filtering action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3447,7 +3447,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## Filtered
-[Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~Filtered) event is raised after the filtering or clear filtering action is performed in the Tree Grid.
+[Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Filtered) event is raised after the filtering or clear filtering action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3502,7 +3502,7 @@ The [DetailDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
## FilterDialogOpening
-[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~FilterDialogOpening) event triggers before the filter dialog is opened in the Tree Grid.
+[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_FilterDialogOpening) event triggers before the filter dialog is opened in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3559,7 +3559,7 @@ N> This event is raised specifically for the `Menu` and `Excel` [FilterType](htt
## FilterDialogOpened
-[FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~FilterDialogOpened) event is raised after the filter dialog is opened in the Tree Grid.
+[FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_FilterDialogOpened) event is raised after the filter dialog is opened in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3616,7 +3616,7 @@ N> This event is raised specifically for the `Excel` [FilterType](https://help.s
## CheckboxFilterSearching
-[CheckboxFilterSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~CheckboxFilterSearching) event is raised when values get filtered using search bar in [Excel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html#Syncfusion_Blazor_TreeGrid_FilterType_Excel) filter.
+[CheckboxFilterSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CheckboxFilterSearching) event is raised when values get filtered using search bar in [Excel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.FilterType.html#Syncfusion_Blazor_TreeGrid_FilterType_Excel) filter.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3672,7 +3672,7 @@ N> This event is raised specifically for the `Excel` [FilterType](https://help.s
## ColumnReordering
-[ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnReordering) event is raised before when columns reordering action is performed in the Tree Grid.
+[ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ColumnReordering) event is raised before when columns reordering action is performed in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3727,7 +3727,7 @@ N> This event is raised specifically for the `Excel` [FilterType](https://help.s
## ColumnReordered
-[ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnReordered) event is raised after when columns are reordered in the Tree Grid.
+[ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ColumnReordered) event is raised after when columns are reordered in the Tree Grid.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3782,7 +3782,7 @@ N> This event is raised specifically for the `Excel` [FilterType](https://help.s
## ColumnVisibilityChanging
-[ColumnVisibilityChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnVisibilityChanging) event is raised before the Tree Grid's column visibility is changing.
+[ColumnVisibilityChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ColumnsStateChanging) event is raised before the Tree Grid's column visibility is changing.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
@@ -3837,7 +3837,7 @@ N> This event is raised specifically for the `Excel` [FilterType](https://help.s
## ColumnVisibilityChanged
-[ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents%601~ColumnVisibilityChanged) event is raised after the Tree Grid's column visibility is changed.
+[ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_ColumnsStateChanged) event is raised after the Tree Grid's column visibility is changed.
```cshtml
@using Syncfusion.Blazor.TreeGrid;
diff --git a/blazor/treegrid/exporting.md b/blazor/treegrid/exporting.md
index b75455ce17..ae163ce0a9 100644
--- a/blazor/treegrid/exporting.md
+++ b/blazor/treegrid/exporting.md
@@ -10,7 +10,7 @@ documentation: ug
# PDF Export in Blazor TreeGrid Component
The PDF export feature enables users to convert TreeGrid data into a downloadable PDF document. To perform the export, use the
- **ExportToPdfAsync** method for exporting. To enable PDF export in the TreeGrid, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.EjsGrid~AllowPdfExport.html) as true.
+ **ExportToPdfAsync** method for exporting. To enable PDF export in the TreeGrid, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPdfExport) as true.
For a visual walkthrough of PDF export in the Blazor TreeGrid component, refer to the following video:
diff --git a/blazor/treegrid/filter.md b/blazor/treegrid/filter.md
index a876058dad..8157d8d15d 100644
--- a/blazor/treegrid/filter.md
+++ b/blazor/treegrid/filter.md
@@ -231,7 +231,7 @@ The following image illustrates the **Wildcard** operator in action.
-> When using the **Wildcard** operator, records are displayed according to the selected filter [HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_HierarchyMode) in [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings). For details, see the filter hierarchy modes [section](https://blazor.syncfusion.com/documentation/treegrid/filtering/filtering#filter-hierarchy-modes).
+> When using the **Wildcard** operator, records are displayed according to the selected filter [HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_HierarchyMode) in [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings). For details, see the filter hierarchy modes [section](https://blazor.syncfusion.com/documentation/treegrid/filter#filter-hierarchy-modes).
### LIKE filtering
@@ -252,7 +252,7 @@ The following image illustrates the **LIKE** operator in action.
-> When using the **LIKE** operator, records are displayed according to the selected filter [HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_HierarchyMode) in [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings). For details, see the filter hierarchy modes [section](https://blazor.syncfusion.com/documentation/treegrid/filtering/filtering#filter-hierarchy-modes).
+> When using the **LIKE** operator, records are displayed according to the selected filter [HierarchyMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_HierarchyMode) in [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FilterSettings). For details, see the filter hierarchy modes [section](https://blazor.syncfusion.com/documentation/treegrid/filter#filter-hierarchy-modes).
## Filter enum column
diff --git a/blazor/treegrid/filtering/excel-like-filter.md b/blazor/treegrid/filtering/excel-like-filter.md
index c88d1f63a9..188bc2a881 100644
--- a/blazor/treegrid/filtering/excel-like-filter.md
+++ b/blazor/treegrid/filtering/excel-like-filter.md
@@ -9,7 +9,7 @@ documentation: ug
# Excel Like Filter in Blazor Tree Grid Component
-Excel like filter can be enabled by defining the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings~Type.html) of [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html) as **Excel**. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.
+Excel like filter can be enabled by defining the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_Type) of [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html) as **Excel**. The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.
{% tabs %}
diff --git a/blazor/treegrid/filtering/filter-bar.md b/blazor/treegrid/filtering/filter-bar.md
index 0e146d426a..d707c6e524 100644
--- a/blazor/treegrid/filtering/filter-bar.md
+++ b/blazor/treegrid/filtering/filter-bar.md
@@ -9,7 +9,7 @@ documentation: ug
# Filter Bar in Blazor Tree Grid Component
-By setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AllowFiltering.html) to true, the filter bar row will render next to the header, which allows to filter data. The records can be filtered with different expressions depending upon the column type.
+By setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowFiltering) to true, the filter bar row will render next to the header, which allows to filter data. The records can be filtered with different expressions depending upon the column type.
**Filter bar expressions:**
diff --git a/blazor/treegrid/filtering/filter-menu.md b/blazor/treegrid/filtering/filter-menu.md
index a16f5d38b2..482bc44fab 100644
--- a/blazor/treegrid/filtering/filter-menu.md
+++ b/blazor/treegrid/filtering/filter-menu.md
@@ -9,7 +9,7 @@ documentation: ug
# Filter Menu in Blazor Tree Grid Component
-The filter menu can be enabled by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings~Type.html) of [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html) as **Menu**. The filter menu UI will be rendered based on its column type, which allows to filter data. The records can be filtered with different operators.
+The filter menu can be enabled by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridFilterSettings_Type) of [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridFilterSettings.html) as **Menu**. The filter menu UI will be rendered based on its column type, which allows to filter data. The records can be filtered with different operators.
{% tabs %}
@@ -327,7 +327,7 @@ namespace TreeGridComponent.Data {
## Enable different filter for a column
-Both the **Menu** and **Excel** filter can be used in a same Tree Grid. To do so, set the type as **Menu** or **Excel** using the [Filter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Filter.html) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html).
+Both the **Menu** and **Excel** filter can be used in a same Tree Grid. To do so, set the type as **Menu** or **Excel** using the [Filter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridFilterColumn.html) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html).
In the following sample menu filter is enabled by default and excel filter is enabled for the **Task Name** column using the `Filter` property of `TreeGridColumn`.
diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md
index f19c72b624..130b8327b8 100644
--- a/blazor/treegrid/getting-started-with-maui-app.md
+++ b/blazor/treegrid/getting-started-with-maui-app.md
@@ -265,5 +265,5 @@ N> If you face any issues with the Android emulator, check the [Troubleshooting
## See also
-1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
diff --git a/blazor/treegrid/print.md b/blazor/treegrid/print.md
index 6438cef4b7..6d06a7fccb 100644
--- a/blazor/treegrid/print.md
+++ b/blazor/treegrid/print.md
@@ -9,7 +9,7 @@ documentation: ug
# Print in Blazor TreeGrid Component
-To print the TreeGrid, use the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintAsync) method from the TreeGrid instance. The print option can be enabled in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~Toolbar.html) by adding the **Print** item.
+To print the TreeGrid, use the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintAsync) method from the TreeGrid instance. The print option can be enabled in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar) by adding the **Print** item.
{% tabs %}
@@ -84,11 +84,11 @@ Some print settings such as layout, paper size, and margins must be configured u
* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1)
* [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox)
* [Safari](https://www.mintprintables.com/print-tips/adjust-margins-osx/)
-* [IE](http://www.helpteaching.com/help/print/index.htm)
+* [IE](https://www.helpteaching.com/help/print/index.htm)
## Printing Using an External Button
-To trigger printing from an external button, invoke the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~Print.html) method on the TreeGrid instance.
+To trigger printing from an external button, invoke the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintAsync) method on the TreeGrid instance.
{% tabs %}
@@ -165,7 +165,7 @@ public class TreeData
## Print the Visible Page
-By default, the TreeGrid prints all the pages. To print the current page alone, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~PrintMode.html) to **CurrentPage**.
+By default, the TreeGrid prints all the pages. To print the current page alone, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintMode) to **CurrentPage**.
{% tabs %}
diff --git a/blazor/treegrid/toolbar.md b/blazor/treegrid/toolbar.md
index d1dabeb37b..d0cf67d485 100644
--- a/blazor/treegrid/toolbar.md
+++ b/blazor/treegrid/toolbar.md
@@ -100,7 +100,7 @@ public class TreeData
-N> The [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~Toolbar.html) property supports both built-in and custom toolbar items.
+N> The [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar) property supports both built-in and custom toolbar items.
## Enable/Disable Toolbar Items
diff --git a/blazor/treegrid/virtualization.md b/blazor/treegrid/virtualization.md
index efaf50f0b7..407328591c 100644
--- a/blazor/treegrid/virtualization.md
+++ b/blazor/treegrid/virtualization.md
@@ -13,7 +13,7 @@ Virtualization enables the efficient rendering of large datasets in the TreeGrid
## Row Virtualization
-Row virtualization renders only the rows visible in the viewport, appending additional records as the user scrolls vertically. This technique serves as an alternative to paging and improves performance by reducing the number of DOM elements. Enable row virtualization by setting the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~EnableVirtualization.html) property to `true` and specifying the content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~Height.html) property.
+Row virtualization renders only the rows visible in the viewport, appending additional records as the user scrolls vertically. This technique serves as an alternative to paging and improves performance by reducing the number of DOM elements. Enable row virtualization by setting the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableVirtualization) property to `true` and specifying the content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) property.
The number of records displayed is determined implicitly by the content area's height, with additional buffer records maintained for smooth scrolling. Expand and Collapse states of child records are persisted during virtualization.
diff --git a/blazor/treeview/authorization-and-authentication.md b/blazor/treeview/authorization-and-authentication.md
index 3577a2dc13..22f969be35 100644
--- a/blazor/treeview/authorization-and-authentication.md
+++ b/blazor/treeview/authorization-and-authentication.md
@@ -13,7 +13,7 @@ documentation: ug
**Authorization** determines whether an authenticated user or system possesses the necessary permissions to access a specific resource or perform a particular action. After a user's identity is authenticated, the system evaluates their credentials or permissions against a set of established rules or policies to grant or deny access.
-This section provides an example of implementing authorization and authentication to restrict access to the Blazor TreeView component to authorized users. The provided blog post details the steps for creating a [Blazor Server App with Authentication](https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-app-with-authentication.aspx), facilitating easy setup and configuration for this example.
+This section provides an example of implementing authorization and authentication to restrict access to the Blazor TreeView component to authorized users. The provided blog post details the steps for creating a [Blazor Server App with Authentication](https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-app-with-authentication), facilitating easy setup and configuration for this example.
The following example demonstrates a Blazor Server App configured with authentication, ensuring that the entire TreeView component is only accessible to authenticated users.
diff --git a/blazor/treeview/check-box.md b/blazor/treeview/check-box.md
index b1aa0498f9..97d2444149 100644
--- a/blazor/treeview/check-box.md
+++ b/blazor/treeview/check-box.md
@@ -105,7 +105,7 @@ For independent checked states, allowing child nodes to be checked or unchecked
## Check Nodes through Data Binding
-A specific node is checked by setting the [`IsChecked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_IsChecked) field to `true` for the corresponding node in the data source. This field specifies the checked state of the TreeView node.
+A specific node is checked by setting the [`IsChecked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_IsChecked) field to `true` for the corresponding node in the data source. This field specifies the checked state of the TreeView node.
```cshtml
@using Syncfusion.Blazor.Navigations
diff --git a/blazor/treeview/data-binding.md b/blazor/treeview/data-binding.md
index bc7a7955de..a3ccef2dcb 100644
--- a/blazor/treeview/data-binding.md
+++ b/blazor/treeview/data-binding.md
@@ -11,7 +11,7 @@ documentation: ug
The Blazor TreeView component provides the option to load data either from the local data sources or from remote data services. This can be done through [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property that is a member of the [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property. The `DataSource` property supports list of objects and `DataManager`. It also supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors.
-The Blazor TreeView features "load on demand" (lazy loading) by default, which minimizes bandwidth usage when handling large datasets. It initially loads only the first-level nodes. Child nodes are loaded when a parent node is expanded, based on the [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Child) member.
+The Blazor TreeView features "load on demand" (lazy loading) by default, which minimizes bandwidth usage when handling large datasets. It initially loads only the first-level nodes. Child nodes are loaded when a parent node is expanded, based on the [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) member.
By default, the [`LoadOnDemand`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property is set to `true`. Disabling this property renders all tree nodes at once at the beginning. The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event triggers once the data source is populated in the TreeView, allowing for post-data-binding actions.
@@ -22,7 +22,7 @@ A video demonstrating how to bind list data and service URLs to the Blazor TreeV
## Local Data
-To bind local data to the Blazor TreeView, assign a list of objects to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_DataSource) property. The Blazor TreeView component primarily requires three fields—[`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Text), and either [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Child)—to render data. If mapper fields are not explicitly specified, default values are used. Local data sources can also be provided as an instance of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started).
+To bind local data to the Blazor TreeView, assign a list of objects to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. The Blazor TreeView component primarily requires three fields—[`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and either [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child)—to render data. If mapper fields are not explicitly specified, default values are used. Local data sources can also be provided as an instance of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started).
Two primary methods for local data binding are supported:
@@ -32,7 +32,7 @@ Two primary methods for local data binding are supported:
### Hierarchical Data
-The Blazor TreeView can be populated with a hierarchical data source composed of a nested list of objects. A hierarchical data structure is directly assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_DataSource) property. All field members from the hierarchical data are then mapped to the corresponding keys within the [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property.
+The Blazor TreeView can be populated with a hierarchical data source composed of a nested list of objects. A hierarchical data structure is directly assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. All field members from the hierarchical data are then mapped to the corresponding keys within the [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property.
In the following example, **Id**, **FolderName**, and **SubFolders** columns from hierarchical data have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) fields, respectively.
diff --git a/blazor/treeview/getting-started-with-maui-app.md b/blazor/treeview/getting-started-with-maui-app.md
index 0c39a17feb..e2d5aaf611 100644
--- a/blazor/treeview/getting-started-with-maui-app.md
+++ b/blazor/treeview/getting-started-with-maui-app.md
@@ -283,5 +283,5 @@ N> If you face any issues with the Android emulator, check the [Troubleshooting
## See also
-1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
\ No newline at end of file
diff --git a/blazor/treeview/integration.md b/blazor/treeview/integration.md
index a3a8c47291..d322b00630 100644
--- a/blazor/treeview/integration.md
+++ b/blazor/treeview/integration.md
@@ -574,7 +574,7 @@ The Blazor TreeView component has the built-in option to customize each node's a
## Navigation within Sidebar
-The Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_NavigateUrl) field is used for navigation between pages. This example maps `NavigateUrl` to facilitate page transitions when the TreeView is embedded within a Sidebar component.
+The Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) field is used for navigation between pages. This example maps `NavigateUrl` to facilitate page transitions when the TreeView is embedded within a Sidebar component.
```cshtml
@using Syncfusion.Blazor.Navigations