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/8] 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® 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® 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 %} - - - - - - - - - - - -
- - -Click here - -{% 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 ` @@ -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(); @@ -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® 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/8] 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® Blazor theme styles {% highlight html tabtitle="App.razor" %} - .... - - - .... - @@ -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(); @@ -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® 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/8] 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) From 8d320e59e35c12284073d9edb1c1285017786d54 Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Tue, 19 May 2026 18:56:10 +0530 Subject: [PATCH 7/8] 1013927: Updated the Blazor virtualization UG Documentation --- .../virtualization.md | 828 +----------------- 1 file changed, 42 insertions(+), 786 deletions(-) diff --git a/blazor/common/performance-and-scalability/virtualization.md b/blazor/common/performance-and-scalability/virtualization.md index 0a245f1ba3..6a62367cfd 100644 --- a/blazor/common/performance-and-scalability/virtualization.md +++ b/blazor/common/performance-and-scalability/virtualization.md @@ -1,28 +1,29 @@ --- layout: post -title: Virtualization in Syncfusion Blazor Components -description: Learn how Syncfusion Blazor components use row and column virtualization, overscan count, virtual placeholders, frozen columns, and infinite scrolling. +title: Improve Blazor Performance with Virtualization in Syncfusion Components +description: Learn about virtualization support in Syncfusion Blazor components, including row and column virtualization, overscan buffering, virtual placeholders, frozen columns, and infinite scrolling. platform: Blazor control: Common documentation: ug --- -# Virtualization in Syncfusion® Blazor Components +# Improve Blazor Performance with Virtualization in Syncfusion® Components -Virtualization improves the performance of [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the items visible in the viewport and recycling DOM elements as the user scrolls. This reduces initial load time, lowers memory usage, and keeps the DOM size small, which results in smoother scrolling and more responsive interactions. +Virtualization improves the performance of [Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the items visible in the viewport and recycling DOM elements as the user scrolls. This reduces initial load time, lowers memory usage, and keeps the DOM size small, resulting in smoother scrolling and more responsive interactions. -With virtualization enabled, working with large datasets becomes easier and faster, even when they contain thousands of records. +With virtualization enabled, large datasets become easier to handle, even when they contain thousands of records. ## Components supporting virtualization -The following major Syncfusion® Blazor components provide built-in virtualization support to efficiently handle large datasets. +The following Blazor components provide built-in virtualization support for efficiently handling large datasets. -* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** – Supports row virtualization, column virtualization, buffered rendering (Overscan), virtual loading placeholders (mask row), frozen columns with virtualization, and infinite scrolling. -* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** – Supports UI virtualization with window or container scrolling modes. -* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** – Supports UI virtualization in both Details and Large Icons views. -* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** – Provides UI virtualization to render only visible nodes, significantly boosting performance in large hierarchical structures. -* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** – Includes row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines. -* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** – Offers row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data. +* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** - Supports row virtualization, column virtualization, overscan buffering, virtual loading placeholders (mask rows), frozen columns with virtualization, and infinite scrolling. +* **[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler)** - Supports virtual scrolling to efficiently render large appointment collections and improve timeline performance. +* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** - Supports UI virtualization with window or container scrolling modes. +* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** - Supports UI virtualization in both Details and Large Icons views. +* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** - Supports UI virtualization to render only visible nodes, significantly improving performance in large hierarchical structures. +* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** - Supports row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines. +* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** - Supports row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data. ## Advantages of virtualization @@ -31,806 +32,61 @@ The following major Syncfusion® Blazor comp | Faster initial load | Renders only the items visible in the viewport | | Reduced DOM size | Keeps the DOM size small and reduces memory usage | | Smoother scrolling | Reuses DOM elements to avoid frequent reflows | -| Scalable | Performs well with tens of thousands of records | +| Scalable | Handles tens of thousands of records efficiently | ## DataGrid virtualization -The Syncfusion® [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently. These include row virtualization, column virtualization, Overscan buffering, loading placeholders, frozen columns with virtualization, and infinite scrolling. Together, these features make the grid faster, smoother, and more responsive when working with large amounts of data. - -### Row virtualization - -Row virtualization improves performance by rendering only the rows that are visible in the viewport. Instead of creating all rows at once, the DataGrid loads and reuses rows while you scroll vertically. This reduces the initial loading time, lowers memory usage, and keeps scrolling smooth. - -#### Configure row virtualization - -* Set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to `true` on the grid. -* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) (for example, Height="300"). -* Use [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block. -* Make sure all rows have the same height. Avoid text wrapping or templates that create different row sizes. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - -@code{ - public List TaskData { get; set; } - protected override void OnInitialized() - { - TaskData = TaskDetails.GenerateData(1000); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="TaskDetails.cs" %} - -public class TaskDetails -{ - public static List GenerateData(int count) - { - var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" }; - var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; - var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" }; - var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" }; - var random = new Random(); - var result = new List(); - // Generate random data. - for (int i = 0; i < count; i++) - { - result.Add(new TaskDetails - { - TaskID = i + 1, - Engineer = names[random.Next(names.Count)], - Designation = designations[random.Next(designations.Count)], - Estimation = hours[random.Next(hours.Count)], - Status = statusValues[random.Next(statusValues.Count)] - }); - } - return result; - } - public int TaskID { get; set; } - public string Engineer { get; set; } - public string Designation { get; set; } - public int Estimation { get; set; } - public string Status { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXreXrDghESsUlpk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -### Column virtualization - -Column virtualization improves performance when the DataGrid has many columns. Only the columns that are currently visible in the viewport are rendered. As you scroll horizontally, additional columns load automatically. This results in faster rendering, lower memory usage, and smoother horizontal scrolling. - -#### Configure column virtualization - -* Set [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) to `true` on the grid. -* Assign a fixed pixel [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) to every column. -* Avoid percentage-based widths. -* If no width is defined, the grid uses the default width of `200px`. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code { - public List GridData { get; set; } - protected override void OnInitialized() - { - GridData = VirtualData.GenerateData(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="VirtualData.cs" %} - -public class VirtualData -{ - public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30) - { - SNo = sNo; - FIELD1 = field1; - FIELD2 = field2; - FIELD3 = field3; - FIELD4 = field4; - FIELD5 = field5; - FIELD6 = field6; - FIELD7 = field7; - FIELD8 = field8; - FIELD9 = field9; - FIELD10 = field10; - FIELD11 = field11; - FIELD12 = field12; - FIELD13 = field13; - FIELD14 = field14; - FIELD15 = field15; - FIELD16 = field16; - FIELD17 = field17; - FIELD18 = field18; - FIELD19 = field19; - FIELD20 = field20; - FIELD21 = field21; - FIELD22 = field22; - FIELD23 = field23; - FIELD24 = field24; - FIELD25 = field25; - FIELD26 = field26; - FIELD27 = field27; - FIELD28 = field28; - FIELD29 = field29; - FIELD30 = field30; - } - public static List GenerateData() - { - var virtualData = new List(); - var random = new Random(); - var names = new[] { - "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", - "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", - "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", - "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", - "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", - "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", - "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", - "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", - "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", - "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" - }; - for (var i = 0; i < 1000; i++) - { - virtualData.Add(new VirtualData( - i + 1, - names[random.Next(names.Length)], - 1967 + (i % 10), - random.Next(200), - random.Next(100), - random.Next(2000), - random.Next(1000), - random.Next(100), - random.Next(10), - random.Next(10), - random.Next(100), - random.Next(100), - random.Next(1000), - random.Next(10), - random.Next(10), - random.Next(1000), - random.Next(200), - random.Next(300), - random.Next(400), - random.Next(500), - random.Next(700), - random.Next(800), - random.Next(1000), - random.Next(2000), - random.Next(150), - random.Next(1000), - random.Next(100), - random.Next(400), - random.Next(600), - random.Next(500), - random.Next(300) - )); - } - return virtualData; - } - public int SNo { get; set; } - public string FIELD1 { get; set; } - public int FIELD2 { get; set; } - public int FIELD3 { get; set; } - public int FIELD4 { get; set; } - public int FIELD5 { get; set; } - public int FIELD6 { get; set; } - public int FIELD7 { get; set; } - public int FIELD8 { get; set; } - public int FIELD9 { get; set; } - public int FIELD10 { get; set; } - public int FIELD11 { get; set; } - public int FIELD12 { get; set; } - public int FIELD13 { get; set; } - public int FIELD14 { get; set; } - public int FIELD15 { get; set; } - public int FIELD16 { get; set; } - public int FIELD17 { get; set; } - public int FIELD18 { get; set; } - public int FIELD19 { get; set; } - public int FIELD20 { get; set; } - public int FIELD21 { get; set; } - public int FIELD22 { get; set; } - public int FIELD23 { get; set; } - public int FIELD24 { get; set; } - public int FIELD25 { get; set; } - public int FIELD26 { get; set; } - public int FIELD27 { get; set; } - public int FIELD28 { get; set; } - public int FIELD29 { get; set; } - public int FIELD30 { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLoZWBlzonBSEEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -### Overscan count (buffered rendering) - -Overscan count makes scrolling smoother by rendering a few extra rows above and below the visible area of the grid. These extra rows act as a buffer so the grid does not need to frequently update the DOM while you scroll. This reduces flickering and helps the grid feel more responsive. - -#### Configure Overscan count - -* Set the [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) to control how many extra rows should be rendered above and below the visible area. -* Use a higher value (for example, 5–10) for smoother scrolling during fast scroll actions. -* Use a lower value (for example, 1–3) if you want to minimize memory usage. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - - - -@code { - public List OrderData { get; set; } - protected override void OnInitialized() - { - OrderData = OrderDetails.GetAllRecords(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderDetails.cs" %} - -public class OrderDetails -{ - public static List order = new List(); - public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.EmployeeID = EmployeeID; - this.OrderDate = OrderDate; - this.Freight = Freight; - this.ShipCountry = ShipCountry; - this.ShipCity = ShipCity; - this.ShipAddress = ShipAddress; - this.ShippedDate = ShippedDate; - this.Verified = Verified; - } - public static List GetAllRecords() - { - if (order.Count == 0) - { - int Code = 10247; - for (int i = 1; i < 500; i++) - { - order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false)); - order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true)); - order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true)); - order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false)); - order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true)); - Code += 5; - } - } - return order; - } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public int EmployeeID { get; set; } - public DateTime OrderDate { get; set; } - public double Freight { get; set; } - public string ShipCountry { get; set; } - public string ShipCity { get; set; } - public string ShipAddress { get; set; } - public DateTime ShippedDate { get; set; } - public bool Verified { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeDLNqVYqUifpB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -N> The `OverscanCount` property supports both local and remote data. - -### VirtualMaskRow (loading placeholders) - -VirtualMaskRow displays placeholder cells while the grid loads new data during virtualization. This feature improves the user experience by showing a visible loading indicator in grid cells while data is being fetched, which is especially helpful with large datasets or when scrolling triggers additional loads. - -When `VirtualMaskRow` is enabled, the grid reuses existing DOM elements and displays placeholders until actual data is available. - -#### Configure VirtualMaskRow - -* Set [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) to `true`. -* Enable row virtualization ([EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)) or column virtualization ([EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization)). -* For the best results, set both [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) and [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight). This ensures accurate placeholder rendering and smooth scrolling performance. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code { - public List OrderData { get; set; } - - protected override void OnInitialized() - { - // Load a sufficiently large set to experience virtualization and placeholders. - OrderData = OrderDetails.GetAllRecords(1000); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderDetails.cs" %} - -public class OrderDetails -{ - public int OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime OrderDate { get; set; } - public decimal Freight { get; set; } - - public static List GetAllRecords(int count) - { - var list = new List(); - var rnd = new Random(1); - - for (int i = 1; i <= count; i++) - { - list.Add(new OrderDetails - { - OrderID = i, - CustomerID = "CUS-" + (1000 + i), - OrderDate = DateTime.Today.AddDays(-i), - Freight = Math.Round((decimal)rnd.NextDouble() * 500m, 2) - }); - } - - return list; - } -} - -{% endhighlight %} -{% endtabs %} - -### Frozen columns with virtualization - -Frozen columns remain fixed on the left or right side of the grid while the rest of the columns scroll horizontally. When used with virtualization, the grid renders only visible rows and columns, but the frozen columns stay in place. This improves performance without affecting usability. - -#### Configure frozen columns with virtualization - -* Set [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) to `true` for the columns you want to freeze. -* Set [GridColumn.Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) to Left or Right. -* Enable both row and column virtualization using [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization). -* Assign a fixed width to all columns. -* Use a fixed grid height for smoother virtualization. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code { - public List GridData { get; set; } - protected override void OnInitialized() - { - GridData = VirtualData.GenerateData(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="VirtualData.cs" %} - -public class VirtualData -{ - public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30) - { - SNo = sNo; - FIELD1 = field1; - FIELD2 = field2; - FIELD3 = field3; - FIELD4 = field4; - FIELD5 = field5; - FIELD6 = field6; - FIELD7 = field7; - FIELD8 = field8; - FIELD9 = field9; - FIELD10 = field10; - FIELD11 = field11; - FIELD12 = field12; - FIELD13 = field13; - FIELD14 = field14; - FIELD15 = field15; - FIELD16 = field16; - FIELD17 = field17; - FIELD18 = field18; - FIELD19 = field19; - FIELD20 = field20; - FIELD21 = field21; - FIELD22 = field22; - FIELD23 = field23; - FIELD24 = field24; - FIELD25 = field25; - FIELD26 = field26; - FIELD27 = field27; - FIELD28 = field28; - FIELD29 = field29; - FIELD30 = field30; - } - public static List GenerateData() - { - var virtualData = new List(); - var random = new Random(); - var names = new[] { - "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", - "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", - "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", - "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", - "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", - "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", - "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", - "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", - "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", - "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" - }; - for (var i = 0; i < 1000; i++) - { - virtualData.Add(new VirtualData( - i + 1, - names[random.Next(names.Length)], - 1967 + (i % 10), - random.Next(200), - random.Next(100), - random.Next(2000), - random.Next(1000), - random.Next(100), - random.Next(10), - random.Next(10), - random.Next(100), - random.Next(100), - random.Next(1000), - random.Next(10), - random.Next(10), - random.Next(1000), - random.Next(200), - random.Next(300), - random.Next(400), - random.Next(500), - random.Next(700), - random.Next(800), - random.Next(1000), - random.Next(2000), - random.Next(150), - random.Next(1000), - random.Next(100), - random.Next(400), - random.Next(600), - random.Next(500), - random.Next(300) - )); - } - return virtualData; - } - public int SNo { get; set; } - public string FIELD1 { get; set; } - public int FIELD2 { get; set; } - public int FIELD3 { get; set; } - public int FIELD4 { get; set; } - public int FIELD5 { get; set; } - public int FIELD6 { get; set; } - public int FIELD7 { get; set; } - public int FIELD8 { get; set; } - public int FIELD9 { get; set; } - public int FIELD10 { get; set; } - public int FIELD11 { get; set; } - public int FIELD12 { get; set; } - public int FIELD13 { get; set; } - public int FIELD14 { get; set; } - public int FIELD15 { get; set; } - public int FIELD16 { get; set; } - public int FIELD17 { get; set; } - public int FIELD18 { get; set; } - public int FIELD19 { get; set; } - public int FIELD20 { get; set; } - public int FIELD21 { get; set; } - public int FIELD22 { get; set; } - public int FIELD23 { get; set; } - public int FIELD24 { get; set; } - public int FIELD25 { get; set; } - public int FIELD26 { get; set; } - public int FIELD27 { get; set; } - public int FIELD28 { get; set; } - public int FIELD29 { get; set; } - public int FIELD30 { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhIDshOhHwVXCEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -### Infinite scrolling - -Infinite scrolling loads additional data automatically as you scroll down. Instead of loading everything at once, the grid loads data in blocks. This keeps performance fast even when working with very large datasets. - -#### Configure infinite scrolling - -* Set [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) to `true` on the grid. -* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) to the grid. -* Set [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block. - - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - -@code{ - public List TaskData { get; set; } - protected override void OnInitialized() - { - TaskData = TaskDetails.GenerateData(5000); - } -} -{% endhighlight %} - -{% highlight c# tabtitle="TaskDetails.cs" %} -public class TaskDetails -{ - public static List GenerateData(int count) - { - var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" }; - var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; - var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" }; - var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" }; - var random = new Random(); - var result = new List(); - // Generate random data. - for (int i = 0; i < count; i++) - { - result.Add(new TaskDetails - { - TaskID = i + 1, - Engineer = names[random.Next(names.Count)], - Designation = designations[random.Next(designations.Count)], - Estimation = hours[random.Next(hours.Count)], - Status = statusValues[random.Next(statusValues.Count)] - }); - } - return result; - } - public int TaskID { get; set; } - public string Engineer { get; set; } - public string Designation { get; set; } - public int Estimation { get; set; } - public string Status { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjreXMrOAPkHeOht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently. -## ListView virtualization +For complete virtualization guidance, see: -The Syncfusion® [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which helps improve performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records. +* [Virtual Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) +* [Infinite Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) -#### Configure ListView virtualization +## Scheduler virtualization -Virtualization can be enabled by setting the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_EnableVirtualization) property to `true`. +The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) supports virtual scrolling to efficiently render large appointment collections and improve timeline performance. This helps reduce DOM size and keeps the scheduler responsive when working with extensive schedules. -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +For complete virtualization guidance, see: -@using Syncfusion.Blazor.Lists +* [Virtual Scrolling in Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/virtual-scrolling) - - - +## ListView virtualization -@code{ - List ListData = new List(); +The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which improves performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records. - protected override void OnInitialized() - { - base.OnInitialized(); - ListData.Add(new DataModel { Text = "Nancy", Id = "0" }); - ListData.Add(new DataModel { Text = "Andrew", Id = "1" }); - ListData.Add(new DataModel { Text = "Janet", Id = "2" }); - ListData.Add(new DataModel { Text = "Margaret", Id = "3" }); - ListData.Add(new DataModel { Text = "Steven", Id = "4" }); - ListData.Add(new DataModel { Text = "Laura", Id = "5" }); - ListData.Add(new DataModel { Text = "Robert", Id = "6" }); - ListData.Add(new DataModel { Text = "Michael", Id = "7" }); - ListData.Add(new DataModel { Text = "Albert", Id = "8" }); - ListData.Add(new DataModel { Text = "Nolan", Id = "9" }); +For complete virtualization guidance, see: - for (int i = 10; i < 1000; i++) - { - int index = new Random().Next(0, 10); - ListData.Add(new DataModel - { - Text = ListData[index].GetType().GetProperty("Text").GetValue(ListData[index], null).ToString(), - Id = i.ToString() - }); - } - } +* [Virtualization in Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization) - public class DataModel - { - public string Id { get; set; } - public string Text { get; set; } - } -} +## File Manager virtualization -{% endhighlight %} -{% endtabs %} +The [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries. -### Scroll modes +For complete virtualization guidance, see: -ListView supports two scrolling modes when virtualization is enabled. +* [Virtualization in Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization) -**1. Window Scroll (Default)** -This mode is used automatically when no height is specified for the component. Scrolling is controlled by the browser window. +## TreeView virtualization -**2. Container Scroll** -This mode is used when you set a fixed pixel height for the ListView. In this case, the component scrolls inside its own container rather than the entire page. +The [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) supports UI virtualization to render only the visible nodes in the hierarchy. This improves rendering speed and responsiveness when working with large trees. -## File Manager virtualization +For complete virtualization guidance, see: -The Syncfusion® [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries. Virtualization works in both [Details](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_Details) and [Large Icons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_LargeIcons) views. +* [Virtualization in Blazor TreeView](https://blazor.syncfusion.com/documentation/treeview/virtualization) -The component determines which items to display based on the **height** and **width** of the viewport. As the user scrolls, the File Manager loads additional files and folders according to the available visible area. +## Gantt Chart virtualization -#### Configure File Manager virtualization +The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) supports row, timeline, and column virtualization to handle large project schedules efficiently. This reduces DOM size and improves scrolling performance in complex timelines. -To enable virtualization, set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableVirtualization) property to `true`. The example below demonstrates virtualization applied in the **Details** ViewType. +For complete virtualization guidance, see: -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.FileManager +* [Virtualization in Blazor Gantt Chart](https://blazor.syncfusion.com/documentation/gantt-chart/virtualization) - - - - -{% endhighlight %} -{% endtabs %} +## TreeGrid virtualization -## See also +The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) supports row virtualization, column virtualization, and virtual placeholder rendering for hierarchical data. This improves performance when displaying large nested datasets. -For detailed explanations and additional configuration options, refer to the following documentation pages. +For complete virtualization guidance, see: -* [Virtual Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) -* [Infinite Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) -* [Virtualization in Syncfusion Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization) -* [Virtualization in Syncfusion Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization) +* [Virtualization in Blazor TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/virtualization) \ No newline at end of file From 93c8a5706fe1eb6d04044a86d6055f4696fedde3 Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Tue, 19 May 2026 18:57:31 +0530 Subject: [PATCH 8/8] 1013927: Removed Virtualization --- .../virtualization.md | 828 +++++++++++++++++- 1 file changed, 786 insertions(+), 42 deletions(-) diff --git a/blazor/common/performance-and-scalability/virtualization.md b/blazor/common/performance-and-scalability/virtualization.md index 6a62367cfd..0a245f1ba3 100644 --- a/blazor/common/performance-and-scalability/virtualization.md +++ b/blazor/common/performance-and-scalability/virtualization.md @@ -1,29 +1,28 @@ --- layout: post -title: Improve Blazor Performance with Virtualization in Syncfusion Components -description: Learn about virtualization support in Syncfusion Blazor components, including row and column virtualization, overscan buffering, virtual placeholders, frozen columns, and infinite scrolling. +title: Virtualization in Syncfusion Blazor Components +description: Learn how Syncfusion Blazor components use row and column virtualization, overscan count, virtual placeholders, frozen columns, and infinite scrolling. platform: Blazor control: Common documentation: ug --- -# Improve Blazor Performance with Virtualization in Syncfusion® Components +# Virtualization in Syncfusion® Blazor Components -Virtualization improves the performance of [Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the items visible in the viewport and recycling DOM elements as the user scrolls. This reduces initial load time, lowers memory usage, and keeps the DOM size small, resulting in smoother scrolling and more responsive interactions. +Virtualization improves the performance of [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) by rendering only the items visible in the viewport and recycling DOM elements as the user scrolls. This reduces initial load time, lowers memory usage, and keeps the DOM size small, which results in smoother scrolling and more responsive interactions. -With virtualization enabled, large datasets become easier to handle, even when they contain thousands of records. +With virtualization enabled, working with large datasets becomes easier and faster, even when they contain thousands of records. ## Components supporting virtualization -The following Blazor components provide built-in virtualization support for efficiently handling large datasets. +The following major Syncfusion® Blazor components provide built-in virtualization support to efficiently handle large datasets. -* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** - Supports row virtualization, column virtualization, overscan buffering, virtual loading placeholders (mask rows), frozen columns with virtualization, and infinite scrolling. -* **[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler)** - Supports virtual scrolling to efficiently render large appointment collections and improve timeline performance. -* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** - Supports UI virtualization with window or container scrolling modes. -* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** - Supports UI virtualization in both Details and Large Icons views. -* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** - Supports UI virtualization to render only visible nodes, significantly improving performance in large hierarchical structures. -* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** - Supports row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines. -* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** - Supports row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data. +* **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** – Supports row virtualization, column virtualization, buffered rendering (Overscan), virtual loading placeholders (mask row), frozen columns with virtualization, and infinite scrolling. +* **[ListView](https://www.syncfusion.com/blazor-components/blazor-listview)** – Supports UI virtualization with window or container scrolling modes. +* **[File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)** – Supports UI virtualization in both Details and Large Icons views. +* **[TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview)** – Provides UI virtualization to render only visible nodes, significantly boosting performance in large hierarchical structures. +* **[Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)** – Includes row virtualization, timeline virtualization, and column virtualization to efficiently render large project schedules and complex timelines. +* **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** – Offers row virtualization, column virtualization, and cell placeholders (VirtualMaskRow) for smoother loading with large hierarchical data. ## Advantages of virtualization @@ -32,61 +31,806 @@ The following Blazor components provide built-in virtualization support for effi | Faster initial load | Renders only the items visible in the viewport | | Reduced DOM size | Keeps the DOM size small and reduces memory usage | | Smoother scrolling | Reuses DOM elements to avoid frequent reflows | -| Scalable | Handles tens of thousands of records efficiently | +| Scalable | Performs well with tens of thousands of records | ## DataGrid virtualization -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently. +The Syncfusion® [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports several virtualization features that help it handle large datasets efficiently. These include row virtualization, column virtualization, Overscan buffering, loading placeholders, frozen columns with virtualization, and infinite scrolling. Together, these features make the grid faster, smoother, and more responsive when working with large amounts of data. + +### Row virtualization + +Row virtualization improves performance by rendering only the rows that are visible in the viewport. Instead of creating all rows at once, the DataGrid loads and reuses rows while you scroll vertically. This reduces the initial loading time, lowers memory usage, and keeps scrolling smooth. + +#### Configure row virtualization + +* Set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to `true` on the grid. +* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) (for example, Height="300"). +* Use [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block. +* Make sure all rows have the same height. Avoid text wrapping or templates that create different row sizes. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code{ + public List TaskData { get; set; } + protected override void OnInitialized() + { + TaskData = TaskDetails.GenerateData(1000); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="TaskDetails.cs" %} + +public class TaskDetails +{ + public static List GenerateData(int count) + { + var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" }; + var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; + var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" }; + var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" }; + var random = new Random(); + var result = new List(); + // Generate random data. + for (int i = 0; i < count; i++) + { + result.Add(new TaskDetails + { + TaskID = i + 1, + Engineer = names[random.Next(names.Count)], + Designation = designations[random.Next(designations.Count)], + Estimation = hours[random.Next(hours.Count)], + Status = statusValues[random.Next(statusValues.Count)] + }); + } + return result; + } + public int TaskID { get; set; } + public string Engineer { get; set; } + public string Designation { get; set; } + public int Estimation { get; set; } + public string Status { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXreXrDghESsUlpk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Column virtualization + +Column virtualization improves performance when the DataGrid has many columns. Only the columns that are currently visible in the viewport are rendered. As you scroll horizontally, additional columns load automatically. This results in faster rendering, lower memory usage, and smoother horizontal scrolling. + +#### Configure column virtualization + +* Set [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) to `true` on the grid. +* Assign a fixed pixel [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) to every column. +* Avoid percentage-based widths. +* If no width is defined, the grid uses the default width of `200px`. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + protected override void OnInitialized() + { + GridData = VirtualData.GenerateData(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="VirtualData.cs" %} + +public class VirtualData +{ + public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30) + { + SNo = sNo; + FIELD1 = field1; + FIELD2 = field2; + FIELD3 = field3; + FIELD4 = field4; + FIELD5 = field5; + FIELD6 = field6; + FIELD7 = field7; + FIELD8 = field8; + FIELD9 = field9; + FIELD10 = field10; + FIELD11 = field11; + FIELD12 = field12; + FIELD13 = field13; + FIELD14 = field14; + FIELD15 = field15; + FIELD16 = field16; + FIELD17 = field17; + FIELD18 = field18; + FIELD19 = field19; + FIELD20 = field20; + FIELD21 = field21; + FIELD22 = field22; + FIELD23 = field23; + FIELD24 = field24; + FIELD25 = field25; + FIELD26 = field26; + FIELD27 = field27; + FIELD28 = field28; + FIELD29 = field29; + FIELD30 = field30; + } + public static List GenerateData() + { + var virtualData = new List(); + var random = new Random(); + var names = new[] { + "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", + "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", + "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", + "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", + "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", + "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", + "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", + "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", + "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", + "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" + }; + for (var i = 0; i < 1000; i++) + { + virtualData.Add(new VirtualData( + i + 1, + names[random.Next(names.Length)], + 1967 + (i % 10), + random.Next(200), + random.Next(100), + random.Next(2000), + random.Next(1000), + random.Next(100), + random.Next(10), + random.Next(10), + random.Next(100), + random.Next(100), + random.Next(1000), + random.Next(10), + random.Next(10), + random.Next(1000), + random.Next(200), + random.Next(300), + random.Next(400), + random.Next(500), + random.Next(700), + random.Next(800), + random.Next(1000), + random.Next(2000), + random.Next(150), + random.Next(1000), + random.Next(100), + random.Next(400), + random.Next(600), + random.Next(500), + random.Next(300) + )); + } + return virtualData; + } + public int SNo { get; set; } + public string FIELD1 { get; set; } + public int FIELD2 { get; set; } + public int FIELD3 { get; set; } + public int FIELD4 { get; set; } + public int FIELD5 { get; set; } + public int FIELD6 { get; set; } + public int FIELD7 { get; set; } + public int FIELD8 { get; set; } + public int FIELD9 { get; set; } + public int FIELD10 { get; set; } + public int FIELD11 { get; set; } + public int FIELD12 { get; set; } + public int FIELD13 { get; set; } + public int FIELD14 { get; set; } + public int FIELD15 { get; set; } + public int FIELD16 { get; set; } + public int FIELD17 { get; set; } + public int FIELD18 { get; set; } + public int FIELD19 { get; set; } + public int FIELD20 { get; set; } + public int FIELD21 { get; set; } + public int FIELD22 { get; set; } + public int FIELD23 { get; set; } + public int FIELD24 { get; set; } + public int FIELD25 { get; set; } + public int FIELD26 { get; set; } + public int FIELD27 { get; set; } + public int FIELD28 { get; set; } + public int FIELD29 { get; set; } + public int FIELD30 { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLoZWBlzonBSEEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Overscan count (buffered rendering) + +Overscan count makes scrolling smoother by rendering a few extra rows above and below the visible area of the grid. These extra rows act as a buffer so the grid does not need to frequently update the DOM while you scroll. This reduces flickering and helps the grid feel more responsive. + +#### Configure Overscan count + +* Set the [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) to control how many extra rows should be rendered above and below the visible area. +* Use a higher value (for example, 5–10) for smoother scrolling during fast scroll actions. +* Use a lower value (for example, 1–3) if you want to minimize memory usage. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.EmployeeID = EmployeeID; + this.OrderDate = OrderDate; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + this.ShipCity = ShipCity; + this.ShipAddress = ShipAddress; + this.ShippedDate = ShippedDate; + this.Verified = Verified; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + int Code = 10247; + for (int i = 1; i < 500; i++) + { + order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false)); + order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true)); + order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true)); + order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false)); + order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true)); + Code += 5; + } + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } + public string ShipCity { get; set; } + public string ShipAddress { get; set; } + public DateTime ShippedDate { get; set; } + public bool Verified { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeDLNqVYqUifpB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +N> The `OverscanCount` property supports both local and remote data. + +### VirtualMaskRow (loading placeholders) + +VirtualMaskRow displays placeholder cells while the grid loads new data during virtualization. This feature improves the user experience by showing a visible loading indicator in grid cells while data is being fetched, which is especially helpful with large datasets or when scrolling triggers additional loads. + +When `VirtualMaskRow` is enabled, the grid reuses existing DOM elements and displays placeholders until actual data is available. + +#### Configure VirtualMaskRow + +* Set [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) to `true`. +* Enable row virtualization ([EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)) or column virtualization ([EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization)). +* For the best results, set both [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) and [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight). This ensures accurate placeholder rendering and smooth scrolling performance. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List OrderData { get; set; } + + protected override void OnInitialized() + { + // Load a sufficiently large set to experience virtualization and placeholders. + OrderData = OrderDetails.GetAllRecords(1000); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public decimal Freight { get; set; } + + public static List GetAllRecords(int count) + { + var list = new List(); + var rnd = new Random(1); + + for (int i = 1; i <= count; i++) + { + list.Add(new OrderDetails + { + OrderID = i, + CustomerID = "CUS-" + (1000 + i), + OrderDate = DateTime.Today.AddDays(-i), + Freight = Math.Round((decimal)rnd.NextDouble() * 500m, 2) + }); + } + + return list; + } +} + +{% endhighlight %} +{% endtabs %} + +### Frozen columns with virtualization + +Frozen columns remain fixed on the left or right side of the grid while the rest of the columns scroll horizontally. When used with virtualization, the grid renders only visible rows and columns, but the frozen columns stay in place. This improves performance without affecting usability. + +#### Configure frozen columns with virtualization + +* Set [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) to `true` for the columns you want to freeze. +* Set [GridColumn.Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) to Left or Right. +* Enable both row and column virtualization using [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization). +* Assign a fixed width to all columns. +* Use a fixed grid height for smoother virtualization. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + protected override void OnInitialized() + { + GridData = VirtualData.GenerateData(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="VirtualData.cs" %} + +public class VirtualData +{ + public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30) + { + SNo = sNo; + FIELD1 = field1; + FIELD2 = field2; + FIELD3 = field3; + FIELD4 = field4; + FIELD5 = field5; + FIELD6 = field6; + FIELD7 = field7; + FIELD8 = field8; + FIELD9 = field9; + FIELD10 = field10; + FIELD11 = field11; + FIELD12 = field12; + FIELD13 = field13; + FIELD14 = field14; + FIELD15 = field15; + FIELD16 = field16; + FIELD17 = field17; + FIELD18 = field18; + FIELD19 = field19; + FIELD20 = field20; + FIELD21 = field21; + FIELD22 = field22; + FIELD23 = field23; + FIELD24 = field24; + FIELD25 = field25; + FIELD26 = field26; + FIELD27 = field27; + FIELD28 = field28; + FIELD29 = field29; + FIELD30 = field30; + } + public static List GenerateData() + { + var virtualData = new List(); + var random = new Random(); + var names = new[] { + "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", + "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", + "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", + "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", + "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", + "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", + "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", + "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", + "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", + "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" + }; + for (var i = 0; i < 1000; i++) + { + virtualData.Add(new VirtualData( + i + 1, + names[random.Next(names.Length)], + 1967 + (i % 10), + random.Next(200), + random.Next(100), + random.Next(2000), + random.Next(1000), + random.Next(100), + random.Next(10), + random.Next(10), + random.Next(100), + random.Next(100), + random.Next(1000), + random.Next(10), + random.Next(10), + random.Next(1000), + random.Next(200), + random.Next(300), + random.Next(400), + random.Next(500), + random.Next(700), + random.Next(800), + random.Next(1000), + random.Next(2000), + random.Next(150), + random.Next(1000), + random.Next(100), + random.Next(400), + random.Next(600), + random.Next(500), + random.Next(300) + )); + } + return virtualData; + } + public int SNo { get; set; } + public string FIELD1 { get; set; } + public int FIELD2 { get; set; } + public int FIELD3 { get; set; } + public int FIELD4 { get; set; } + public int FIELD5 { get; set; } + public int FIELD6 { get; set; } + public int FIELD7 { get; set; } + public int FIELD8 { get; set; } + public int FIELD9 { get; set; } + public int FIELD10 { get; set; } + public int FIELD11 { get; set; } + public int FIELD12 { get; set; } + public int FIELD13 { get; set; } + public int FIELD14 { get; set; } + public int FIELD15 { get; set; } + public int FIELD16 { get; set; } + public int FIELD17 { get; set; } + public int FIELD18 { get; set; } + public int FIELD19 { get; set; } + public int FIELD20 { get; set; } + public int FIELD21 { get; set; } + public int FIELD22 { get; set; } + public int FIELD23 { get; set; } + public int FIELD24 { get; set; } + public int FIELD25 { get; set; } + public int FIELD26 { get; set; } + public int FIELD27 { get; set; } + public int FIELD28 { get; set; } + public int FIELD29 { get; set; } + public int FIELD30 { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhIDshOhHwVXCEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Infinite scrolling + +Infinite scrolling loads additional data automatically as you scroll down. Instead of loading everything at once, the grid loads data in blocks. This keeps performance fast even when working with very large datasets. + +#### Configure infinite scrolling + +* Set [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) to `true` on the grid. +* Assign a fixed pixel [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) to the grid. +* Set [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) to control how many rows load in each block. + + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code{ + public List TaskData { get; set; } + protected override void OnInitialized() + { + TaskData = TaskDetails.GenerateData(5000); + } +} +{% endhighlight %} + +{% highlight c# tabtitle="TaskDetails.cs" %} +public class TaskDetails +{ + public static List GenerateData(int count) + { + var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" }; + var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }; + var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" }; + var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" }; + var random = new Random(); + var result = new List(); + // Generate random data. + for (int i = 0; i < count; i++) + { + result.Add(new TaskDetails + { + TaskID = i + 1, + Engineer = names[random.Next(names.Count)], + Designation = designations[random.Next(designations.Count)], + Estimation = hours[random.Next(hours.Count)], + Status = statusValues[random.Next(statusValues.Count)] + }); + } + return result; + } + public int TaskID { get; set; } + public string Engineer { get; set; } + public string Designation { get; set; } + public int Estimation { get; set; } + public string Status { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjreXMrOAPkHeOht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -For complete virtualization guidance, see: +## ListView virtualization -* [Virtual Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) -* [Infinite Scrolling in Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) +The Syncfusion® [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which helps improve performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records. -## Scheduler virtualization +#### Configure ListView virtualization -The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) supports virtual scrolling to efficiently render large appointment collections and improve timeline performance. This helps reduce DOM size and keeps the scheduler responsive when working with extensive schedules. +Virtualization can be enabled by setting the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_EnableVirtualization) property to `true`. -For complete virtualization guidance, see: +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} -* [Virtual Scrolling in Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/virtual-scrolling) +@using Syncfusion.Blazor.Lists -## ListView virtualization + + + -The [Blazor ListView](https://www.syncfusion.com/blazor-components/blazor-listview) supports UI virtualization, which improves performance when working with large datasets. Instead of rendering all items at once, only the items visible within the viewport are created. This keeps the component responsive and reduces memory usage even when the list contains thousands of records. +@code{ + List ListData = new List(); -For complete virtualization guidance, see: + protected override void OnInitialized() + { + base.OnInitialized(); + ListData.Add(new DataModel { Text = "Nancy", Id = "0" }); + ListData.Add(new DataModel { Text = "Andrew", Id = "1" }); + ListData.Add(new DataModel { Text = "Janet", Id = "2" }); + ListData.Add(new DataModel { Text = "Margaret", Id = "3" }); + ListData.Add(new DataModel { Text = "Steven", Id = "4" }); + ListData.Add(new DataModel { Text = "Laura", Id = "5" }); + ListData.Add(new DataModel { Text = "Robert", Id = "6" }); + ListData.Add(new DataModel { Text = "Michael", Id = "7" }); + ListData.Add(new DataModel { Text = "Albert", Id = "8" }); + ListData.Add(new DataModel { Text = "Nolan", Id = "9" }); -* [Virtualization in Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization) + for (int i = 10; i < 1000; i++) + { + int index = new Random().Next(0, 10); + ListData.Add(new DataModel + { + Text = ListData[index].GetType().GetProperty("Text").GetValue(ListData[index], null).ToString(), + Id = i.ToString() + }); + } + } -## File Manager virtualization + public class DataModel + { + public string Id { get; set; } + public string Text { get; set; } + } +} -The [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries. +{% endhighlight %} +{% endtabs %} -For complete virtualization guidance, see: +### Scroll modes -* [Virtualization in Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization) +ListView supports two scrolling modes when virtualization is enabled. -## TreeView virtualization +**1. Window Scroll (Default)** +This mode is used automatically when no height is specified for the component. Scrolling is controlled by the browser window. -The [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) supports UI virtualization to render only the visible nodes in the hierarchy. This improves rendering speed and responsiveness when working with large trees. +**2. Container Scroll** +This mode is used when you set a fixed pixel height for the ListView. In this case, the component scrolls inside its own container rather than the entire page. -For complete virtualization guidance, see: +## File Manager virtualization -* [Virtualization in Blazor TreeView](https://blazor.syncfusion.com/documentation/treeview/virtualization) +The Syncfusion® [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) supports UI virtualization to efficiently load large numbers of files and folders without affecting performance. It renders only the items visible in the viewport, enabling smooth navigation even when directories contain thousands of entries. Virtualization works in both [Details](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_Details) and [Large Icons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_LargeIcons) views. -## Gantt Chart virtualization +The component determines which items to display based on the **height** and **width** of the viewport. As the user scrolls, the File Manager loads additional files and folders according to the available visible area. -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) supports row, timeline, and column virtualization to handle large project schedules efficiently. This reduces DOM size and improves scrolling performance in complex timelines. +#### Configure File Manager virtualization -For complete virtualization guidance, see: +To enable virtualization, set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableVirtualization) property to `true`. The example below demonstrates virtualization applied in the **Details** ViewType. -* [Virtualization in Blazor Gantt Chart](https://blazor.syncfusion.com/documentation/gantt-chart/virtualization) +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.FileManager -## TreeGrid virtualization + + + + +{% endhighlight %} +{% endtabs %} -The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) supports row virtualization, column virtualization, and virtual placeholder rendering for hierarchical data. This improves performance when displaying large nested datasets. +## See also -For complete virtualization guidance, see: +For detailed explanations and additional configuration options, refer to the following documentation pages. -* [Virtualization in Blazor TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/virtualization) \ No newline at end of file +* [Virtual Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) +* [Infinite Scrolling in Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) +* [Virtualization in Syncfusion Blazor ListView](https://blazor.syncfusion.com/documentation/listview/virtualization) +* [Virtualization in Syncfusion Blazor File Manager](https://blazor.syncfusion.com/documentation/file-manager/virtualization)