diff --git a/blazor-toc.html b/blazor-toc.html index c29cf11361..26363773b0 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -170,6 +170,17 @@
  • Adaptive Structuring
    • +
  • Rich Text Editor + +
    • +
  • Kanban + +
  • Installation
  • @@ -2167,6 +2181,7 @@
  • Paging
  • Selection
  • Sorting
    • +
  • Toolbar
  • How To @@ -2977,10 +2992,13 @@
  • Asynchronous Upload
    • +
  • FileUpload Configuration
    • +
  • FileUpload Methods
  • Accessibility
  • Chunk Upload
  • Localization
  • File Source
    • +
  • Drag and Drop
  • Template
  • Validation
  • Form Integration
    • @@ -4955,6 +4973,7 @@
  • 31.1.18
    • +
  • 31.2.9 Service Pack Release
  • 31.2.2 Service Pack Release
  • 31.1.17 Main Release
  • 2025 Volume 2 - 30.*
  • 2025 Volume 1 - 29.*
  • 2024 Volume 4 - 28.*
  • 2024 Volume 3 - 27.*
  • 2024 Volume 2 - 26.*
  • 2024 Volume 1 - 25.*
  • 2023 Volume 4 - 24.*
  • 2023 Volume 3 - 23.*
  • 2023 Volume 2 - 22.*
  • 2023 Volume 1 - 21.*
    • diff --git a/blazor/Release-Notes/31.2.9.md b/blazor/Release-Notes/31.2.9.md new file mode 100644 index 0000000000..dd89f63f11 --- /dev/null +++ b/blazor/Release-Notes/31.2.9.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Blazor Release Notes +description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 3 SP2 Release - Release Notes +platform: blazor +documentation: ug +--- + +# Essential Studio for Blazor - v31.2.9 Release Notes + +{% include release-info.html date="November 12, 2025" version="v31.2.9" %} + +{% directory path: _includes/release-notes/v31.2.9 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/blazor/ai-coding-assistant/mcp-server.md b/blazor/ai-coding-assistant/mcp-server.md index 5062680f78..81218249d1 100644 --- a/blazor/ai-coding-assistant/mcp-server.md +++ b/blazor/ai-coding-assistant/mcp-server.md @@ -1,19 +1,19 @@ --- layout: post -title: SyncfusionBlazorAssistant MCP Server | Syncfusion -description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor apps. +title: SyncfusionBlazorAssistant MCP server | Syncfusion +description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor applications. control: Getting started with SyncfusionBlazorAssistant MCP Server platform: Blazor documentation: ug --- -# SyncfusionBlazorAssistant MCP Server +# SyncfusionBlazorAssistant MCP server ## Overview -The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components. +The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components. -### Key Benefits +### Key benefits * Intelligent code generation for Syncfusion® Blazor components. * Detailed component documentation and usage examples. @@ -23,15 +23,15 @@ The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have: -* Required [node](https://nodejs.org/en/) version >= 18 -* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* Required [Node.js](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® Code Studio](https://www.syncfusion.com/code-studio/), etc.) * An active Syncfusion® license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) +* An active [API key](https://www.syncfusion.com/account/api-key) -## Unlimited Access +## Unlimited access Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: @@ -46,7 +46,7 @@ This ensures users can fully leverage Syncfusion® Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: -### Generic MCP Server Settings +### Generic MCP server settings - **npm package name**: `@syncfusion/blazor-assistant` - **Type**: stdio (standard input/output transport) @@ -54,7 +54,7 @@ Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to co - **Arguments**: -y - **Server name**: syncfusionBlazorAssistant -You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: +You need to add your [Syncfusion API key](https://www.syncfusion.com/account/api-key) as an env parameter in the configuration file: ```json "env": { @@ -93,7 +93,7 @@ Below are setup instructions for popular MCP clients: } ``` -* After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands. +* After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands. * Confirm the server is active by checking for a message like: `SyncfusionBlazorAssistant is running...` in the output. @@ -176,7 +176,7 @@ For more details, refer to the [Cursor documentation](https://cursor.com/docs/co For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server). -> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) +> For more detailed information about configuring MCP servers in various clients, refer to the official documentation, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) ## Usage @@ -199,7 +199,7 @@ To activate the SyncfusionBlazorAssistant MCP server: Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. -### Best Practices for Effective Usage +### Best practices for effective usage 1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?"). 2. `Provide context`: Include details about your use case for more targeted solutions. @@ -225,7 +225,7 @@ If you encounter issues: ## Support -Product support is available through the following mediums. +Product support is available through the following channels. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support * [Community forum](https://www.syncfusion.com/forums/blazor-components) @@ -234,4 +234,4 @@ Product support is available through the following mediums. ## See also -* [Syncfusion Blazor Documentation](https://blazor.syncfusion.com/documentation) \ No newline at end of file +* [Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/ai-coding-assistant/overview.md b/blazor/ai-coding-assistant/overview.md index cc9913fcb7..2dcc8fdc04 100644 --- a/blazor/ai-coding-assistant/overview.md +++ b/blazor/ai-coding-assistant/overview.md @@ -1,36 +1,36 @@ --- layout: post -title: Syncfusion AI Coding Assistant Overview | Syncfusion -description: Learn how Syncfusion AI Coding Assistant boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. +title: Syncfusion AI Coding Assistant overview | Syncfusion +description: Learn how the Syncfusion AI Coding Assistant boosts Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. control: Syncfusion AI Coding Assistant Overview platform: Blazor documentation: ug --- -# Syncfusion® AI Coding Assistant Overview +# Syncfusion® AI Coding Assistant overview -The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. +The **Syncfusion® AI Coding Assistant** is designed to streamline development when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. -AI Coding Assistant: +AI Coding Assistants: -* **The SyncfusionBlazorAssistant MCP Server** - Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionBlazorAssistant MCP server** + Processes prompts and returns tailored code suggestions through [MCP-compatible clients](https://modelcontextprotocol.io/clients). -## Getting Started +## Getting started -To use the AI Coding Assistant, you need: +To use the AI Coding Assistant, the following are required: * A [Syncfusion® user account](https://www.syncfusion.com/account) * An active Syncfusion® license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) +* An active [API key](https://www.syncfusion.com/account/api-key) * A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -## Unlimited Access +## Unlimited access -Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: +Syncfusion® offers unlimited access to the AI Coding Assistant with no limitations on: * Number of requests * Components usage @@ -39,12 +39,14 @@ Syncfusion® offers unlimited access to the This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. -## Best Practices +## Best practices * Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your Blazor application. * Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. * Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. -* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information. +* Step-by-step explanations: Use annotated code to understand component behavior. The level of detail may vary based on the tool, mode, and AI model. Refer to the [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, see the [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or contact [support](https://support.syncfusion.com/support/tickets/create). + * Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or [support](https://support.syncfusion.com/support/tickets/create). > Always check AI-generated content and code for accuracy before using it. @@ -52,18 +54,18 @@ This ensures users can fully leverage Syncfusion® ## Recommendations * Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. -* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. +* Model compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. -## Privacy & Data Handling +## Privacy and data handling The Syncfusion® AI Coding Assistant is designed with privacy in mind: * The tools do not access your project files or workspace directly. * User prompts are not stored by any of the tools or used for any other purpose. * Prompts are not used to train Syncfusion® models. -* The assistant generates context, while the final output is handled by your selected AI model. +* The assistant provides context, while the final output is generated by the AI model selected in your client. ## See also -* Add the [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client -* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) +* Add the [SyncfusionBlazorAssistant MCP server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client +* [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/common/deployment/deployment-linux-nginx.md b/blazor/common/deployment/deployment-linux-nginx.md new file mode 100644 index 0000000000..f17bdf89e3 --- /dev/null +++ b/blazor/common/deployment/deployment-linux-nginx.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Deploy a Blazor Web App to Linux with NGINX | Syncfusion +description: Learn here all about deploying the Blazor Web App with Syncfusion Blazor Components to Linux server using NGINX. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to Linux with NGINX + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Linux server using NGINX as a reverse proxy. + +Refer to [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0&tabs=linux-ubuntu) topic for more information. + +## Prerequisites + +* Linux Server – Ubuntu 20.04, Red Hat Enterprise (RHEL) 8.0 and SUSE Linux Enterprise Server 12. +* [.NET runtime](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) installed on the server. +* An existing Blazor Web App with Syncfusion components or create a new one. + +## Install and Start NGINX + +Install NGINX on your Linux system and enable it to start automatically: + +```bash +sudo dnf install nginx +sudo systemctl start nginx +sudo systemctl enable nginx +sudo systemctl status nginx +``` + +**Verification**: Open `http://your-server-ip` in a browser — you should see the NGINX welcome page. + +## Create and publish Your Blazor Web App with Syncfusion Components + +* You can create a Blazor Web App using the .NET CLI commands with Syncfusion components by referring [here](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli). + +* Publish your Blazor Web application in Release configuration using the following command and run it: + +```bash +dotnet publish -c Release -o publish +cd publish +dotnet SfBlazorApp.dll --urls "http://0.0.0.0:5000" +``` + +![Publish Blazor Web App](../images/publish-blazor-app.jpg) + +## Configure NGINX to Proxy Requests + +Create a new NGINX configuration file for your Blazor application: + +```bash +sudo nano /etc/nginx/conf.d/blazorapp.conf +``` + +Add the following configuration to enable NGINX to act as a reverse proxy: + +```nginx +server { + listen 80; + server_name _; + location / { + proxy_pass http://localhost:5000; + proxy_http_version 1.1; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + } +} +``` + +Save and exit the file (Ctrl+O, Enter, then Ctrl+X). + +## Validate and Restart NGINX + +Test the NGINX configuration and restart the service: + +```bash +sudo nginx -t +sudo systemctl restart nginx +``` + +## Configure SELinux (For Red Hat-based Systems) + +On Red Hat-based systems, SELinux may block NGINX from accessing your Blazor app. Allow NGINX to connect to network services: + +```bash +sudo setsebool -P httpd_can_network_connect 1 +``` + +## Access the Application + +From your Windows machine or any other device, open a browser and navigate to: + +``` +http:/// +``` + +You should now see your Blazor Web app running successfully with Syncfusion components! + +![Output-Linux](../images/output-linux.png) + +## See also + +* [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0) +* [Configure NGINX for ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0#configure-nginx) diff --git a/blazor/common/images/output-linux.png b/blazor/common/images/output-linux.png new file mode 100644 index 0000000000..4064e734d1 Binary files /dev/null and b/blazor/common/images/output-linux.png differ diff --git a/blazor/common/images/publish-blazor-app.jpg b/blazor/common/images/publish-blazor-app.jpg new file mode 100644 index 0000000000..9c3ee9997a Binary files /dev/null and b/blazor/common/images/publish-blazor-app.jpg differ diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md index 0691049aa7..0cadf2f9d6 100644 --- a/blazor/datagrid/clipboard.md +++ b/blazor/datagrid/clipboard.md @@ -1,31 +1,30 @@ --- layout: post title: Clipboard in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Clipboard in the Syncfusion Blazor DataGrid component and much more. +description: Learn how to copy, paste, and autofill data in the Syncfusion Blazor DataGrid using keyboard shortcuts, buttons, and batch editing. platform: Blazor control: DataGrid documentation: ug --- -# Clipboard in Blazor DataGrid +# Clipboard in Syncfusion Blazor DataGrid -The clipboard feature in the Syncfusion® Blazor DataGrid provides an easy way to copy selected rows or cells data into the clipboard. You can use keyboard shortcuts to perform the copy operation. The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into clipboard. +The **clipboard** feature in the Syncfusion® Blazor DataGrid allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors. +To use keyboard shortcuts, selection must be enabled and the grid must be focused. -Interaction keys |Description ------|----- -Ctrl + C |Copy selected rows or cells data into clipboard. -Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard. +| Windows | Mac | Actions | +|---------|-----|---------| +| Ctrl + C | Command + C | Copy selected rows or cells to the clipboard | +| Ctrl + Shift + H | Command + Shift + H | Copy selected rows or cells with headers to the clipboard | -By using these keyboard shortcuts, you can quickly copy data from the Grid to the clipboard, making it easy to paste the data into other applications or documents. - -To enable the clipboard feature, you can use the Grid with your data source and selection property. +To enable clipboard functionality, configure the DataGrid with the required [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html). If the selection mode is **Row**, entire rows are copied. If it is **Cell**, only the highlighted cells are copied. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -36,7 +35,7 @@ To enable the clipboard feature, you can use the Grid with your data source and @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -48,40 +47,40 @@ To enable the clipboard feature, you can use the Grid with your data source and {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -93,14 +92,16 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNVlTrSTfkKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLosNWcpKkBYKnF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Copy to clipboard using external buttons -## Copy to clipboard by external buttons +Clipboard actions can be triggered using external buttons when using UI controls is preferred over shortcut keys. -Copying data to the clipboard by using external buttons in the Syncfusion® Blazor DataGrid allows you to programmatically trigger the copy operation, making it more friendly, especially for those who may not be familiar with keyboard shortcuts or manual copying. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method programmatically copies selected rows or cells: -To copy selected rows or cells data into the clipboard with the help of external buttons, you can utilize the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method available in the Grid. This is demonstrated in the following example, +- Pass **true** to include column headers in the copied content. +- Pass **false** or omit the parameter to copy without headers. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -123,19 +124,19 @@ To copy selected rows or cells data into the clipboard with the help of external @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public async Task Copy() + private async Task Copy() { await Grid.CopyAsync(); } - public async Task CopyHeader() + private async Task CopyHeader() { await Grid.CopyAsync(true); } @@ -145,40 +146,40 @@ To copy selected rows or cells data into the clipboard with the help of external {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -190,32 +191,27 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSDfMKeTVVoBtf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSsjCcfTtZWPnL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## AutoFill -The AutoFill feature in the Syncfusion® Blazor DataGrid allows you to copy the data of selected cells and paste it into other cells by simply dragging the autofill icon of the selected cells to the desired cells. This feature provides a convenient way to quickly populate data in a grid. - -**how to use the autofill feature** +The AutoFill feature in the Syncfusion® Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle. -1. Select the cells from which you want to copy data. +**Steps to use AutoFill feature** -2. Hover over the bottom-right corner of the selection to reveal the autofill icon. +1. Select the desired cells to copy. +2. Hover over the bottom-right corner of the selection to display the autofill handle. +3. Drag the handle to the target cells. +4. Release the mouse to populate the target cells with the copied data. -3. Click and hold the autofill icon, then drag it to the target cells where you want to paste the copied data. - -4. Release the mouse to complete the autofill action, and the data from the source cells will be copied and pasted into the target cells. - -This feature is enabled by defining [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as **true**. - -The following example demonstrates how to enable the autofill feature in the Grid. +To enable AutoFill, set the [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property to **true** and use [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) to allow copying values across multiple cells. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -227,7 +223,7 @@ The following example demonstrates how to enable the autofill feature in the Gri @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -239,40 +235,40 @@ The following example demonstrates how to enable the autofill feature in the Gri {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -284,46 +280,39 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLojTCUezbECphd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, then the autofill icon will be displayed on cell selection to copy cells. -> * It requires the selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to be **Box** and also [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) to be **Batch**. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsNicJTjOUEma?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> * When [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, the autofill handle appears on cell selection. +> * AutoFill requires selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) set to **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) set to **Box**, and [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) set to `Batch`. ### Limitations -* AutoFill does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using autofill to avoid unexpected results. - -* The AutoFill feature does not support generating non-linear series or sequential data automatically. Cannot create complex series or patterns by simply dragging cells with non-sequential data. The autofill feature is designed for copying and pasting data from a selected range of cells. - -* The AutoFill feature does not support virtual scrolling or column virtualization in the Grid. - -* The Auto Fill feature can only be applied to the viewport cell when enabling the features of infinite scrolling in the Grid. +- **Data Type Conversion**: AutoFill does not convert string values to numeric or date types. Copying strings into numeric cells results in **NaN**, and copying strings into date cells results in an **empty cell**. +- **Value Copying**: AutoFill copies values directly from the source range without generating non-linear or sequential series. +- **Virtualization**: AutoFill is not supported with virtual scrolling or column virtualization. +- **Infinite Scrolling**: With infinite scrolling, AutoFill applies only to cells within the current viewport. ## Paste -The Syncfusion® Blazor DataGrid provides a paste feature that allows you to copy the content of a cell or a group of cells and paste it into another set of cells. This feature allows you to quickly copy and paste content within the grid, making it convenient for data entry and manipulation. - -Follow the steps below to use the Paste feature in the grid: +The Paste feature in the Syncfusion® Blazor DataGrid allows copying content from selected cells and pasting it into another range using Ctrl + C and Ctrl + V. -1. Select the cells from which you want to copy the content. +**To paste data within the grid:** -2. Press the Ctrl + C shortcut key to copy the selected cells' content to the clipboard. - -3. Select the target cells where you want to paste the copied content. - -4. Press the Ctrl + V shortcut key to paste the copied content into the target cells. +1. Select the cells to copy. +2. Press Ctrl + C to copy the content. +3. Select the target cells. +4. Press Ctrl + V to paste the copied content. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -331,7 +320,7 @@ Follow the steps below to use the Paste feature in the grid: @code { - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -343,40 +332,40 @@ Follow the steps below to use the Paste feature in the grid: {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -388,11 +377,10 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyNzsUeyrJRGbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBoWNsGJziFNQMu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> To perform paste functionality, it requires the selection **mode** to be **Cell**, **cellSelectionMode** to be **Box** and also Batch Editing should be enabled. +> To paste content, set selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to **Cell**, set [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to **Box**, and enable [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing). ### Limitations -* The Paste feature does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using AutoFill to avoid unexpected results. \ No newline at end of file +- **Data Type Conversion**: Pasting does not convert string values to numeric or date types. Pasting strings into numeric cells results in **NaN**, and pasting strings into date cells results in an **empty cell**. Ensure that the pasted values are compatible with the target column's data type. \ No newline at end of file diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md index 3f5adcc36a..7ff8c0d564 100644 --- a/blazor/datagrid/context-menu.md +++ b/blazor/datagrid/context-menu.md @@ -7,18 +7,20 @@ control: DataGrid documentation: ug --- -# Context menu in Syncfusion® Blazor DataGrid +# Context menu in Syncfusion Blazor DataGrid -The Syncfusion® Blazor DataGrid comes equipped with a context menu feature, which is triggered when a user right-clicks anywhere within the Grid. This feature serves to enrich the user experience by offering immediate access to a variety of supplementary actions and operations that can be executed on the data displayed in the Grid. +The Syncfusion® Blazor DataGrid supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability. -To activate the context menu within the Grid, you have an option to configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. You can set this property to either include the default context menu items or define your own custom context menu items, tailoring the menu options to suit your specific needs. This customization allows you to enhance the Grid's functionality by providing context-sensitive actions for interacting with your data. - -The context menu is triggered when you right-click on different areas of the Grid, including: - * Header: When you right-click on the Grid's header section. - * Content: When you right-click on the Grid's main content area. - * Pager: When you right-click on the pager section. +To enable the context menu, configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. Use default items for built-in menu options or add custom items for tailored functionality. This feature improves interactivity by offering context-sensitive actions. -The default context menu items in the header area of the Grid are as follows: +The context menu appears when right-clicking in these Grid areas: +* **Header:** Displays column-specific actions. +* **Content:** Shows row-related options. +* **Pager:** Offers navigation controls. + +The default context menu items include: + +**Header** | Items | Description | | ---------------- | ------------------------------------------------------------ | @@ -29,7 +31,7 @@ The default context menu items in the header area of the Grid are as follows: | `SortAscending` | Sort the current column in ascending order. | | `SortDescending` | Sort the current column in descending order. | -The default context menu items in the content area of the Grid are as follows: +**Content** | Items | Description | | ------------- | ------------------------------------------------------------------- | @@ -42,7 +44,7 @@ The default context menu items in the content area of the Grid are as follows: | `ExcelExport` | Export the Grid data as an Excel document. | | `CsvExport` | Export the Grid data as a CSV document. | -The default context menu items in the pager area of the Grid are as follows: +**Pager** | Items | Description | | ----------- | ------------------------------------------ | @@ -51,7 +53,6 @@ The default context menu items in the pager area of the Grid are as follows: | `LastPage` | Navigate to the last page of the Grid. | | `NextPage` | Navigate to the next page of the Grid. | -The following example demonstrates how to enable context menu feature in the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -69,36 +70,19 @@ The following example demonstrates how to enable context menu feature in the Gri @code { - private SfGrid Grid; - public List Orders { get; set; } - - public List ContextMenuItems = new List - { - "AutoFit", - "AutoFitAll", - "SortAscending", - "SortDescending", - "Copy", - "Edit", - "Delete", - "Save", - "Cancel", - "PdfExport", - "ExcelExport", - "CsvExport", - "FirstPage", - "PrevPage", - "LastPage", - "NextPage", - "Group", - "Ungroup" + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private List ContextMenuItems = new() + { + "AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "Copy", + "Edit", "Delete", "Save", "Cancel", "PdfExport", "ExcelExport", "CsvExport", + "FirstPage", "PrevPage", "LastPage", "NextPage", "Group", "Ungroup" }; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - } {% endhighlight %} @@ -107,14 +91,14 @@ The following example demonstrates how to enable context menu feature in the Gri public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -150,18 +134,19 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIjJjlfrgDinOe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrIsjrEUXtJazSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Custom context menu items -The Syncfusion® Blazor DataGrid empowers you to enhance your user experience by incorporating custom context menu items into the default context menu. These customized options enable you to tailor the context menu to meet the unique requirements of your application. +The Syncfusion® Blazor DataGrid supports adding custom context menu items along with default options. -To incorporate custom context menu items in the Syncfusion® Blazor DataGrid, you can achieve this by specifying the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html). This allows you to define and customize the appearance and behavior of these additional context menu items according to your requirements. +To configure custom context menu items: -Furthermore, you can assign actions to these custom items by utilizing the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides you with the means to handle user interactions with the custom context menu items, enabling you to execute specific actions or operations when these items are clicked. +1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property as a collection of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. +2. Specify properties such as **Text**, **Target**, and **Id** for each custom item. +3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to add custom context menu items in the Grid. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy selected rows or cells, including headers, to the clipboard. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -179,22 +164,21 @@ The following example demonstrates how to add custom context menu items in the G @code { - private SfGrid Grid; - public List Employees { get; set; } + private SfGrid? Grid; + private List? Employees { get; set; } protected override void OnInitialized() { Employees = EmployeeData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await this.Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } - } {% endhighlight %} @@ -203,15 +187,14 @@ The following example demonstrates how to add custom context menu items in the G public class EmployeeData { - - public static List Employees = new List(); + private static readonly List Employees = new(); public EmployeeData(int employeeID, string firstName, string lastName, string city) { - this.EmployeeID = employeeID; - this.FirstName = firstName; - this.LastName = lastName; - this.City = city; + EmployeeID = employeeID; + FirstName = firstName; + LastName = lastName; + City = city; } public static List GetAllRecords() @@ -247,46 +230,50 @@ public class EmployeeData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyDfNYsPWaHXLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoMjLaVOKOJFCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Built-in and Custom context menu items -The Syncfusion® Blazor DataGrid provides the flexibility to use both built-in and custom context menu items simultaneously. This is useful when you want to extend the default functionalities (like copy, delete, or edit) with your own custom actions, such as Copy with headers, Export row, or other application-specific commands. +The Syncfusion® Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**. + +To configure **built-in** and **custom** context menu items: -You can achieve this by defining a list containing both built-in menu item strings and custom context menu items using the [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property of the Grid. The actions for custom context menu items can be handled using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. +1. Define both built-in item strings and custom [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. +2. For custom items, specify properties such as **Text**, **Target**, and **Id**. +3. Handle custom actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to define both built-in and custom context menu items, and how to handle the custom item action in the `ContextMenuItemClicked` event. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers. +The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method copies selected rows or cells, including headers, to the clipboard. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid? Grid; + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -297,14 +284,14 @@ The following example demonstrates how to define both built-in and custom contex public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -340,29 +327,26 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBSNftEhBsXumEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSiXBaVEwxOsiX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sub context menu items in DataGrid -The Syncfusion® Blazor DataGrid supports hierarchical context menu structures, allowing you to define sub-context menu items that appear as child options under a parent item in the context menu. This feature is useful when organizing multiple related actions under a single top-level context menu item. - -To define sub-context menu items in the Blazor Grid, do follow the steps given below: - -1. Use the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property to define a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. - -2. The sub context menu items can be added by defining the collection of `MenuItems` for `Items` Property in `ContextMenuItemModel`. +The Syncfusion® Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability. -3. Use the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event to handle actions for each menu item. +To configure sub-context menu items: +1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property with a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects. +2. Add sub-items by specifying the collection for the Items property in `ContextMenuItemModel`. +3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. -The following example demonstrates how to create a sub context menu titled **Clipboard**, with sub-items **Copy** and **Copy With Header**. The corresponding actions are triggered when the `ContextMenuItemClicked` event is fired and [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) action is carried out with and without headers. +This example creates a sub-context menu titled **Clipboard**, which includes the sub-items **Copy** and **Copy With Header**. When the `ContextMenuItemClicked` event is triggered, the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method runs to copy data with or without headers. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -374,9 +358,9 @@ The following example demonstrates how to create a sub context menu titled **Cli @code { - private SfGrid Grid; - public List Orders { get; set; } - public List ContextMenuItems = new() + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private List ContextMenuItems = new() { new ContextMenuItemModel { @@ -396,15 +380,15 @@ The following example demonstrates how to create a sub context menu titled **Cli Orders = OrderData.GetAllRecords(); } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copy") { - await Grid.CopyAsync(false); + await Grid!.CopyAsync(false); } else if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -415,14 +399,14 @@ The following example demonstrates how to create a sub context menu titled **Cli public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -458,21 +442,23 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVyjfjkrhfaJLAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIiNhEqQfJGczz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Disable the context menu for specific columns in DataGrid -In certain scenarios, you may want to restrict the context menu from appearing on specific columns within the Syncfusion® Blazor DataGrid. This can be helpful to prevent actions like copying or editing on columns that contain sensitive or read-only data. +The Syncfusion® Blazor DataGrid allows restricting the context menu for individual columns, which is useful when dealing with **sensitive** or **read-only** data. -You can achieve this by using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to cancel it conditionally. +This behavior is controlled using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu appears and provides access to column details. By checking the column's **Field** property, the context menu can be conditionally disabled. -To prevent the context menu from opening on a specific column: +To disable the context menu for a specific column: -1. Handle the `ContextMenuOpen` event of the Grid and use the `Column.Field` property within the event handler to identify the target column. +1. Handle the [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ContextMenuOpen) event of the Grid. +2. Use the **args.Column.Field** property to identify the target column. +3. Set **args.Cancel = true** to prevent the context menu from opening for that column. -2. Set `Args.Cancel` as **true** to prevent the menu from opening on that column. - -The following example demonstrates how to prevent the context menu from opening when right-clicking on the **Freight** column. The [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event is used to handle actions triggered by context menu item clicks. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method will be executed for all columns except **Freight** column, where the context menu is disabled. +In this example: +- The context menu is disabled for the **Freight** column. +- The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method executes for all other columns when the **Copy with headers** option is selected. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -491,28 +477,27 @@ The following example demonstrates how to prevent the context menu from opening @code { - private SfGrid Grid; - public List Orders { get; set; } - + private SfGrid? Grid; + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) + public void OnContextMenuOpen(ContextMenuOpenEventArgs args) { - if (Args.Column.Field == "Freight") + if (args.Column.Field == "Freight") { - Args.Cancel = true; // To prevent the context menu from opening. + args.Cancel = true; } } - public async Task OnContextMenuClick(ContextMenuClickEventArgs args) + private async Task OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "copywithheader") { - await Grid.CopyAsync(true); + await Grid!.CopyAsync(true); } } } @@ -521,17 +506,16 @@ The following example demonstrates how to prevent the context menu from opening {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -567,28 +551,26 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeNTjaVhQWEiHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBSCNrOqOXtBomQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Enable or disable context menu items -The Syncfusion® Blazor DataGrid allows you to dynamically enable or disable specific context menu items using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is particularly useful in scenarios where certain actions, such as **Edit** or **Delete**, should be restricted based on the column, the data in the row, or other custom logic. +The Syncfusion® Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic. -To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to enable or disable the desired menu items dynamically. +To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows enabling or disabling menu items dynamically based on conditions. -To enable or disable context menu items dynamically, follow the steps below: +1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid. +2. Use the **args.ContextMenu.Items** collection to access the menu items. +3. Set the **Disabled** property of the required item(s) to **true** or **false** based on the defined logic. -1. Handle the `ContextMenuOpen` event of the DataGrid and use the `Args.ContextMenuObj.Items` collection within the handler to access the context menu items. - -2. Set the `Disabled` property of the desired item(s) to `true` or `false` based on your logic. - -The following example demonstrates how to dynamically enable or disable **Copy** context menu items in the Grid using the `ContextMenuOpen` event. The **Copy** item is disabled for the **ShipCity** column and enabled for other columns. +The **Copy** menu item is disabled for the **ShipCity** column and remains enabled for all other columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -601,42 +583,39 @@ The following example demonstrates how to dynamically enable or disable **Copy** @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) - { - if (Args.Column.Field == "ShipCity") // You can check condition based on your requirement. - { - Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item. - } - else + private void OnContextMenuOpen(ContextMenuOpenEventArgs args) + { + foreach (var item in args.ContextMenu.Items) { - Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item. + if (item.Text == "Copy" && args.Column.Field == nameof(OrderData.ShipCity)) + { + item.Disabled = true; + } } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -672,21 +651,21 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryDfXEqqyMSDPD?appbar=false&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrIiiZySUQfOieR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Show or hide context menu -The Syncfusion® Blazor DataGrid provides the flexibility to show or hide both default and custom context menu items. This feature allows you to customize the context menu items based on various conditions or individuals interactions. - -This can be achieved using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened , allowing you to customize context menu items visibility dynamically. +The Syncfusion® Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic. -To control the visibility of context menu items, follow the steps below: +To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows dynamic modification of menu item visibility based on defined conditions. -1. Handle the `ContextMenuOpen` event of the Grid and access the `Args.ContextMenu.Items` collection within the event handler to modify the visibility of specific menu items. +To control the visibility of context menu items: -2. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of `MenuItems` to **true** or **false**, based on your conditions +1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid. +2. Use the **args.ContextMenu.Items** collection to access the menu items. +3. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of the required item(s) to **true** or **false** based on the defined logic. -The following example demonstrates how to dynamically show or hide **Edit** context menu items in the Grid using the `ContextMenuOpen` event. The **Edit** item is disabled for the **CustomerID** column and enabled for other columns. +The **Edit** menu item is hidden for the **CustomerID** column and remains visible for all other columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -706,23 +685,21 @@ The following example demonstrates how to dynamically show or hide **Edit** cont @code { - public List Orders { get; set; } - + private List Orders { get; set; } = new List(); protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuOpen(ContextMenuOpenEventArgs Args) + private void OnContextMenuOpen(ContextMenuOpenEventArgs args) { - if (Args.Column.Field == "CustomerID") - { - Args.ContextMenu.Items[1].Hidden = true; - } - else + foreach (var item in args.ContextMenu.Items) { - Args.ContextMenu.Items[1].Hidden = false; + if (item.Text == "Edit Record" && args.Column.Field == nameof(OrderData.CustomerID)) + { + item.Hidden = true; + } } } } @@ -731,17 +708,16 @@ The following example demonstrates how to dynamically show or hide **Edit** cont {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData { - public static List Orders = new List(); + private static readonly List Orders = new(); public OrderData(int orderID, string customerID, double freight, string shipCity) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.ShipCity = shipCity; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipCity = shipCity; } public static List GetAllRecords() @@ -777,38 +753,36 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBIMWXIIKutSiPz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Access specific row details on context menu click -The Syncfusion® Blazor DataGrid allows you to interact with specific row data when a context menu item is clicked. This feature is useful when you want to perform actions like viewing, editing, or processing data from the selected row. +The Syncfusion® Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data. -You can achieve this by handling the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides access to the clicked menu item and the associated row data, enabling you to fetch and display specific details dynamically. +To achieve this, handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. The event is triggered when a context menu item is clicked and provides access to the selected row details. -Steps to access row data on context menu click: +To access row data on context menu click: 1. Define a custom context menu item using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. -2. Handle the `ContextMenuItemClicked` event to capture the selected row's data. -3. Use the `RowInfo.RowData` property from the event arguments to access the full row details. - -The following example demonstrates how to fetch specific row details when a context menu item is clicked in the Grid using the `ContextMenuItemClicked` event. The fetch data item retrieves the row information and displays it below the Grid: +2. Handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event of the grid. +3. Use the **args.RowInfo.RowData** property from the event arguments to access the full details of the selected row. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + - + @if (rowData != null) {
    @@ -821,24 +795,22 @@ The following example demonstrates how to fetch specific row details when a cont } @code { - private SfGrid Grid; - public List Orders { get; set; } - - private OrderData rowData { get; set; } + private SfGrid? Grid; + private List Orders { get; set; } = new List(); + private OrderData? rowData; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void OnContextMenuClick(ContextMenuClickEventArgs args) + private void OnContextMenuClick(ContextMenuClickEventArgs args) { if (args.Item.Id == "fetch data") { rowData = args.RowInfo.RowData; } } - } {% endhighlight %} @@ -847,36 +819,40 @@ The following example demonstrates how to fetch specific row details when a cont public class OrderData { - public static List order = new List(); - public OrderData(int OrderID, string CustomerId, string ShipCity, string ShipName) + private static readonly List Orders = new(); + + public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } + public static List GetAllRecords() { - if (order.Count == 0) + if (Orders.Count == 0) { - order.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - order.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - order.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - order.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - order.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - order.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - order.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora")); - order.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); - order.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - order.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); - order.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); - order.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora")); + Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return order; + + return Orders; } + public int OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -886,6 +862,6 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSMXVazHjnCzPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a detailed overview of available capabilities. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md index ac90524b35..3cf87076cd 100644 --- a/blazor/datagrid/data-annotation.md +++ b/blazor/datagrid/data-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Data Annotation in Blazor DataGrid | Syncfusion -description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component. +description: Learn how to use Data Annotations for validation and column metadata in Syncfusion Blazor DataGrid, including enum display and CRUD form validation. platform: Blazor control: DataGrid documentation: ug @@ -9,35 +9,71 @@ documentation: ug # Data Annotation in Blazor DataGrid -Data Annotations are used to define validation rules for model classes or properties, ensuring that data entered into an application conforms to the expected format and meets specific criteria. They also enable the display of appropriate error messages to end users. +Data annotations define validation and display rules for model classes or properties in the Syncfusion® Blazor DataGrid. These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations. -In the Syncfusion® Blazor DataGrid, Data Annotations are leveraged to automatically map these validation rules to the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) properties. This integration provides seamless data validation during editing operations within the Grid. +When the DataGrid is bound to a model, data annotations automatically map to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) settings. This enables built-in validation and metadata display during CRUD operations. -To enable Data Annotations for validation in a Grid, you need to refer the **System.ComponentModel.DataAnnotations** namespace in your Blazor application. Once enabled, the Grid automatically uses the data annotations applied to your model class properties to perform data validation. +To enable data annotation in the Blazor DataGrid: -The following table lists the data annotation attributes supported in the Grid: +1. Add the **System.ComponentModel.DataAnnotations** namespace in the Blazor application. +2. Bind the DataGrid to a model using `TValue` and [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). +3. Apply annotation attributes to model properties to enforce validation and display rules during CRUD operations. + +### Supported Data Annotation Attributes + +The tables categorize supported attributes by display, formatting, metadata, and validation functionality. + +### Display Attributes + +Use **Display** attributes to control how column headers, ordering, and metadata appear in the grid interface. + +| Attribute Name | Properties | Functionality | +|----------------|------------|---------------| +| Display | Name | Sets the header text for the DataGrid column | +| Display | ShortName | Sets a shorter version of the header text | +| Display | AutoGenerateField | Prevents the column from being auto-generated | +| Display | AutoGenerateFilter | Disables filtering for the column | +| Display | Description | Sets tooltip text shown on column ellipsis hover | +| Display | Order | Defines the display order of the column | + +### DisplayFormat Attributes + +Apply **DisplayFormat** attributes when column values require specific formatting or null-handling behavior. | Attribute Name | Properties | Functionality | -|---------------|------------|--------------| -| Display | Name | Sets the header text for the Grid column | -| Display | ShortName | Sets a shorter version of the header text for the Grid column | -| Display | AutoGenerateField | Prevents the column from being auto-generated in the Grid | -| Display | AutoGenerateFilter | Specifies whether filtering should be disabled for the column | -| Display | Description | Sets the tooltip text displayed when hovering over the column ellipsis | -| Display | Order | Defines the display order priority of the Grid column | -| DisplayFormat | FormatString | Sets the format for displaying data in the column | -| DisplayFormat | ApplyFormatInEditMode | Determines whether the format should be applied during edit mode | -| DisplayFormat | NullDisplayText | Sets the text to be displayed when the value of the property is null | -| DisplayFormat | ConvertEmptyStringToNull | Determines whether empty string values should be converted to null in the user interface | -| DisplayFormat | NeedsHtmlEncode | Sets whether HTML encoding should be disabled for a particular column | -| ScaffoldColumnAttribute | Scaffold | Sets whether the column is visible in the user interface | -| EditableAttribute | ReadOnly | Sets whether the column allows editing | -| Key | Key | Marks a column as the primary key in the Grid | -| Validation Attributes:

    1. RequiredAttribute
    2. StringLengthAttribute
    3. RangeAttribute
    4. RegularExpressionAttribute
    5. MinLengthAttribute
    6. MaxLengthAttribute
    7. EmailAddressAttribute
    8. CompareAttribute
    | | These validation attributes are used as `validation rules` in Grid CRUD operations | - -> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the DisplayName attribute and `HeaderText` are assigned to a field in the Grid model class for a specific column, the `HeaderText` value will be prioritized and displayed in the Grid header. - -The following sample code demonstrates how to use data annotations in the Grid: +|----------------|------------|---------------| +| DisplayFormat | FormatString | Sets the display format for column data | +| DisplayFormat | ApplyFormatInEditMode | Applies format during edit mode | +| DisplayFormat | NullDisplayText | Displays custom text when the value is null | +| DisplayFormat | ConvertEmptyStringToNull | Converts empty strings to null in the UI | +| DisplayFormat | HtmlEncode | Enables or disables HTML encoding for display | + +### Other Metadata Attributes + +Use these attributes to manage column visibility, editing behavior, and key definitions. + +| Attribute Name | Properties | Functionality | +|----------------|------------|---------------| +| ScaffoldColumnAttribute | Scaffold | Controls column visibility in the UI | +| ReadOnlyAttribute | IsReadOnly | Prevents editing of the column | +| Key | Key | Marks the column as the primary key | + +### Validation Attributes + +Add validation attributes to enforce rules that display inline Blazor DataGrid validation messages during CRUD operations. + +- RequiredAttribute +- StringLengthAttribute +- RangeAttribute +- RegularExpressionAttribute +- MinLengthAttribute +- MaxLengthAttribute +- EmailAddressAttribute +- CompareAttribute + +> When both the `Display` attribute’s `Name` and the column’s `HeaderText` property are defined, the `HeaderText` value takes precedence and is shown in the column header. + +The `Display` attribute can be used to show user-friendly labels for enum values. This improves readability by replacing raw enum values with descriptive names. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -45,12 +81,12 @@ The following sample code demonstrates how to use data annotations in the Grid: @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.DropDowns @using System.Reflection -@using System.ComponentModel.DataAnnotations; +@using System.ComponentModel.DataAnnotations - + @@ -58,9 +94,8 @@ The following sample code demonstrates how to use data annotations in the Grid: @{ - var Order = (context as Order); - - + var CurrentOrder = (context as Order); + } @@ -70,56 +105,60 @@ The following sample code demonstrates how to use data annotations in the Grid: @code { - public List Orders { get; set; } - public List DropDownData = new List(); + private List Orders { get; set; } + private List DropDownData { get; } = new(); protected override void OnInitialized() { - Random rnd = new Random(); - var values = Enum.GetValues(typeof(Status)); - foreach (Status item in Enum.GetValues(typeof(Status))) + var Rnd = new Random(); + var Values = Enum.GetValues(typeof(Status)); + + foreach (Status Item in Values) { - DropDownData.Add(new Data { Type = GetDisplayName(item), Value = item }); + DropDownData.Add(new Data { Type = GetDisplayName(Item), Value = Item }); } - Orders = Enumerable.Range(1, 75).Select(x => new Order() + + Orders = Enumerable.Range(1, 75).Select(x => new Order { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[new Random().Next(5)], + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[Rnd.Next(5)], Freight = 2.1 * x, OrderDate = DateTime.Now.AddDays(-x), - ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)], - Verified = (Status)(values.GetValue(rnd.Next(values.Length))), + ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[Rnd.Next(5)], + Verified = (Status)Values.GetValue(Rnd.Next(Values.Length)), }).ToList(); } - public static string GetDisplayName(Enum enumValue) + private static string GetDisplayName(Enum EnumValue) { - string displayName; - displayName = enumValue.GetType() - .GetMember(enumValue.ToString()) + var DisplayName = EnumValue.GetType() + .GetMember(EnumValue.ToString()) .FirstOrDefault() .GetCustomAttribute()? .GetName(); - if (String.IsNullOrEmpty(displayName)) + + if (string.IsNullOrEmpty(DisplayName)) { - displayName = enumValue.ToString(); + DisplayName = EnumValue.ToString(); } - return displayName; + return DisplayName; } - public enum Status + + internal enum Status { [Display(Name = "Yeah")] Yes = 0, [Display(Name = "Nope")] No = 1 } - public class Data + + internal sealed class Data { public string Type { get; set; } public Status Value { get; set; } } - public class Order + internal sealed class Order { // Sets column as primary key. [Key] @@ -128,21 +167,26 @@ The following sample code demonstrates how to use data annotations in the Grid: // Sets header text to the column. [Display(ShortName = "ID")] public int OrderID { get; set; } + [Display(Name = "CustomerID", Description ="List of Customers")] // Sets column as required and error message to be displayed when empty. [Required(ErrorMessage = "Field should not be empty")] [DisplayFormat(NullDisplayText = "Empty", ConvertEmptyStringToNull = true)] - public string? CustomerID { get; set; } + public string CustomerID { get; set; } + // Sets data type of column as Date. [DataType(DataType.Date)] [Display(Name = "Order Date")] // Sets column as read only. [Editable(false)] public DateTime? OrderDate { get; set; } + [Display(Name = "Freight", AutoGenerateFilter = false)] public double? Freight { get; set; } - [ScaffoldColumn(scaffold:false)] + + [ScaffoldColumn(false)] public string ShipCity { get; set; } + public Status Verified { get; set; } } } @@ -150,12 +194,8 @@ The following sample code demonstrates how to use data annotations in the Grid: {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -The following image shows how Data Annotations are applied to Grid columns in a Blazor application: - -![Data Annotation in Grid](./images/blazor-datagrid-data-annotation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijigsHQsZoWd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The **Verified** column displays the `Enum` member using the `Display` attribute name, enhancing user experience by rendering a human-readable label instead of the raw enum value. +![Data annotations in DataGrid](./images/blazor-datagrid-data-annotation.png) -> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its features. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> Refer to the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application. \ No newline at end of file diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 1645ff1236..a76f127b80 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in Blazor DataGrid | Syncfusion -description: Learn all about sorting data-bound columns, single and multiple, in Syncfusion Blazor DataGrid component. +description: Explore sorting in Syncfusion Blazor DataGrid including single/multi-column sort, initial sort, custom icons, foreign key sorting, and sorting events. platform: Blazor control: DataGrid documentation: ug @@ -9,97 +9,107 @@ documentation: ug # Sorting in Blazor DataGrid -The Syncfusion® Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. +The Syncfusion® Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component. -To know about how to **Sorting** in Grid, you can check this video. +Sorting can be applied in two ways: +- **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header. +- **Descending Order**: Arranges values from largest to smallest (e.g., Z to A or 100 to 1). A downward arrow (↓) appears next to the header. {% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %} -To sort a particular column in the Grid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**. +## Sort via UI + +Interact with column headers to sort data directly. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click sorts ascending. + + +|Action | Result | +|------------------------------|--------------------------------------------------| +| Click header once | Sorts in ascending order (↑ icon appears) | +| Click header again | Sorts in descending order (↓ icon appears) | +| Click header a third time | Clears sorting for that column(no icon) | + {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Grid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction. -> * You can apply and clear sorting by using the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) methods. -> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. + ## Initial sorting -By default, the Grid does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). This feature is helpful when you want to display your data in a specific order when the Grid is first loaded. +By default, the Syncfusion® Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). -The following example demonstrates how to set the **GridSortSettings** of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`. +In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @@ -110,84 +120,78 @@ The following example demonstrates how to set the **GridSortSettings** of the ` - - - - + + + + - @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The initial sorting defined in the `GridSortSettings` of the `Columns` will override any sorting applied through user interaction. +> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction. ## Multi-column sorting -The Syncfusion® Blazor DataGrid allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways. +The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**. -To clear multi-column sorting for a particular column, press the "Shift + mouse left click". +**How Multi-Column Sorting Works** -> * The `AllowSorting` must be **true** while enabling multi-column sort. -> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting. +When multi-sorting is enabled: +- Click a column header to apply sorting to that column. +- Hold Ctrl (or Command on macOS) and click additional column headers to include them in the sort sequence. +- Press Shift and click a column header to remove it from the multi-column sort configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -195,158 +199,140 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } + } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); - public class OrderData + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() - { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + public static List GetAllRecords() + { + if (Orders.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } + return Orders; + } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; - } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - } {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Prevent sorting for particular column +## Disabling sorting for specific column -The Syncfusion® Blazor DataGrid provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process. +The Syncfusion® Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted. -It can be achieved by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the particular column to **false**. +To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. -The following example demonstrates, how to disable sorting for **CustomerID** column. +In this configuration, sorting is disabled for the **CustomerID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - } -} + } +} {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing sorting functionality with the AllowUnsort property +## Controlling Unsort behavior in Blazor DataGrid -When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to **false** in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html), the Grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the Grid to its original unsorted layout through column header clicks. - -In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**. +The Syncfusion® Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). +When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -355,84 +341,68 @@ In the following example, this is demonstrated by preventing the Grid from enter - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort order - -By default, the sorting order will be as **Ascending -> Descending -> None**. - -When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting. - ## Custom sorting -The Syncfusion® Blazor DataGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5). - +The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer implementation, which can be created by defining a comparer class that implements the .NET [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. -The following example demonstrates how to define custom sort comparer function for the **CustomerID** column. +In this configuration, a custom comparer is assigned to the **CustomerID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -441,118 +411,109 @@ The following example demonstrates how to define custom sort comparer function f - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public class CustomComparer : IComparer + public class CustomComparer : IComparer { - public int Compare(object XRowDataToCompare, object YRowDataToCompare) + public int Compare(object? XRowDataToCompare, object? YRowDataToCompare) { - OrderData XRowData = XRowDataToCompare as OrderData; - OrderData YRowData = YRowDataToCompare as OrderData; - int XRowDataOrderID = (int)XRowData.OrderID; - int YRowDataOrderID = (int)YRowData.OrderID; - if (XRowDataOrderID < YRowDataOrderID) - { - return -1; - } - else if (XRowDataOrderID > YRowDataOrderID) - { - return 1; - } - else + if (XRowDataToCompare is not OrderData XOrder || YRowDataToCompare is not OrderData YOrder) { return 0; } + + return Nullable.Compare(XOrder.OrderID, YOrder.OrderID); } } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, double? freight, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWXBiJFYfNCrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrUWMtqggCjRVvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -> * The SortComparer function takes two parameters: a and b. The a and b parameters are the values to be compared. The function returns -1, 0, or 1, depending on the comparison result. -> * The SortComparer property will work only for local data. -> * When using the column template to display data in a column, you will need to use the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to work with the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property. +> * The **SortComparer** function receives two parameters: `a` and `b`, which represent the values to be compared. The function must return: + - **-1** if `a` should appear before `b` + - **0** if `a` and `b` are equal + - **1** if `a` should appear after `b` +> * The **SortComparer** property is supported only when using `local data`. +> * When using a `column template`, ensure the [GridColumn.Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property is defined so that SortComparer can access the corresponding field value. ## Touch interaction -When you tap the Syncfusion® Blazor DataGrid header on touchscreen devices, the selected column header is sorted. A popup ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired Grid headers. +The Syncfusion® Blazor DataGrid supports sorting through touch gestures. On touch-enabled devices, tapping a column header sorts that column. A popup icon +![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) appears to enable multi-column sorting. +To sort multiple columns, tap the popup +![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired column headers. -> The [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) should be **true** then only the popup will be shown. +> Both [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) must be true for the popup to appear. -The following screenshot represents a Grid touch sorting in the device. +This screenshot illustrates touch-based sorting in the Grid: -![Sorting in Blazor DataGrid using touch interaction.](./images/blazor-datagrid-touch-sorting.jpg) +![Sorting in Blazor DataGrid](./images/blazor-datagrid-touch-sorting.jpg) -## Sort foreign key column based on text +## Sort foreign key column -To perform sorting based on foreign key column, the `GridForeignColumn` column can be enabled by using [ForeignDataSource ](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource), [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties. +The Syncfusion® Blazor DataGrid supports sorting foreign key columns based on display text. To enable this, configure a [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) with the following properties: -**Sort foreign key column based on text for local data** +- [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) - Specifies the data source that contains foreign key values and display text. +- [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Defines the key field used for mapping. +- [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) - Specifies the display text field used for sorting and rendering. -In the case of local data in the Grid, the sorting operation will be performed based on the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property of the column. The `ForeignKeyValue` property should be defined in the column definition with the corresponding foreign key value for each row. The Grid will sort the foreign key column based on the text representation of the `ForeignKeyValue` property. +N> +* **For local data** → Sorting is performed based on the value of the `ForeignKeyValue` property (**display text**). +* **For remote data** → Sorting is performed based on the `ForeignKeyField` unless the remote service supports sorting on the display text field. -The following example demonstrates how to perform sorting by enabling a foreign key column, where the **CustomerID** column acts as a foreign column displaying the **ContactName** column from foreign data. +In this configuration, the **ContactName** field is used as the display text for the **CustomerID** foreign key column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -560,111 +521,100 @@ The following example demonstrates how to perform sorting by enabling a foreign - - - - + + + + @code { - public List GridData { get; set; } - public List customerData { get; set; } + public List GridData { get; set; } = new List(); + public List CustomerData { get; set; } = new List(); + protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); - customerData = EmployeeData.GetAllRecords(); + CustomerData = EmployeeData.GetAllRecords(); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} public class EmployeeData +{ + private static readonly List EmployeeRecords = new List(); + + public EmployeeData(int? customerId, string contactName) { - public static List customerData = new List(); - public EmployeeData() - { + CustomerID = customerId; + ContactName = contactName; + } - } - public EmployeeData(int? customerID, string contactName) - { - CustomerID = customerID; - ContactName = contactName; - } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (EmployeeRecords.Count == 0) { - if (customerData.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - customerData.Add(new EmployeeData(1, "Paul Henriot")); - customerData.Add(new EmployeeData(2, "Karin Josephs")); - customerData.Add(new EmployeeData(3, "Mario Pontes")); - customerData.Add(new EmployeeData(4, "Mary Saveley")); - customerData.Add(new EmployeeData(5, "Pascale Cartrain")); - customerData.Add(new EmployeeData(6, "Mario Pontes")); - customerData.Add(new EmployeeData(7, "Yang Wang")); - customerData.Add(new EmployeeData(8, "Michael Holz")); - customerData.Add(new EmployeeData(9, "Paula Parente")); - code += 5; - } - } - return customerData; + EmployeeRecords.Add(new EmployeeData(1, "Paul Henriot")); + EmployeeRecords.Add(new EmployeeData(2, "Karin Josephs")); + EmployeeRecords.Add(new EmployeeData(3, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(4, "Mary Saveley")); + EmployeeRecords.Add(new EmployeeData(5, "Pascale Cartrain")); + EmployeeRecords.Add(new EmployeeData(6, "Mario Pontes")); + EmployeeRecords.Add(new EmployeeData(7, "Yang Wang")); + EmployeeRecords.Add(new EmployeeData(8, "Michael Holz")); + EmployeeRecords.Add(new EmployeeData(9, "Paula Parente")); } - public int? CustomerID { get; set; } - public string ContactName { get; set; } + + return EmployeeRecords; } - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,int? CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public int? CustomerID { get; set; } + public string ContactName { get; set; } +} + +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, int? customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, 1, "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, 2, "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, 3, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, 4, "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, 5, "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, 6, "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, 7, "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, 8, "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, 9, "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public int? CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public int? CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrKiWtqgIEXHWyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDBrMaWuSWBG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## How to customize sort icon -To customize the sort icon in the Syncfusion® Blazor DataGrid, you can override the default Grid classes **.e-icon-ascending** and **.e-icon-descending** with custom content using CSS. Simply specify the desired icons or symbols using the **content** property as mentioned below +The Syncfusion® Blazor DataGrid allows customizing the default sort icons by overriding the **.e-icon-ascending** and **.e-icon-descending** CSS classes. Use the **content** property to define custom icons: ```css .e-grid .e-icon-ascending::before { @@ -676,8 +626,6 @@ To customize the sort icon in the Syncfusion® - - - - + + + + @code { - public List GridData { get; set; } + public List GridData { get; set; } = new List(); protected override void OnInitialized() { @@ -717,64 +665,63 @@ In the below sample, Grid is rendered with a customized sort icon. } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } - {% endhighlight %} -{% endtabs %} + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhKCWZqBWwrwhml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sort columns externally +## Sort via programmatically -The Syncfusion® Blazor DataGrid allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click. +The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation. ### Add sort columns -To sort a column externally, you can utilize the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the Grid. This method allows you to programmatically sort a specific column based on your requirements. +The DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings. -The following example demonstrates how to add sort columns to a Grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters. +**Sorting a Single Column** + +Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the grid, allowing it to add the new sort condition alongside existing ones. + +| Parameter | Type | Description | +|----------------|-------------------|-----------------------------------------------------------------------------| +| fieldName | string | Specifies the column name to be sorted. If the column name is invalid or misspelled, the sort will fail silently without throwing error. | +| direction | SortDirection | Defines the sort direction. Possible values: **Ascending, Descending**. | +| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -783,31 +730,27 @@ The following example demonstrates how to add sort columns to a Grid. It utilize @using Syncfusion.Blazor.DropDowns
    - - + +

    - - + +

    +
    - ADD SORT COLUMN + ADD SORT COLUMN
    - - - - - - + - + @@ -815,127 +758,292 @@ The following example demonstrates how to add sort columns to a Grid. It utilize @code { - public List GridData { get; set; } + private List gridData { get; set; } + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; + private string[] enumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); + private SortDirection dropDownDirection { get; set; } = SortDirection.Ascending; + + protected override void OnInitialized() + { + gridData = OrderData.GetAllRecords(); + } + + private List ColumnList = new List + { + new ColumnItem { ID = "OrderID", Value = "OrderID" }, + new ColumnItem { ID = "CustomerID", Value = "CustomerID" }, + new ColumnItem { ID = "Freight", Value = "Freight" } + }; + + private async Task AddSortColumn() + { + await grid.SortColumnAsync(dropDownValue, dropDownDirection); + } + + private class ColumnItem + { + public string ID { get; set; } + public string Value { get; set; } + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderID, string customerID, double? freight, string shipName) + { + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + - public SfGrid? Grid { get; set; } +**Sort Multiple Columns** - public string DropDownValue { get; set; } = "OrderID"; +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of [SortColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortColumn.html#Syncfusion_Blazor_Grids_SortColumn_Field) objects, each specifying the column name and sort direction. - public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection)); +| Parameter | Type | Description | +|------------------|-------------------------|--------------------------------------------------------------| +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Add Sort Column + + + + + + + + + - public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending; +@code { + public List GridData { get; set; } = new List(); + private SfGrid? grid { get; set; } + private List sortColumns { get; set; } = new List(); protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - List LocalData = new List + private async Task ApplyMultiColumnSort() { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "Freight", Value= "Freight" }, - }; + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending }); + await grid!.SortColumnsAsync(sortColumns); + } +} - List LocalData1 = new List - { - new Direction() { ID= "Ascending", Value= "Ascending" }, - new Direction() { ID= "Descending", Value= "Descending" }, +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + private static readonly List Orders = new List(); - }; + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public class Columns + public static List GetAllRecords() { - public string ID { get; set; } - public string Value { get; set; } + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; } - public class Direction + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> When sorting is applied again using `SortColumnsAsync`, the new sort settings are added to the existing ones. This means previously sorted columns will remain sorted unless explicitly removed or overridden. + +**Sort Multiple Columns and Clear Previous Sort** + +The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns. + +| Parameter | Type | Description | +|---------------------|-------------------------|-----------------------------------------------------------------------------| +| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. | +| clearPreviousSort | bool | To apply a new sort and remove any existing sort settings, enable the option to clear previous sorting. When this option is set to true, all current sort conditions will be removed before applying the new ones. This ensures that only the specified columns are sorted, rather than combining with any existing sort configuration. | + +In this example, the grid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Apply New Sort + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + private SfGrid? Grid { get; set; } + public List sortColumns { get; set; } = new List(); + + protected override void OnInitialized() { - public string ID { get; set; } - public string Value { get; set; } + GridData = OrderData.GetAllRecords(); } - public async Task AddsortColumn() + private async Task ApplyNewSort() { - await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true); + sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = Syncfusion.Blazor.Grids.SortDirection.Descending }); + sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = Syncfusion.Blazor.Grids.SortDirection.Ascending }); + await Grid!.SortColumnsAsync(sortColumns, true); } } {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import")); - code += 5; - } - } - return Orders; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipName { get; set; } - public double? Freight { get; set; } + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBgsWDKBXuYpcUi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Remove sort columns +### Clear sorting +The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement. -To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid. This method allows you to remove the sorting applied to a specific column. +**Clear sorting for specific Column** -The following example demonstrates how to remove sort columns. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column field names and clears their sort settings. + +| Parameter | Type | Description | +|---------------|-------------------|--------------------------------------------------------------| +| columnNames | List | A list of column field names whose sorting should be removed. | + +In the following example, the grid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.DropDowns
    - - - + + +

    - REMOVE SORT COLUMN + Remove Sort Column
    - + @@ -943,110 +1051,95 @@ The following example demonstrates how to remove sort columns. It utilizes the [ - - - - + + + + @code { - public List GridData { get; set; } - - public SfGrid? Grid { get; set; } - - public string DropDownValue { get; set; } = "OrderID"; + private List GridData { get; set; } = new(); + private SfGrid? grid { get; set; } + private string dropDownValue { get; set; } = "OrderID"; + private List columns { get; set; } = new() + { + new ColumnMetaData { Id = "OrderID", Value = "Order ID" }, + new ColumnMetaData { Id = "CustomerID", Value = "Customer ID" }, + new ColumnMetaData { Id = "ShipCity", Value = "Ship City" }, + new ColumnMetaData { Id = "ShipName", Value = "Ship Name" }, + }; protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - List LocalData = new List + private async Task RemoveSortColumn() { - new Columns() { ID= "OrderID", Value= "OrderID" }, - new Columns() { ID= "CustomerID", Value= "CustomerID" }, - new Columns() { ID= "ShipCity", Value= "ShipCity" }, - new Columns() { ID= "ShipName", Value= "ShipName" }, - }; - - public class Columns - { - public string ID { get; set; } - public string Value { get; set; } + if (grid != null) + { + var ColumnNames = new List { dropDownValue }; + await grid.ClearSortingAsync(ColumnNames); + } } - public class Direction + private class ColumnMetaData { - public string ID { get; set; } - public string Value { get; set; } + public string Id { get; set; } = string.Empty; + public string Value { get; set; } = string.Empty; } - List listItems = new List(); - public async Task RemoveSortColumn() - { - listItems.Add(DropDownValue); - await Grid.ClearSortingAsync(listItems); - listItems.Clear(); - - } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } +public class OrderData +{ + private static readonly List Orders = new List(); - public static List GetAllRecords() + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJXWtlsYHkfUrY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +**Clear sorting for all columns** -### Clear sorting +The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state. -To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the Grid. This method clears the sorting applied to all columns in the Grid. - -The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click. +In this example, the grid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1054,10 +1147,10 @@ The following example demonstrates how to clear the sorting using `ClearSortingA @using Syncfusion.Blazor.Buttons
    - Clear Sorting + Clear Sorting
    - + @@ -1065,186 +1158,273 @@ The following example demonstrates how to clear the sorting using `ClearSortingA - - - - + + + + @code { - public List GridData { get; set; } - - public SfGrid? Grid { get; set; } + private List gridData { get; set; } = new(); + private SfGrid? grid { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); - } + gridData = OrderData.GetAllRecords(); + } - private async Task onExternalSort() + private async Task ClearAllSorting() { - await Grid.ClearSortingAsync(); + if (grid != null) + { + await grid.ClearSortingAsync(); + } } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) { - public static List Orders = new List(); - - public OrderData() + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + } + + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Sorting events + +The Syncfusion® Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling. + +1. `Sorting`: Triggered before a column is sorted. + +2. `Sorted`: Triggered after a column has been sorted. + +### Sorting + +The `Sorting` event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements. + +**Event Arguments** + +The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortingEventArgs.html) class, which includes the following properties: + +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column being sorted. | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | +| Cancel | Determines whether the sorting operation should be aborted. Setting this property to true prevents the sorting from being applied. | +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List GridData { get; set; } = new List(); + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private Task Sorting(SortingEventArgs args) + { + // Prevent sorting on OrderID column + if (args.ColumnName == "OrderID") + { + args.Cancel = true; } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + + // Change sort direction dynamically + if (args.ColumnName == "CustomerID" && args.Direction == SortDirection.Ascending) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + args.Direction = SortDirection.Descending; } - public static List GetAllRecords() + return Task.CompletedTask; + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + private static readonly List Orders = new List(); + + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUWWjKiFKHdJVl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Sorting events +### Sorted -The Syncfusion® Blazor DataGrid provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed. +The `Sorted` event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications. -1. **Sorting**: `Sorting` event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action. +**Event Arguments** -2. **Sorted**: `Sorted` event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action. +The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties: -The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message. +| Event Argument | Description | +|---------------|-------------| +| ColumnName | Represents the name of the column that was sorted. | +| Direction | Indicates the sorting direction (**Ascending** or **Descending**). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@if (show == true) +@if (showNotification) { -
    - Sort action completed for @columnName column +
    + Sorting completed for @lastSortedColumn column

    } - - + + - - - - + + + + @code { - public List GridData { get; set; } - - public string columnName { get; set; } - public bool show { get; set; } = false; + private List gridData { get; set; } = new List(); + private string lastSortedColumn { get; set; } = string.Empty; + private bool showNotification { get; set; } protected override void OnInitialized() { - GridData = OrderData.GetAllRecords(); - } - - public async Task SortingHandler(SortingEventArgs args) - { - if (args.ColumnName == "OrderID") - { - args.Cancel = true; - } + gridData = OrderData.GetAllRecords(); } - public async Task SortedHandler(SortedEventArgs args) + private Task Sorted(SortedEventArgs args) { - columnName = args.ColumnName; - show = true; + lastSortedColumn = args.ColumnName; + showNotification = true; + return Task.CompletedTask; } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData - { - public static List Orders = new List(); - - public OrderData() - { +public class OrderData +{ + private static readonly List Orders = new List(); - } - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } + public OrderData(int? orderId, string customerId, string shipCity, string shipName) + { + OrderID = orderId; + CustomerID = customerId; + ShipCity = shipCity; + ShipName = shipName; + } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Orders; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSsiZewifHMFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzNWNzLolkmHqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index 1b2c078616..11221918a4 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -1,19 +1,21 @@ --- layout: post -title: Aggregate customization in Blazor DataGrid | Syncfusion -description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more. +title: Customize aggregates in Blazor DataGrid | Syncfusion +description: Learn how to customize aggregate rows in the Syncfusion Blazor DataGrid using CSS, including footer containers and summary cells. platform: Blazor control: DataGrid documentation: ug --- -# Aggregate in Syncfusion® Blazor DataGrid +# Aggregate customization in Syncfusion Blazor DataGrid -You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements. +Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the grid. Styling options are available for: -## Customizing the aggregate root element +- **Aggregate root container:** The outer wrapper of the footer row. +- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result. -To customize the appearance of the Grid's aggregate root elements, you can use the following CSS code: +## Customize the aggregate root element +The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance: ```css .e-grid .e-gridfooter { @@ -21,13 +23,13 @@ To customize the appearance of the Grid's aggregate root elements, you can use t } ``` -In this example, the **e-gridfooter** class represents the root element of the aggregate row in the Grid footer. You can modify the `font-family` property to change the font of the aggregate root element. +Properties like **font-family**, **font-size**, and **padding** can be changed to fit the grid layout design. -![Customize aggregate root element](../images/style-and-appearance/aggregate-root-element.png) +![Aggregate footer root with custom font](../images/style-and-appearance/aggregate-root-element.png) -## Customizing the aggregate cell elements +## Customize the aggregate cell elements -To customize the appearance of the Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code: +The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor DataGrid. Apply CSS to modify their look: ```css .e-grid .e-summaryrow .e-summarycell { @@ -35,27 +37,25 @@ To customize the appearance of the Grid's aggregate cell elements (summary row c } ``` -In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements. +Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction. -![Customize aggregate cell element](../images/style-and-appearance/aggregate-cell-element.png) +![Aggregate summary cell with custom background color](../images/style-and-appearance/aggregate-cell-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @{ var aggregate = (context as AggregateTemplateContext); -
    -

    Sum: @aggregate.Sum

    -
    +
    Sum: @aggregate.Sum
    }     @@ -67,9 +67,7 @@ In this example, the **e-summaryrow** class represents the summary row containin @{ var aggregate = (context as AggregateTemplateContext); -
    -

    Max: @aggregate.Max

    -
    +
    Max: @aggregate.Max
    }     @@ -77,26 +75,22 @@ In this example, the **e-summaryrow** class represents the summary row containin     - + - - + +     @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -107,44 +101,43 @@ In this example, the **e-summaryrow** class represents the summary row containin {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public DateTime OrderDate { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public double Freight { get; } + public DateTime OrderDate { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/BNLoXStLKgmIIyaI" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNMcivWmiUmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index 2d39078f61..b0f0d2222a 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Editing customization in DataGrid | Syncfusion -description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details. +title: Customize editing in Blazor DataGrid | Syncfusion +description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor DataGrid using CSS. platform: Blazor control: DataGrid documentation: ug @@ -9,25 +9,31 @@ documentation: ug # Editing customization in Syncfusion Blazor DataGrid -You can customize the appearance of editing-related elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements. +The appearance of editing elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the editing interface: -## Customizing the edited and added row element +- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted. +- **Edit form input fields:** Displays text boxes used to enter or update values during editing. +- **Edit dialog header:** Shows the title or context of the current editing operation. +- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel. -To customize the appearance of edited and added row table elements in the Grid, you can use the following CSS code: +## Customize edited and added row elements + +The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out: ```css .e-grid .e-editedrow table, .e-grid .e-addedrow table { background-color: #62b2eb; } ``` -In this example, the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements. -![Customizing the added row element](../images/style-and-appearance/edited-added-row-element.png) -![Customizing the edited row element](../images/style-and-appearance/edited-added-row-element-2.png) +Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode. + +![Edited and added rows](../images/style-and-appearance/edited-added-row-element.png) +![Edited row styling](../images/style-and-appearance/edited-added-row-element-2.png) -## Customizing the edited row input element +## Customize edited row input elements -To customize the appearance of edited row input elements in the Grid, you can use the following CSS code: +The **.e-gridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor DataGrid. Use CSS to adjust their appearance: ```css @@ -37,40 +43,37 @@ To customize the appearance of edited row input elements in the Grid, you can us } ``` -In this example, the **.e-gridform** class represents the editing form, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property to change text color of the input elements. -![Customizing the edited and added row element](../images/style-and-appearance/edited-row-input-element.png) +Modify properties such as **font-family**, **color**, or **padding** to improve readability. + +![Edited row inputs with custom font and text color](../images/style-and-appearance/edited-row-input-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } + private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -81,56 +84,59 @@ In this example, the **.e-gridform** class represents the editing form, and the {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + Freight = freight; + ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWNCxTcuUSDfi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the edit dialog header element +## Customize the edit dialog header -To customize the appearance of the edit dialog header element in the Grid, you can use the following CSS code: +The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header: ```css @@ -139,35 +145,34 @@ To customize the appearance of the edit dialog header element in the Grid, you c } ``` -In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element. -![Customizing the edit dialog header element](../images/style-and-appearance/edit-dialog-header-element.png) +Change properties such as **background-color** to visually separate the header from the rest of the dialog content. + +![Edit dialog header with custom background color](../images/style-and-appearance/edit-dialog-header-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } + private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; protected override void OnInitialized() { @@ -179,56 +184,59 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + Freight = freight; + ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSMjiRTFXgRbNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the command column buttons +## Customize command column buttons -To customize the appearance of command column buttons such as edit, delete, update, and cancel, you can use the following CSS code: +The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor DataGrid. Use CSS to adjust their appearance: ```css @@ -240,35 +248,35 @@ To customize the appearance of command column buttons such as edit, delete, upda } ``` -In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons. -![Customize command column button](../images/style-and-appearance/commandbutton-1.png) -![Customize command column button](../images/style-and-appearance/commandbutton-2.png) +Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction. + +![Command buttons with custom delete and cancel icon colors](../images/style-and-appearance/commandbutton-1.png) +![Command buttons with custom edit and save icon colors](../images/style-and-appearance/commandbutton-2.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - - + + + - - - - + + + + - + - - @code { - private SfGrid Grid; - public List Orders { get; set; } - + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -292,49 +297,52 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); - public OrderData(int orderID, string customerID, double freight, string shipCountry) + public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry) { OrderID = orderID; CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; Freight = freight; ShipCountry = shipCountry; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, "France")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Germany")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Brazil")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "France")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Belgium")); - Orders.Add(new OrderData(10253, "HANAR", 58.17, "Brazil")); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Switzerland")); - Orders.Add(new OrderData(10255, "RICSU", 148.33, "Switzerland")); - Orders.Add(new OrderData(10256, "WELLI", 13.97, "Brazil")); - Orders.Add(new OrderData(10257, "HILAA", 81.91, "Venezuela")); - Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Austria")); - Orders.Add(new OrderData(10259, "CENTC", 3.25, "Mexico")); - Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Germany")); - Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Brazil")); - Orders.Add(new OrderData(10262, "RATTC", 48.29, "USA")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA")); } - - return Orders; + return Data; } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public string ShipCountry { get; set; } + public int OrderID { get; } + public string CustomerID { get; } + public string ShipCity { get; } + public string ShipName { get; } + public double Freight { get; } + public string ShipCountry { get; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVSMNiHTPsZJUUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index d9c71f66f2..89b38585b1 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -1,110 +1,126 @@ --- layout: post -title: Filtering customization in Blazor DataGrid | Syncfusion -description: Learn here all about filtering in Syncfusion Blazor DataGrid and more. +title: Customize filtering in Blazor DataGrid | Syncfusion +description: Learn how to style and customize the Syncfusion Blazor DataGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus. platform: Blazor control: DataGrid documentation: ug --- -# Filtering in Syncfusion® Blazor DataGrid +# Filtering customization in Syncfusion Blazor DataGrid -You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters. +The appearance of filtering elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the filtering interface: -## Customizing the filter bar cell element +- **Filter bar cell and input elements:** Used to enter filter values directly in the header row. +- **Input focus styles:** Visual highlight applied when the filter input field is focused. +- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers. +- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions. +- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering. +- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode. -To customize the appearance of the filter bar cell element in the Grid header, you can use the following CSS code: +## Customize the filter bar cell element -```css +The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance: +```css .e-grid .e-filterbarcell { background-color: #045fb4; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element in the Grid header. You can modify the `background-color` property to change the color of the filter bar cell element. -![Filter bar cell element](../images/style-and-appearance/filter-bar-cell-element.png) +Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells. -## Customizing the filter bar input element +![Filter bar cell with custom background](../images/style-and-appearance/filter-bar-cell-element.png) -To customize the appearance of the filter bar input element in the Grid header, you can use the following CSS code: +## Customize the filter bar input element +The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look: ```css - -.e-grid .e-filterbarcell .e-input-group input.e-input{ +.e-grid .e-filterbarcell .e-input-group input.e-input { font-family: cursive; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element. -![Filter bar input element](../images/style-and-appearance/filter-bar-input-element.png) +Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the grid design. -## Customizing the filter bar input focus +![Filter bar input with custom font](../images/style-and-appearance/filter-bar-input-element.png) -To customize the appearance of the filter bar input element's focus highlight, you can use the following CSS code: +## Customize the input focus -```css +The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance: -.e-grid .e-filterbarcell .e-input-group.e-input-focus{ +```css +.e-grid .e-filterbarcell .e-input-group.e-input-focus { background-color: #deecf9; } - ``` -In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight. + +Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation. ![Filter bar input focus](../images/style-and-appearance/filter-bar-input-element-focus.png) -## Customizing the filter bar input clear icon +## Customize the filter bar input clear icon -To customize the appearance of the filter bar input element's clear icon, you can use the following CSS code: +The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance: ```css - .e-grid .e-filterbarcell .e-input-group .e-clear-icon::before { content: '\e72c'; } - ``` -In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed. -![Filter bar input clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.png) +The `content` property can be updated to use a different glyph from the icon set. + +![Filter bar input with customized clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } - + + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -115,35 +131,35 @@ In this example, the **.e-clear-icon** class targets the clear icon element with {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -155,138 +171,139 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryXIXVUYyWnGdg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryMjMRrYykDUIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the Blazor DataGrid filtering icon +## Customize the filtering icon in the header -To customize the appearance of the Grid's filtering icon in the Grid header, you can use the following CSS code: +The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look: ```css - -.e-grid .e-icon-filter::before{ +.e-grid .e-icon-filter::before { content: '\e81e'; } - ``` -In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed. -![Grid filtering icon](../images/style-and-appearance/grid-filtering-icon.png) +Update the `content` value to match the desired icon glyph. -## Customizing the filter dialog content +![Header filter icon](../images/style-and-appearance/grid-filtering-icon.png) -To customize the appearance of the filter dialog's content element, you can use the following CSS code: +## Customize the filter dialog content -```css +The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance: +```css .e-grid .e-filter-popup .e-dlg-content { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content. + +Modify properties such as **background-color**, **padding**, and **border** to match the application theme. ![Filter dialog content](../images/style-and-appearance/filter-dialog-content.png) -## Customizing the filter dialog footer +## Customize the filter dialog footer -To customize the appearance of the filter dialog's footer element, you can use the following CSS code: +The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance: ```css - .e-grid .e-filter-popup .e-footer-content { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer. + +Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design. ![Filter dialog footer](../images/style-and-appearance/filter-dialog-footer.png) -## Customizing the filter dialog input element +## Customize the filter dialog input field -To customize the appearance of the filter dialog's input elements, you can use the following CSS code: +The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance: ```css - -.e-grid .e-filter-popup .e-input-group input.e-input{ +.e-grid .e-filter-popup .e-input-group input.e-input { font-family: cursive; } - ``` -In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements. -![Filter dialog input element](../images/style-and-appearance/filter-dialog-input-element.png) +Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency. -## Customizing the filter dialog button element +![Filter dialog input](../images/style-and-appearance/filter-dialog-input-element.png) -To customize the appearance of the filter dialog's button elements, you can use the following CSS code: +## Customize the filter dialog button element -```css +The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance: -.e-grid .e-filter-popup .e-btn{ +```css +.e-grid .e-filter-popup .e-btn { font-family: cursive; } - ``` -In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements. -![Filter dialog button element](../images/style-and-appearance/filter-dialog-button-element.png) +Change properties like **font-family**, **background-color**, and **border** to match the design. -## Customizing the excel filter dialog number filters element +![Filter dialog buttons](../images/style-and-appearance/filter-dialog-button-element.png) -To customize the appearance of the excel filter dialog's number filters, you can use the following CSS code: +## Customize the Excel-style number filter menu -```css +The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the number filter list in the Excel-style filter dialog. Apply CSS to change its appearance: -.e-grid .e-filter-popup .e-contextmenu-container ul{ +```css +.e-grid .e-filter-popup .e-contextmenu-container ul { background-color: #deecf9; } - ``` -In this example, the **.e-filter-popup .e-contextmenu-container** ul classes target the number filter elements within the excel filter dialog. You can modify the `background-color` property to change the color of these elements. -![Excel filter dialog number filters element](../images/style-and-appearance/excel-filter-dialog-number-filters-element.png) +Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design. + +![Excel-style filter menu](../images/style-and-appearance/excel-filter-dialog-number-filters-element.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -298,35 +315,35 @@ In this example, the **.e-filter-popup .e-contextmenu-container** ul classes tar {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -338,4 +355,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSjyjhAkUzNonV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsNixVEFSwNFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index a99346e4b3..0c27f03567 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -1,50 +1,56 @@ --- layout: post -title: Grouping customization in Blazor DataGrid | Syncfusion -description: Learn here all about grouping in Syncfusion Blazor DataGrid and more. +title: Customize grouping in Blazor DataGrid | Syncfusion +description: Learn how to style and customize the grouping UI in Syncfusion Blazor DataGrid—group headers, icons, caption rows, and indent cells with CSS tips. platform: Blazor control: DataGrid documentation: ug --- -# Grouping in Syncfusion® Blazor DataGrid +# Grouping customization in Syncfusion Blazor DataGrid -You can customize the appearance of grouping elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell. +The appearance of grouping elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the grouping interface: -## Customizing the group header +- **Group header container and text:** Displays grouped column names and allows drag-and-drop grouping actions. +- **Expand and collapse icons:** Controls used to toggle visibility of grouped rows. +- **Group caption row:** Shows summary information for each group, such as group key and item count. +- **Grouping indent cell:** Adds visual indentation to grouped rows to indicate hierarchy. -To customize the appearance of the group header element, you can use the following CSS code: +## Customize the group header + +The **.e-groupdroparea** class styles the group header area in the Blazor DataGrid. Use CSS to adjust its appearance: ```css .e-grid .e-groupdroparea { background-color: #132f49; } - ``` -In this example, the **.e-groupdroparea** class targets the group header element. You can modify the `background-color` property to change the color of the group header. + +Properties like **background-color**, **padding**, **border**, and **font** can be changed to fit the grid layout design. ![Group header](../images/style-and-appearance/group-header.png) -## Customizing the group expand or collapse icons +## Customize the expand and collapse icons -To customize the appearance of the group expand/collapse icons in the Grid, you can use the following CSS code: +The **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes define the expand and collapse icons in grouped rows. Apply CSS to modify their look: ```css -.e-grid .e-icon-gdownarrow::before{ - content:'\e7c9' - } -.e-grid .e-icon-grightarrow::before{ - content:'\e80f' +.e-grid .e-icon-gdownarrow::before { + content: '\e7c9'; +} + +.e-grid .e-icon-grightarrow::before { + content: '\e80f'; } ``` -In this example, the **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes target the expand and collapse icons, respectively. You can modify the `content` property to change the icon displayed. You can use the available [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) based on your theme. +Modify the `content`, color, or size to align with custom icon sets. Confirm that the appropriate icon font family is available so glyphs render correctly. Refer to the [Syncfusion icons](https://blazor.syncfusion.com/documentation/appearance/icons) documentation to choose glyphs for your theme. -![Group expand or collapse icons](../images/style-and-appearance/group-expand-or-collapse-icons.png) +![Expand and collapse icons](../images/style-and-appearance/group-expand-or-collapse-icons.png) -## Customizing the group caption row +## Customize the group caption row -To customize the appearance of the group caption row and the icons indicating record expansion or collapse, you can use the following CSS code: +The **.e-groupcaption** class styles the caption row, and **.e-recordplusexpand** and **.e-recordpluscollapse** classes style the record-level expand and collapse indicators: ```css .e-grid .e-groupcaption { @@ -57,13 +63,13 @@ To customize the appearance of the group caption row and the icons indicating re } ``` -In this example, the **.e-groupcaption** class targets the group caption row element, and the **.e-recordplusexpand** and **.e-recordpluscollapse** classes target the icons indicating record expansion or collapse. You can modify the `background-color` property to change the color of these elements. +Adjust properties such as **background-color**, **padding**, **border**, and **font** to maintain consistency with the rest of the grid. ![Group caption row](../images/style-and-appearance/group-caption-row.png) -## Customizing the grouping indent cell +## Customize the grouping indent cell -To customize the appearance of the grouping indent cell element, you can use the following CSS code: +The **.e-indentcell** class styles the indent cell used in grouped rows. Apply CSS to change its appearance: ```css .e-grid .e-indentcell { @@ -71,20 +77,23 @@ To customize the appearance of the grouping indent cell element, you can use the } ``` -In this example, the **.e-indentcell** class targets the grouping indent cell element. You can modify the `background-color` property to change the color of the indent cell. +Modify properties such as **background-color**, **padding**, and **border** to match the overall layout and maintain consistency. -![Grouping indent cell](../images/style-and-appearance/indent-cell.png) +![Indent cell](../images/style-and-appearance/indent-cell.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - + @@ -92,31 +101,48 @@ In this example, the **.e-indentcell** class targets the grouping indent cell el @code { - private SfGrid Grid; - public List Orders { get; set; } - public string[] Initial = (new string[] { "CustomerID" }); + private List Orders { get; set; } + private readonly string[] InitialColumns = { "CustomerID" }; protected override void OnInitialized() { @@ -128,40 +154,40 @@ In this example, the **.e-indentcell** class targets the grouping indent cell el {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -173,4 +199,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBeXyjLAcEEhVUs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSCDinhwfxPloP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index 942d6c0e5a..52426929c7 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,59 +1,62 @@ --- layout: post -title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header in Syncfusion Blazor DataGrid and more. +title: Header styling and visibility in Blazor DataGrid | Syncfusion +description: Learn how to style and hide the Syncfusion Blazor DataGrid header using CSS—customize header bar, cells, text, with CSS isolation tips. platform: Blazor control: DataGrid documentation: ug --- -# Header in Syncfusion® Blazor DataGrid +# Header customization in Syncfusion Blazor DataGrid -You can customize the appearance of the header elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the Grid header, header cell, and header cell div element. +The appearance of header elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the header interface: -## Customizing the Blazor DataGrid header +- **Header container**: The outer wrapper that holds all column headers. +- **Header cells**: Individual containers for each column title and associated icons. +- **Header text container**: The inner element that holds the header text content. -To customize the appearance of the Grid header root element, you can use the following CSS code: +## Customize the Blazor DataGrid header -```css +The **.e-gridheader** class styles the header container in the Blazor DataGrid. Use CSS to adjust its appearance: +```css .e-grid .e-gridheader { border: 2px solid green; } ``` -In this example, the **.e-gridheader** class targets the Grid header root element. You can modify the `border` property to change the style of the header border. This customization allows you to override the thin line between the header and content of the Grid. + +Style Properties like **border**, **padding**, and **background-color** can be changed to fit the grid layout design. ![Grid header](../images/style-and-appearance/grid-header.png) -## Customizing the Blazor DataGrid header cell +## Customize the Blazor DataGrid header cell -To customize the appearance of the Grid header cell elements, you can use the following CSS code: +The **.e-headercell** class styles individual header cells in the Blazor DataGrid. Apply CSS to modify its look: ```css - .e-grid .e-headercell { color: #ffffff; background-color: #1ea8bd; } - ``` -In this example, the **.e-headercell** class targets the header cell elements. You can modify the `color` and `background-color` properties to change the text color and background of the header cells. + +Properties such as **color**, **background-color**, **font**, and alignment can be adjusted to align with the grid design. ![Grid header cell](../images/style-and-appearance/grid-header-cell.png) -## Customizing the Blazor DataGrid header cell div element +## Customize the Blazor DataGrid header cell div element -To customize the appearance of the Grid header cell div element, you can use the following CSS code: +The **.e-headercelldiv** class styles the text container inside each header cell. Apply CSS to change its appearance: ```css - .e-grid .e-headercelldiv { font-size: 15px; font-weight: bold; color: darkblue; } ``` -In this example, the **.e-headercelldiv** class targets the div element within the header cell. You can modify the `font-size`, `font-weight`, `color` properties to change the font size, font-weight and color of the header text content. + +Change properties like **font-size**, **font-weight**, and **color** to highlight the header text and improve clarity. ![Grid header cell div element](../images/style-and-appearance/grid-header-cell-div-element.png) @@ -62,34 +65,33 @@ In this example, the **.e-headercelldiv** class targets the div element within t @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -101,35 +103,35 @@ In this example, the **.e-headercelldiv** class targets the div element within t {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -141,44 +143,50 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBoNSXVUGazWuEg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBSiDWnrSSbAdxE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Hide Blazor DataGrid header +## Hide the Blazor DataGrid header -In the Syncfusion® Blazor DataGrid, the header row (which displays the column titles) can be hidden using simple CSS styles. +The **.e-gridheader .e-columnheader** class combination targets the column header row in the Blazor DataGrid. Use CSS to hide the header: + +```css +.e-grid .e-gridheader .e-columnheader { + display: none; +} +``` -Apply the following CSS to your application. This will completely hide the column headers of every Grid on the page: +To hide the header for a specific grid only, apply the style using the grid’s ID: ```css - +#Grid.e-grid .e-gridheader .e-columnheader { + display: none; +} ``` + +> Hiding headers also removes visual elements such as sorting arrows, filter icons, and column menu buttons. This may affect accessibility. If headers are hidden, ensure alternative labels are provided using attributes like `aria-label` or `aria-labelledby`. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -189,35 +197,35 @@ Apply the following CSS to your application. This will completely hide the colum {% endhighlight %} {% highlight c# tabtitle="OrderDetails.cs" %} -public class OrderDetails +internal sealed class OrderDetails { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderDetails(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderDetails(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderDetails(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderDetails(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderDetails(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderDetails(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderDetails(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderDetails(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderDetails(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderDetails(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderDetails(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderDetails(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderDetails(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderDetails(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderDetails(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderDetails(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderDetails(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderDetails(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderDetails(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderDetails(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderDetails(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -229,6 +237,4 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVoDohZJpGSPqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -N> If you want to hide the header for particular Grid, then you can apply the above styles to that Grid using the ID (#Grid.e-grid .e-gridheader .e-columnheader) property value. \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXroMtixVyHRNvjg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 0b0bbe9d12..98ddbf65f9 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,19 +1,25 @@ --- layout: post -title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging in Syncfusion Blazor DataGrid and more. +title: Pager styling and customization in Blazor DataGrid | Syncfusion +description: Learn how to style the Syncfusion Blazor DataGrid pager using CSS—customize container, buttons, numeric items, and page indicator. platform: Blazor control: DataGrid documentation: ug --- -# Paging in Syncfusion® Blazor DataGrid +# Paging customization in Syncfusion Blazor DataGrid -You can customize the appearance of the paging elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element. +The appearance of paging elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the pager interface: -## Customizing the Blazor DataGrid pager root element +- **Root container:** The outermost wrapper that holds all pager content. +- **Pager container:** The inner layout that positions the controls. +- **Navigation buttons:** Commands for first, previous, next, and last page navigation. +- **Numeric page indicators:** Indicators that jump directly to specific pages. +- **Current page indicator:** The highlight that marks the active numeric page button. -To customize the appearance of the Grid pager root element, you can use the following CSS code: +## Customize the pager root element + +The **.e-gridpager** class styles the pager root element in the Blazor DataGrid. Use CSS to adjust its appearance: ```css .e-grid .e-gridpager { @@ -21,13 +27,14 @@ To customize the appearance of the Grid pager root element, you can use the foll background-color: #deecf9; } ``` -In this example, the **.e-gridpager** class targets the pager root element. You can modify the `font-family` to change the font family and `background-color` property to change the background color of the pager. -![Grid pager root element](../images/style-and-appearance/grid-pager-root-element.png) +Properties like **font-family**, **background-color**, and spacing-related styles can be changed to fit the grid layout design. + +![Pager root element](../images/style-and-appearance/grid-pager-root-element.png) -## Customizing the Blazor DataGrid pager container element +## Customize the pager container element -To customize the appearance of the Grid pager container element, you can use the following CSS code: +The **.e-pagercontainer** class styles the pager container in the Syncfusion® Blazor DataGrid. Apply CSS to modify its look: ```css .e-grid .e-pagercontainer { @@ -36,13 +43,13 @@ To customize the appearance of the Grid pager container element, you can use the } ``` -In this example, the **.e-pagercontainer** class targets the pager container element. You can modify the `border` property and `font-family` property to change the border color and font family of the pager container. +Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the grid design. -![Grid pager container element](../images/style-and-appearance/grid-pager-container-element.png) +![Pager container element](../images/style-and-appearance/grid-pager-container-element.png) -## Customizing the Blazor DataGrid pager navigation elements +## Customize the pager navigation elements -To customize the appearance of the Grid pager navigation elements, you can use the following CSS code: +The **.e-prevpagedisabled**, **.e-prevpage**, **.e-nextpage**, **.e-nextpagedisabled**, **.e-lastpagedisabled**, **.e-lastpage**, **.e-firstpage**, and **.e-firstpagedisabled** classes define the appearance of the pager navigation buttons in the Blazor DataGrid. Apply CSS to customize their styling: ```css .e-grid .e-gridpager .e-prevpagedisabled, @@ -57,34 +64,34 @@ To customize the appearance of the Grid pager navigation elements, you can use t } ``` -In this example, the classes **.e-prevpagedisabled, .e-prevpage, .e-nextpage, .e-nextpagedisabled, .e-lastpagedisabled, .e-lastpage, .e-firstpage,** and **.e-firstpagedisabled** target the various pager navigation elements. You can modify the `background-color` property to change the background color of these elements. +Adjust properties like **background-color** to match the design, while keeping clear focus styles for accessibility. -![Grid pager navigation elements](../images/style-and-appearance/grid-pager-navigation-element.png) +![Pager navigation elements](../images/style-and-appearance/grid-pager-navigation-element.png) -## Customizing the Blazor DataGrid pager page numeric link elements +## Customize the pager numeric button elements -To customize the appearance of the Grid pager current page numeric link elements, you can use the following CSS code: +The **.e-numericitem** class styles the numeric page buttons in the Blazor DataGrid. Apply CSS to change their appearance: ```css .e-grid .e-gridpager .e-numericitem { background-color: #5290cb; color: #ffffff; cursor: pointer; - } - +} + .e-grid .e-gridpager .e-numericitem:hover { background-color: white; - color: #007bff; + color: #007bff; } ``` -In this example, the **.e-numericitem** class targets the page numeric link elements. You can modify the `background-color`, `color` properties to change the background color and text color of these elements. +Modify properties such as **background-color**, **color**, and **hover** effects to improve clarity and interaction. -![Grid pager page numeric link elements](../images/style-and-appearance/pager-page-numeric-link-elements.png) +![Pager numeric button elements](../images/style-and-appearance/pager-page-numeric-link-elements.png) -## Customizing the Blazor DataGrid pager current page numeric element +## Customize the current page numeric element -To customize the appearance of the Grid pager current page numeric element, you can use the following CSS code: +The **.e-currentitem** class styles the current page indicator in the Blazor DataGrid pager. Use CSS to adjust it: ```css .e-grid .e-gridpager .e-currentitem { @@ -93,9 +100,9 @@ To customize the appearance of the Grid pager current page numeric element, you } ``` -In this example, the **.e-currentitem** class targets the current page numeric item. You can modify the `background-color` property to change the background color of this element and `color` property to change the text color. +Change properties like **background-color** and **color** to highlight the active page. -![Grid pager current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.png) +![Current page numeric element](../images/style-and-appearance/grid-pager-current-page-numeric-element.png) {% tabs %} @@ -106,10 +113,10 @@ In this example, the **.e-currentitem** class targets the current page numeric i - + - - + + @@ -122,11 +129,10 @@ In this example, the **.e-currentitem** class targets the current page numeric i background-color: #5290cb; color: #ffffff; cursor: pointer; - } - + } .e-grid .e-gridpager .e-numericitem:hover { background-color: white; - color: #007bff; + color: #007bff; } .e-grid .e-gridpager .e-prevpagedisabled, .e-grid .e-gridpager .e-prevpage, @@ -150,7 +156,7 @@ In this example, the **.e-currentitem** class targets the current page numeric i @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -162,35 +168,35 @@ In this example, the **.e-currentitem** class targets the current page numeric i {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -202,4 +208,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVejyDhUQlhxJtR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeitMeWnMUTNeW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 43b546e79e..41ebf2a51e 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -1,26 +1,30 @@ --- layout: post -title: Selection customization in Blazor DataGrid | Syncfusion -description: Learn here all about selection in Syncfusion Blazor DataGrid and more. +title: Selection styling with CSS in Blazor DataGrid | Syncfusion +description: Learn how to style row and cell selection in Syncfusion Blazor DataGrid using CSS, with tips on isolation and selector specificity. platform: Blazor control: DataGrid documentation: ug --- -# Selection in Syncfusion® Blazor DataGrid +# Selection customization in Syncfusion Blazor DataGrid -You can customize the appearance of the selection in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background. +The appearance of selection elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for: -## Customizing the row selection background +- **Row selection background:** Highlights the entire row when selected. +- **Cell selection background:** Highlights individual cells when selected. -To customize the appearance of row selection, you can use the following CSS code: +## Customize row selection background + +The **.e-selectionbackground** class styles the background of selected rows in the DataGrid. Use CSS to modify its appearance: ```css .e-grid td.e-selectionbackground { background-color: #00b7ea; } ``` -In this example, the **.e-selectionbackground** class targets the background color of the row selection. You can modify the `background-color` property to change the background color of the selected rows. + +Properties such as **background-color**, **color**, and **font-weight** can be adjusted to match the grid’s design. ![Row selection](../images/style-and-appearance/row-selection.png) @@ -33,10 +37,10 @@ In this example, the **.e-selectionbackground** class targets the background col - + - - + + @@ -48,7 +52,7 @@ In this example, the **.e-selectionbackground** class targets the background col @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -60,35 +64,35 @@ In this example, the **.e-selectionbackground** class targets the background col {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, double freight, DateTime orderDate) + public OrderData(int orderId, string customerId, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + OrderDate = orderDate; } public static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -100,11 +104,11 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLoDeNVAaPnabCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXreMNsoWGPYQGPH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the cell selection background +## Customize cell selection background -To customize the appearance of cell selection, you can use the following CSS code: +The **.e-cellselectionbackground** class styles the background of selected cells in the DataGrid. Apply CSS to customize its appearance: ```css .e-grid td.e-cellselectionbackground { @@ -112,7 +116,7 @@ To customize the appearance of cell selection, you can use the following CSS cod } ``` -In this example, the **.e-cellselectionbackground** class targets the background color of the cell selection. You can modify the `background-color` property to change the background color of the selected cells. +Modify visual properties to align with the overall layout and improve clarity. ![Cell selection](../images/style-and-appearance/cell-selection.png) @@ -121,14 +125,14 @@ In this example, the **.e-cellselectionbackground** class targets the background @using Syncfusion.Blazor.Grids - + - + - + - - + + @@ -136,11 +140,16 @@ In this example, the **.e-cellselectionbackground** class targets the background .e-grid td.e-cellselectionbackground { background-color: #00b7ea; } + /* Optional: visible focus for cell mode */ + .e-grid td.e-focused { + outline: 2px solid #005a9e; + outline-offset: -2px; + } @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -152,35 +161,35 @@ In this example, the **.e-cellselectionbackground** class targets the background {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -192,4 +201,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtByjeXBpZNiRnBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVIWDsoivLIZrXK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index da4547c290..c62ff3366a 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -1,35 +1,40 @@ --- layout: post -title: Sorting customization in Blazor DataGrid | Syncfusion -description: Learn here all about sorting in Syncfusion Blazor DataGrid and more. +title: Sorting Icon Styling in Blazor DataGrid | Syncfusion +description: Learn how to style sorting icons in Syncfusion Blazor DataGrid using CSS, with tips on theme icon codes and CSS isolation. platform: Blazor control: DataGrid documentation: ug --- -# Sorting in Syncfusion® Blazor DataGrid +# Sorting customization in Syncfusion Blazor DataGrid -You can customize the appearance of the sorting icons and multi sorting icons in the Syncfusion® Blazor DataGrid using CSS. You can use the available Syncfusion® [icons](https://blazor.syncfusion.com/themestudio/?theme=material3) based on your theme. Here's how to do it: +The appearance of sorting indicators in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for: -## Customizing the Blazor DataGrid sorting icon +- **Ascending and descending sort icons:** Show the current sort direction in column headers. +- **Multi-sorting order indicators:** Display the order of sorting when multiple columns are sorted. -To customize the sorting icon that appears in the Grid header when sorting is applied, you can use the following CSS code: +## Customize sorting icons + +The **.e-icon-ascending** and **.e-icon-descending** classes define the icons shown in the DataGrid header when a column is sorted in `ascending` or `descending` order. Use CSS to adjust its appearance: ```css .e-grid .e-icon-ascending::before { - content: '\e7a3'; /* Icon code for ascending order */ + content: '\e7a3'; /* Ascending icon code */ } + .e-grid .e-icon-descending::before { - content: '\e7b6'; /* Icon code for descending order */ + content: '\e7b6'; /* Descending icon code */ } ``` -In this example, the **.e-icon-ascending::before** class targets the sorting icon for ascending order, and the **.e-icon-descending::before** class targets the sorting icon for descending order. + +Adjust properties such as **content**, **color**, **font-size**, and **margin** to match the grid design. Ensure the correct icon font family is loaded to display the icons properly. ![Grid sorting icon](../images/style-and-appearance/grid-sorting-icons.png) -## Customizing the Blazor DataGrid multi sorting icon +## Customize multi-sorting indicators -To customize the multi sorting icon that appears in the Grid header when multiple columns are sorted, you can use the following CSS code: +The **.e-sortnumber** class styles the numeric indicator shown when multiple columns are sorted. Apply CSS to change their appearance: ```css .e-grid .e-sortnumber { @@ -38,7 +43,7 @@ To customize the multi sorting icon that appears in the Grid header when multipl } ``` -In this example, the **.e-sortnumber** class targets the background color and font family of the multi sorting icon. You can modify the `background-color` and `font-family` properties to customize the appearance of the multi sorting icon. +Modify properties such as **background-color**, **font-family**, **font-size**, and **border-radius** to align with the grid layout. Ensure accessibility by maintaining clear contrast and focus styles. ![Grid multi sorting icon](../images/style-and-appearance/grid-multi-sorting-icon.png) @@ -50,29 +55,56 @@ In this example, the **.e-sortnumber** class targets the background color and fo - + - - + + @code { private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -84,35 +116,35 @@ In this example, the **.e-sortnumber** class targets the background color and fo {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new(); public OrderData(int orderID, string customerID, double freight, DateTime orderDate) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.Freight = freight; - this.OrderDate = orderDate; + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); - Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); - Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); - Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); - Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); - Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12))); + Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13))); + Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16))); + Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17))); + Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18))); + Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19))); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -124,4 +156,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBSXoDhUccZrPyZ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXreCDMeBDUtgbSZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index dd68ec8987..bce442ade0 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -1,57 +1,59 @@ --- layout: post -title: Style and appearance in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about style and appearance in Syncfusion Blazor DataGrid and more details. +title: Syncfusion Blazor DataGrid Styling Guide with CSS and Theme Studio +description: Learn to customize the Syncfusion Blazor DataGrid using CSS and Theme Studio, including headers, rows, alternate rows, and grid lines. platform: Blazor control: DataGrid documentation: ug --- -# Style and appearance in Syncfusion® Blazor DataGrid +# Style and appearance in Syncfusion Blazor DataGrid -The Syncfusion® Blazor DataGrid offers various ways to customize its appearance using both default CSS and custom themes. Let's go over some common approaches: +The Syncfusion® Blazor DataGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for: -**Default CSS overrides:** +- **DataGrid root element:** Defines the overall appearance of the grid container. +- **Alternate rows with frozen columns:** Applies styles to alternate rows when frozen columns are enabled. +- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells. -You can use custom CSS to override the default styles of the Grid. This allows you to change colors, fonts, paddings, and more. You can inspect the generated HTML of the Grid using browser developer tools to identify the relevant CSS classes and styles. +**Override Default Styles:** -Here's a basic example of how you can override the header background color of the Grid: +Default styles such as **colors**, **typography**, **spacing**, and **borders** can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components. ```css -/* In your control's CSS file */ .e-grid .e-headercell { background-color: #333; /* Override the header background color */ color: #fff; } ``` +Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the grid layout design and improve visual consistency. + ![Change header background](../images/style-and-appearance/header-background.png) -**Using theme studio:** +**Using Theme Studio:** -Syncfusion's Theme Studio tool allows you to create custom themes for all their controls, including the Grid. This is a more advanced approach that lets you define a comprehensive set of styles to achieve a consistent look and feel throughout your application. +Syncfusion Theme Studio provides a unified approach to style all components, including the Blazor DataGrid. -1. Visit the [Syncfusion® Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material3). -2. Select the Grid from the left panel. -3. Customize various aspects of the control's appearance, such as colors, typography, and spacing. -4. Once done, you can download the generated CSS file and include it in your Blazor project. +1. Open the [Syncfusion® Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material3). +2. Select **Grid** in the left panel. +3. Customize colors, typography, spacing, and other visual tokens. +4. Download the generated CSS and include it in the Blazor project’s site stylesheet or theme bundle. -## Customizing the Blazor DataGrid root element +## Customize the DataGrid root element -To customize the appearance of the root element of the Syncfusion® Blazor Grid, you can use CSS. Here's an example of how to modify the font family and row colors using CSS: +The **.e-grid** class styles the root container of the Blazor DataGrid. Apply CSS to modify its appearance: ```css .e-grid { - font-family: cursive; + font-family: cursive; } - ``` -![Grid root element](../images/style-and-appearance/style-font-family.png) +Properties such as f **font-family**,**background-color**, and spacing-related styles can be adjusted to align with the grid design. -The above code snippet, the **.e-grid** class targets the root element of the Grid, and the `font-family` property is set to cursive to change the font family of Grid. +![Grid root element](../images/style-and-appearance/style-font-family.png) -In the following sample, the font family of Grid content is changed to **cursive**, and the background color of rows, selected rows, alternate rows, and row hovering color is modified using the below CSS styles. +This customization applies a `cursive` font to the grid content. Additional styling can be applied to rows, alternate rows, selected rows, and hover states. Avoid using `!important` for hover styles in production environments. Instead, increase selector specificity to maintain consistent styling control. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -59,7 +61,7 @@ In the following sample, the font family of Grid content is changed to **cursive @using Syncfusion.Blazor.Grids - + @@ -70,33 +72,39 @@ In the following sample, the font family of Grid content is changed to **cursive @code { private SfGrid Grid; - public bool IsEncode { get; set; } = true; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -108,69 +116,59 @@ In the following sample, the font family of Grid content is changed to **cursive {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() + private static readonly List Data = new(); + public OrderData(int orderId, string customerId, double freight, string shipCity) { - + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; } - public OrderData(int? OrderID, string CustomerId, double? Freight, string ShipCity) + internal static List GetAllRecords() { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.Freight = Freight; - this.ShipCity= ShipCity; - } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET",32.38, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); - Orders.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); - Orders.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); - Orders.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); - Orders.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } + public double Freight { get; set; } public string ShipCity { get; set; } } - + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrStpWnJrFIGhRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLoCDCeBCPXKind?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing alternate row with Frozen columns +## Customize alternate rows with frozen columns -To customize the alternate row style in the Grid when [Frozen columns](https://blazor.syncfusion.com/documentation/datagrid/frozen-column) are enabled, you can use the following CSS code: +The **.e-altrow .e-rowcell** selector styles cells in alternate rows when [Frozen columns](https://blazor.syncfusion.com/documentation/datagrid/frozen-column) are enabled in the Blazor DataGrid. ```css .e-grid .e-altrow .e-rowcell { background-color: #E8EEFA; } - ``` -In this example, the **.e-altrow .e-rowcell** class targets the cells in alternate rows and applies a custom background color. +Adjust properties like **background-color**,**font-family**, and **border** to maintain consistent styling across frozen and movable sections. -![Grid root element](../images/style-and-appearance/style-frozon.png) +![Alternate row styling with frozen columns](../images/style-and-appearance/style-frozon.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -188,17 +186,15 @@ In this example, the **.e-altrow .e-rowcell** class targets the cells in alterna @code { private SfGrid Grid; - public bool IsEncode { get; set; } = true; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -207,63 +203,54 @@ In this example, the **.e-altrow .e-rowcell** class targets the cells in alterna } {% endhighlight %} - {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() - { + private static readonly List Data = new(); - } - - public OrderData(int? OrderID, string CustomerId, double? Freight, string ShipCity) + public OrderData(int orderId, string customerId, double freight, string shipCity) { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.Freight = Freight; - this.ShipCity= ShipCity; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET",32.38, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); - Orders.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); - Orders.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); - Orders.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); - Orders.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } + public double Freight { get; set; } public string ShipCity { get; set; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSNetLzivgmRSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLysNWSLBgVRXGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize the color of Grid lines +## Customize the color of grid lines -The Syncfusion® Blazor DataGrid allows you to personalize the appearance of Grid lines to match your application's design. +The Syncfusion® Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style. -To customize the color of Grid lines, you can apply CSS styles directly to the Grid’s structural elements such as header cells and row cells. This approach gives you full control over the color, thickness, and style of the borders between cells. +The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`. ```css /* Customize the color of Grid lines */ @@ -275,90 +262,88 @@ To customize the color of Grid lines, you can apply CSS styles directly to the G ``` -![Grid Line](../images/style-and-appearance/grid-line.png) - -The following example demonstrates how to customize the color of Grid lines while using [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property in Grid: +![Grid lines with custom borders](../images/style-and-appearance/grid-line.png) {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + - - + + @code { - public List Orders { get; set; } - + private List Orders { get; set; } + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); - } + } } {% endhighlight %} - {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); - public OrderData() - { + private static readonly List Data = new(); - } - public OrderData(int? OrderID, string CustomerID, double Freight,DateTime? OrderDate) + public OrderData(int orderId, string customerId, double freight, DateTime orderDate) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + OrderDate = orderDate; } - public static List GetAllRecords() + internal static List GetAllRecords() { - if (Orders.Count() == 0) + if (Data.Count == 0) { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 32.38,new DateTime(1996,7,4))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); - Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); - code += 5; - } + Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4))); + Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Data.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8))); + Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + Data.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); + Data.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); } - return Orders; + + return Data; } - public int? OrderID { get; set; } + + public int OrderID { get; set; } public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeXGhOqfxsRDrR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheCtiyVBIDLkTf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 585e86f921..a47a1dfba1 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -1,55 +1,57 @@ --- layout: post -title: Toolbar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more. +title: Toolbar styling in Blazor DataGrid using CSS | Syncfusion +description: Learn how to customize the Syncfusion Blazor DataGrid toolbar using CSS, including styling the toolbar container and buttons with CSS isolation tips. platform: Blazor control: DataGrid documentation: ug --- -# Toolbar in Syncfusion® Blazor DataGrid +# Toolbar customization in Syncfusion Blazor DataGrid -You can customize the appearance of the toolbar in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the toolbar root element and toolbar button element. +The appearance of toolbar elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the toolbar interface: -## Customizing the toolbar root element +- **Toolbar root container:** The outer wrapper that contains all toolbar items. +- **Toolbar buttons:** Shows interactive elements used for actions such as Add, Edit, Delete, Update, and Cancel. -To customize the appearance of toolbar root element, you can use the following CSS code: +## Customize the toolbar root element + +The **.e-toolbar-items** class styles the toolbar root container in the Blazor DataGrid. This container holds all toolbar items and can be styled using CSS: ```css .e-grid .e-toolbar-items { background-color: #deecf9; } ``` - -In this example, the **.e-toolbar-items** class targets the background color of the toolbar root element. You can modify the `background-color` property to change the background color of the toolbar. +Properties such as **background-color**, **padding**, **border**, and **box-shadow** can be modified to suit the layout design. ![Grid toolbar root element](../images/style-and-appearance/grid-toolbar-root-element.png) -## Customizing the toolbar button element - -To customize the appearance of toolbar buttons, you can use the following CSS code: +## Customize the toolbar button elements +The **.e-btn** class inside **.e-toolbar** defines the appearance of toolbar buttons in the Blazor DataGrid. Apply CSS to customize their styling: ```css .e-grid .e-toolbar .e-btn { background-color: #deecf9; } ``` - -In this example, the **.e-toolbar .e-btn** selector targets the background color of the toolbar button elements. You can modify the `background-color` property to change the background color of the toolbar buttons. +Properties such as **background-color**, **color**, **border**, **font-size**, and **padding** can be adjusted to align with the design. Ensure that customized colors meet WCAG contrast guidelines and that focus indicators remain visible for keyboard navigation. ![Grid toolbar button element](../images/style-and-appearance/grid-toolbar-button-element.png) - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -66,8 +68,7 @@ In this example, the **.e-toolbar .e-btn** selector targets the background color @code { - private SfGrid Grid; - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { @@ -79,40 +80,40 @@ In this example, the **.e-toolbar .e-btn** selector targets the background color {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +internal sealed class OrderData { - public static List Orders = new List(); + private static readonly List Data = new List(); - public OrderData(int orderID, string customerID, string shipCity, string shipName) + internal OrderData(int orderID, string customerID, string shipCity, string shipName) { - this.OrderID = orderID; - this.CustomerID = customerID; - this.ShipCity = shipCity; - this.ShipName = shipName; + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; } public static List GetAllRecords() { - if (Orders.Count == 0) + if (Data.Count == 0) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); - Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); - Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); - Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); - Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); - Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); - Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export")); + Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos")); + Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel")); + Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial")); + Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia")); + Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); } - return Orders; + return Data; } public int OrderID { get; set; } @@ -124,4 +125,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIZeXhqQdjJsjY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBysDMtSWwHRQAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/file-upload/accessibility.md b/blazor/file-upload/accessibility.md index 1b94f93478..fa035d91e4 100644 --- a/blazor/file-upload/accessibility.md +++ b/blazor/file-upload/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor File Upload component and more. +description: Learn about accessibility features in the Syncfusion Blazor File Upload component, including support for WCAG 2.2, Section 508, and ARIA standards. platform: Blazor control: File Upload documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Accessibility in Blazor File Upload Component -The [Blazor Uploader](https://www.syncfusion.com/blazor-components/blazor-file-upload) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Syncfusion [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It offers built-in ARIA accessibility support, making it compatible with screen readers and other assistive technologies. -The accessibility compliance for the Blazor Uploader component is outlined below. +The accessibility compliance for the Blazor File Upload component is outlined below: | Accessibility Criteria | Compatibility | | -- | -- | | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | | [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | +| [Right-To-Left (RTL) Support](../common/accessibility#right-to-left-rtl-support) | Yes | +| [Color Contrast Support](../common/accessibility#color-contrast-support) | Yes | | [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | | [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | @@ -30,31 +30,32 @@ The accessibility compliance for the Blazor Uploader component is outlined below margin: 0.5em 0; } +
    Yes - All features of the component meet the requirement.
    -
    Intermediate - Some features of the component do not meet the requirement.
    +
    Intermediate - Some features of the component do not fully meet the requirement.
    No - The component does not meet the requirement.
    -## Keyboard interaction +## Keyboard Navigation -The Blazor Uploader component characterized with complete ARIA accessibility support that helps to be accessible by on-screen readers and other assistive technology devices. +The Blazor Uploader component includes complete ARIA support for operation with screen readers and other assistive technologies. Focus moves predictably through interactive elements such as the browse button, file list items, and action buttons (remove, retry, and clear). Status updates (for example, upload progress and error messages) are exposed to assistive technologies. -The following are the standard keys that works on uploader component: +The following are the standard keys that work in the Uploader component: | Windows | Mac | Actions | | --- | --- | --- | -| Tab | Tab | Move focus to next element. | -| Shift + Tab | ⇧ + Tab | Move focus to previous element. | -| Enter | Enter | Triggers corresponding action to button element. | -| Esc | Esc | Close the file browser dialog alone and cancels the upload on drop the file. | +| Tab | Tab | Moves focus to the next focusable element. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous focusable element. | +| Enter | Enter | Triggers the action associated with the focused button element. | +| Esc | Esc | Closes the file selection dialog. If a file drop is in progress, it cancels the upload. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Uploader component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. +The Blazor File Upload component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing. -The accessibility compliance of the Uploader component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the Uploader component with accessibility tools. +The accessibility compliance of the File Upload component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/uploader) in a new window to evaluate the accessibility of the component with accessibility tools. -## See also +## See Also -* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Components](../common/accessibility) \ No newline at end of file diff --git a/blazor/file-upload/drag-and-drop.md b/blazor/file-upload/drag-and-drop.md new file mode 100644 index 0000000000..83392cdef6 --- /dev/null +++ b/blazor/file-upload/drag-and-drop.md @@ -0,0 +1,177 @@ +--- +layout: post +title: Drag and Drop in Blazor File Upload Component | Syncfusion +description: Learn about drag-and-drop file selection, configuring an external drop area, and related behaviors in the Syncfusion Blazor File Upload component. +platform: Blazor +control: File Upload +documentation: ug +--- + +# Drag and drop in Blazor File Upload Component + +The File Upload component supports drag-and-drop file selection. Users can drag files from the file explorer and drop them into the drop area. By default, the File Upload component acts as the drop area. The drop area is highlighted when files are dragged over it to indicate that dropping is supported. + +## Custom DropArea + +The File Upload component allows configuring an external target element as the drop area by using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The element can be specified as an HTML element reference or by using the element’s ID. + +```cshtml +@using Syncfusion.Blazor.Inputs + +
    + Drop files here to upload +
    + + + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLoiZrPzKWARfzw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Customizing Drop Area in Blazor FileUpload](./images/blazor-fileupload-drop-area-customization.gif) + +## DropEffect + +The File Upload exposes a DropEffect property that controls the cursor feedback and allowed drop operation during drag-and-drop. Set this property to Default, Copy, Move, Link, or None. Default uses the browser’s behavior. Dropped files are added to the selected files list and processed according to component settings (for example, AutoUpload, SaveUrl/RemoveUrl, AllowedExtensions, MinFileSize, and MaxFileSize). + +### Copy + +Shows a copy cursor during drag-and-drop. Dropped files are added to the File Upload’s selection without modifying the originals. File Upload proceeds based on the component configuration. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZroMDBPfgwxYYBv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Copy drop effect in Blazor FileUpload](./images/blazor-fileupload-drag-and-drop-copy.gif) + +### Move + +Shows a move cursor during drag-and-drop. Source files are not moved from their original location; the File Upload only adds them to the selection and uploads according to configuration. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBICXBPfzZPgIvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Move drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-move.gif) + +### Link + +Shows a link cursor during drag-and-drop. This changes the cursor feedback only; upload behavior remains unchanged. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBIsDLFJfLAjrAD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Link drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-link.gif) + +### None + +Prevents dropping files on the File Upload or the configured drop area. Use this when disabling drops is required regardless of validation rules. + +```cshtml + +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // here you can get dropped file data + } +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrosDhbppKYbVqC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![None drop effect in Blazor FileUpload](./images/blazor-fileupload-drop-area-none.gif) + +## Clipboard Paste + +The File Upload component supports file selection through clipboard paste operations. Click on the File Upload element and press Ctrl+V to paste files from the clipboard. The pasted files are added to the selected files list. + +```cshtml +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void onFileSelect(SelectedEventArgs args) + { + // Access pasted file data here + } +} +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBysXhPpSVDXqxx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Clipboard paste file handling in Blazor File Upload component](./images/blazor-fileupload-clipboard-paste.gif) diff --git a/blazor/file-upload/file-upload-configuration.md b/blazor/file-upload/file-upload-configuration.md new file mode 100644 index 0000000000..b5e75b5b31 --- /dev/null +++ b/blazor/file-upload/file-upload-configuration.md @@ -0,0 +1,266 @@ +--- +layout: post +title: File Upload Configuration in Blazor File Upload Component | Syncfusion +description: Checkout and learn here all about File Upload Configuration in Syncfusion Blazor File Upload component and much more. +platform: Blazor +control: File Upload +documentation: ug +--- + +# File Upload Configuration + +The Syncfusion Blazor FileUpload component offers a wide range of properties to configure its behavior and appearance. + +## ID + +The [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ID) property is used to provide a unique identifier for the FileUpload component. This is useful for referencing the component in JavaScript or CSS, and for ensuring accessibility. + +## Code Example + +```cshtml + +``` + +> Note: Ensure the `ID` is unique across your application. When using AsyncSettings, the `name` must match the controller's save method parameter name. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryjYhTgSOYvHEJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AllowedExtensions + +The [`AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions)property specifies the file types that can be uploaded. This is crucial for validating user uploads and ensuring only acceptable file formats are accepted. + +## Code Example + +```cshtml + +``` + +>Note: Multiple extensions should be separated by commas. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryjOhzKHgiZDmV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AllowMultiple + +The [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) property determines whether the user can select multiple files for upload at once. Set to `true` for scenarios where multiple documents or images need to be uploaded simultaneously. + +## Code Example + +```cshtml + +``` + +>Note: When `AllowMultiple` is `false`, only one file can be selected at a time. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVojOhTKxefALsN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## AutoUpload + +The [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property controls whether files are uploaded immediately after selection. Set to `true` for instant uploads, useful for quick submissions. + +## Code Example + +```cshtml + +``` + +If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is `false`, you'll typically need to upload a file manually on upload button click. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrStOhTKnuyPkKt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## SequentialUpload + +The [`SequentialUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_SequentialUpload)property, when [`AllowMultiple`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) is `true`, specifies whether selected files should be uploaded one after another or concurrently. Use `true` for sequential processing, which can be useful for server resource management. + +## Code Example + +```cshtml + +``` + +>Note: This property is only effective when `AllowMultiple` is `true`. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSjkLpqQTZKrlg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## DirectoryUpload + +The [`DirectoryUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_DirectoryUpload) property enables users to select and upload an entire directory instead of individual files. This is useful for uploading complex folder structures. + +## Code Example + +```cshtml + +``` + +>Note: Browser support for directory upload may vary. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeDOBfgceWwSNY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## Enabled + +The [`Enabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Enabled) property controls whether the FileUpload component is interactive or disabled. This is useful for temporarily preventing file uploads, for example, until certain form conditions are met. + +## Code Example + +```cshtml + +``` + +>Note: When disabled, users cannot interact with the upload area. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLeNkVfKcOhxybv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## MaxFileSize + +The [`MaxFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) property sets the maximum allowable size for a single file upload in bytes. This helps prevent excessively large files from being uploaded, which can impact server performance or storage. + +## Code Example + +```cshtml + @* 5 MB *@ +``` + +>Note: The value is in bytes. Make sure your server-side configuration also handles maximum file sizes appropriately. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVStkLpqlnsPFdX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +--- + +## MinFileSize + +The [`MinFileSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) property sets the minimum allowable size for a single file upload in bytes. This can be used to prevent the upload of empty or insignificant files. + +## Code Example + +```cshtml + @* 1 KB *@ +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVotaVTUYsmdyXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## EnableHtmlSanitizer + +The [`EnableHtmlSanitizer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableHtmlSanitizer) property, when set to `true`, sanitizes the file names to remove potentially harmful HTML content. This is a security measure to prevent cross-site scripting (XSS) attacks through malicious file names. + +## Code Example + +```cshtml + +``` + +>Note: It's recommended to keep this property `true` for security reasons, especially in public-facing applications. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeNYVfUOhomymd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## EnablePersistence + +The [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnablePersistence) property, when `true`, allows the component's state (e.g., uploaded files list) to be maintained even after a page reload. This improves user experience by preserving progress. + +## Code Example + +```cshtml + + +``` + +>Note: Requires unique `ID` for proper functionality. + +--- + +## EnableRtl + +The [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_EnableRtl) property enables Right-to-Left (RTL) rendering for cultures that read from right to left. This is important for internationalization and accessibility. + +## Code Example + +```cshtml + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhINEhJpCTkMvdI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## HtmlAttributes + +The [`HtmlAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property allows you to add custom HTML attributes to the root element of the FileUpload component. This is useful for applying custom styling, data attributes, or other HTML properties not directly exposed as Blazor parameters. + +## Code Example + +```cshtml + +``` + +>Note: This property accepts a `Dictionary`. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoDYrpTrbUcwZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## InputAttributes + +The [`InputAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_InputAttributes) property allows you to add custom HTML attributes specifically to the underlying `input type="file"` element within the FileUpload component. This is useful for applying browser-specific input attributes or custom event handlers. + +## Code Example + +```cshtml + +``` + +>Note: This property accepts a `Dictionary`. Be cautious not to override essential attributes managed by the component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBetuhfzUNEgeqP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +--- + +## TabIndex + +The [`TabIndex`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_TabIndex) property specifies the tab order of the FileUpload component relative to other focusable elements on the page. This is important for keyboard navigation and accessibility. + +## Code Example + +```cshtml +
    + + +``` + +>Note: A value of 0 means the element will be focused in the default tab order. Negative values remove the element from the tab order. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhotYhzzqUHHLgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +## Preloaded files + +The FileUpload component supports displaying a list of files that are already available on the server as ["UploaderUploadedFiles"](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderUploadedFiles.html#properties) files. This is useful for editing scenarios where users need to see and potentially remove existing files before uploading new ones. + +## Code Example + +```cshtml + + + + + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBytuBzpzikFnSt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + diff --git a/blazor/file-upload/file-upload-methods.md b/blazor/file-upload/file-upload-methods.md new file mode 100644 index 0000000000..38fbd88dfc --- /dev/null +++ b/blazor/file-upload/file-upload-methods.md @@ -0,0 +1,239 @@ +--- +layout: post +title: File Upload Methods in Blazor File Upload Component | Syncfusion +description: Learn about file upload methods in Syncfusion Blazor, including GetFileDetails, UploadAsync, CancelAsync, and ClearAllAsync. +platform: Blazor +control: File Upload +documentation: ug +--- + +# File Upload Methods in Syncfusion Blazor Uploader + +This section details the various methods available to interact with and manage the Syncfusion Blazor File Upload component programmatically. + +### GetFileDetails + +The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) method retrieves the details of all files currently selected or uploaded in the File Upload component. This is useful for validating file properties like size, type, and name before or after the upload process. + +**Use Case:** Imagine a scenario where you want to display a summary of selected files, including their names and sizes, before the user initiates the actual upload. [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) allows you to access this information. + +```cshtml + + + + +Process Files + +@if (fileDetails != null && fileDetails.Any()) +{ +

    Processed File Details:

    +
      + @foreach (var file in uploadedFiles) + { +
    • @file.Name (@((file.Size / 1024).ToString("F2")) KB) - @file.Type
      • + } +
    +} + +@code { + SfUploader uploader; + List uploadedFiles = new(); + List fileDetails; + + private void OnChange(UploadChangeEventArgs args) + { + uploadedFiles = args.Files.Select(f => f.FileInfo).ToList(); + } + + private void ProcessFiles() + { + if (uploadedFiles.Any()) + { + uploader.GetFileDetails(uploadedFiles); + + fileDetails = uploadedFiles; + } + } +} +``` + +> **Note:** The [`GetFileDetails`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFileDetails_System_Collections_Generic_List_Syncfusion_Blazor_Inputs_FileInfo__) method returns a `List` object, where each `FileInfo` contains properties like `Name`, `Size`, `Type`, etc., allowing for comprehensive inspection of selected files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLetYVyVNjMlOlP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload GetFileDetails Method](./images/blazor-fileupload-getfiledetails.gif) + + +## GetFilesDataAsync + +The [`GetFilesDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFilesDataAsync_System_Nullable_System_Double__) method retrieves a list of `FileInfo` objects representing the files that have been successfully uploaded through the File Upload component. This is particularly useful when you need to perform server-side operations on the uploaded files or update your UI based on the upload status. + +**Use Case:** After a user uploads multiple files, you might want to display a success message listing the names of all successfully uploaded files, or store this information in a database. [`GetFilesDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_GetFilesDataAsync_System_Nullable_System_Double__) provides the necessary data to achieve this. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Get Uploaded Files + +@if (uploadedFiles != null && uploadedFiles.Any()) +{ +

    Uploaded Files:

    +
      + @foreach (var file in uploadedFiles) + { +
    • @file.Name - @file.Status
      • + } +
    +} + +@code { + SfUploader uploader; + List uploadedFiles; + public async Task GetUploadedFiles() + { + uploadedFiles = await uploader.GetFilesDataAsync(); + // You can now process uploadedFiles, e.g., display them in a list. + } +} +``` + +> **Note:** The `GetFilesDataAsync` method returns a `List`, which includes important properties like `Name`, `Size`, `Type`, and `Status` (`Uploaded`, `Failed`, etc.) for each file that has gone through the upload process. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthoZYLzypWUmzGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload GetFilesDataAsync Method](./images/blazor-fileupload-getfilesdataasync.gif) + +## UploadAsync + +The [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) method programmatically initiates the upload process for all selected files in the File Upload component. This method is particularly useful when [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is set to `false`, allowing the user to trigger the upload manually at a specific time, such as after reviewing their selections. + +**Use Case:** Consider a scenario where users select several files, and then, after confirming their choices with a separate "Upload All" button, you want to start the file transfer. [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) provides the means to trigger this action. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Upload Selected Files + +@code { + SfUploader uploader; + + public async Task UploadFiles() + { + await uploader.UploadAsync(); + // The upload process for all selected files is now initiated. + } +} +``` + +> **Note:** When [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is set to `false`, calling [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) is essential to begin the file transfer. If [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) is `true`, files will start uploading automatically upon selection, and [`UploadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__) may not be necessary. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeXYVTezyQELFv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload UploadAsync Method](./images/blazor-fileupload-uploadasync.gif) + +## CancelAsync + +The [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CancelAsync_Syncfusion_Blazor_Inputs_FileInfo___) method allows you to programmatically cancel the upload of a specific file or all ongoing uploads within the File Upload component. This is useful for providing users with the ability to stop an upload that is in progress, for example, if they selected the wrong file or decide not to proceed. + +**Use Case:** Imagine a scenario where a large file is being uploaded, and the user realizes they picked the incorrect file. Providing a "Cancel" button that triggers [`CancelAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CancelAsync_Syncfusion_Blazor_Inputs_FileInfo___) for that specific file (or all uploads) would enhance the user experience by allowing them to halt the transfer. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Cancel All Uploads + +@code { + SfUploader uploader; + + public async Task CancelUploads() + { + // To cancel all uploads + await uploader.CancelAsync(); + + // To cancel a specific file's upload, you would need its unique ID or a way to identify it. + // For example, if you have a list of file IDs: + // await uploader.CancelAsync(fileIdToCancel); + } +} +``` + +> **Note:** To cancel a specific file's upload, you typically need to pass an identifier like a `fileInfo[]` to the CancelAsync method. Without an argument, it generally attempts to cancel all pending or in-progress uploads. The exact behavior might depend on the implementation of the Uploader component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSNkBzSzuxWFbi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload CancelAsync Method](./images/blazor-fileupload-cancelasync.gif) + +## ClearAllAsync + +The [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) method allows you to programmatically clear all selected or uploaded files from the File Upload component's internal list and UI. This is useful for resetting the component and preparing it for a new selection of files, or for cleaning up after a successful (or failed) upload operation. + +**Use Case:** After a user has successfully uploaded a batch of files, you might want to automatically clear the file list in the uploader component so they can start a new upload session without manually removing each file. [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) simplifies this process. + +```cshtml +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + + +Clear All Files + +@code { + SfUploader uploader; + + public async Task ClearFiles() + { + await uploader.ClearAllAsync(); + // All files are now removed from the component's internal state and UI. + } +} +``` + +> **Note:** [`ClearAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_ClearAllAsync) only affects the client-side representation in the File Upload component. It does not automatically delete files from the server if they have already been uploaded. Server-side deletion would require a separate call to your server-side API. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVItErIihaDlaeE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload ClearAllAsync Method](./images/blazor-fileupload-clearallasync.gif) + +## RemoveAsync + +The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method allows you to programmatically remove a specific file from the File Upload component's display and internal tracking. This method is particularly useful when you need to enable users to delete individual files from the list of selected files before or after upload, or as part of a post-upload management process. + +**Use Case:** If a user has selected several files but then decides to remove one particular file from the list before initiating the upload, [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) can be used. It's also applicable if you want to provide a delete option for individually uploaded files. + +```cshtml + + + + +Remove First File + +@code { + private SfUploader uploader; + private List uploadedFiles = new(); + + private void OnChange(UploadChangeEventArgs args) + { + uploadedFiles = args.Files.Select(f => f.FileInfo).ToList(); + } + + private async Task RemoveSpecificFile() + { + if (uploadedFiles.Any()) + { + var fileToRemove = uploadedFiles.First(); + await uploader.RemoveAsync(new[] { fileToRemove }); + } + } +} +``` + +> **Note:** The [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) method typically requires the fileInfo[] of the file you wish to remove. If [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured in [`UploaderAsyncSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html), calling [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will also trigger a server-side call to the specified [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) to handle server-side file deletion. If no [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) is configured, [`RemoveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_RemoveAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_) will only remove the file from the client-side component. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhSjYreMJJIqYvz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor FileUpload RemoveAsync Method](./images/blazor-fileupload-removeasync.gif) diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md index 6fca4b0e70..14e48a676b 100644 --- a/blazor/file-upload/getting-started-with-maui-app.md +++ b/blazor/file-upload/getting-started-with-maui-app.md @@ -50,9 +50,9 @@ To use the MAUI project templates, install the Mobile development with the .NET You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. -## Install Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add **Blazor File Upload** component in the app, install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) using the .NET CLI. {% tabs %} @@ -79,7 +79,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor +@using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs {% endhighlight %} @@ -133,16 +133,22 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A - //Blazor File Upload Component script reference. + ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor File Upload component +## Add Syncfusion® Blazor File Upload component + +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file. +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. + {% tabs %} {% highlight razor %} @@ -165,39 +171,65 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor FileUpload Component](./images/blazor-fileupload-component.png) -## Without server-side API endpoint +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} + +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} -### Save and Remove actions +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +## Use ValueChange Event + +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. + +### Code Example + +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -205,20 +237,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +## Memory stream + +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -226,109 +309,138 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. -The upload process requires save and remove action URL to manage the upload process in the server. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +## Created Event -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. + +### Code Example + +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). ## See also @@ -336,4 +448,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file +4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md index 5943ebd4bf..f74d7ecccf 100644 --- a/blazor/file-upload/getting-started-with-server-app.md +++ b/blazor/file-upload/getting-started-with-server-app.md @@ -7,11 +7,11 @@ control: FileUpload documentation: ug --- -# Getting Started with Blazor File Upload Component in Server App +# Getting Started with Blazor File Upload Component -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server Application using Visual Studio, Visual Studio Code, and the .NET CLI. -To get start quickly with Blazor File Upload, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload) sample: +To get started quickly with the Blazor File Upload, you can check out this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). {% tabcontents %} @@ -19,15 +19,15 @@ To get start quickly with Blazor File Upload, you can check on this [GitHub](htt ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +You can create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -46,7 +46,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio Code @@ -67,9 +67,9 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -103,7 +103,7 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +114,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -186,13 +186,19 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A //Blazor File Upload Component script reference. - + ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor File Upload component +## Add Syncfusion® Blazor File Upload component + +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. Add the Syncfusion® Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. @@ -211,41 +217,60 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -253,20 +278,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + + +## Memory stream -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -274,114 +350,145 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The upload process requires save and remove action URL to manage the upload process in the server. -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) \ No newline at end of file +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 53db73bd22..e40b214485 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Upload Component in Web App -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and .NET CLI. {% tabcontents %} @@ -17,7 +17,7 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio @@ -25,13 +25,11 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. -![Create Blazor Web App](images/blazor-create-web-app.png) - ## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App -To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -52,7 +50,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code @@ -63,7 +61,7 @@ Configure the appropriate interactive render mode and interactivity location whe For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight C# tabtitle="Blazor Web App" %} dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp @@ -72,17 +70,19 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} +N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). + ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight C# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.Inputs -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -103,14 +103,14 @@ N> Syncfusion® Blazor components are availa Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +## Create a Blazor Web project using .NET CLI Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. @@ -119,7 +119,7 @@ Configure the appropriate interactive render mode and interactivity location whe For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet new blazor -o BlazorApp -int Auto cd BlazorApp @@ -128,16 +128,16 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} @@ -154,7 +154,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -165,14 +165,14 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +

    Register Syncfusion® Blazor Service

    Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} -{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} +{% highlight C# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %} ... ... @@ -190,7 +190,7 @@ var app = builder.Build(); .... {% endhighlight %} -{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} +{% highlight C# tabtitle="Client (~/Program.cs)" hl_lines="2 5" %} ... using Syncfusion.Blazor; @@ -203,7 +203,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +

    Add stylesheet and script resources

    The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -217,16 +217,20 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - //Blazor File Upload Component script reference. - + + ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor File Upload component +## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -253,41 +257,60 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -295,20 +318,71 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) + -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +## Memory stream + +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. + +### Code Example + +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} + +@using Syncfusion.Blazor.Inputs +@using System.IO -Private void onRemove(RemovingEventArgs args) + + + + +@if (!string.IsNullOrEmpty(base64Image)) { - foreach(var removeFile in args.FilesData) +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; + + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) + base64Image = string.Empty; // Clear previous image + + foreach (var fileEntry in args.Files) { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) + { + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); + } + else + { + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); + } } } } @@ -316,108 +390,138 @@ Private void onRemove(RemovingEventArgs args) {% endhighlight %} {% endtabs %} -## With server-side API endpoint +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -The upload process requires save and remove action URL to manage the upload process in the server. -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here - { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + + + - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) - { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); - } - } - return Ok(); - } +

    @statusMessage

    +@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} - - - +@using Syncfusion.Blazor.Inputs +@using System.Linq + + + +

    @validationMessage

    + @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). @@ -427,4 +531,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) 3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) 4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) - +5. [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 2a500c5009..4b2ec2aca6 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -7,9 +7,9 @@ control: File Upload documentation: ug --- -# Getting Started with Blazor File Upload Component in WASM App +# Getting Started with Blazor File Upload Component -This section briefly explains about how to include [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -17,15 +17,15 @@ This section briefly explains about how to include [Blazor File Upload](https:// ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -44,11 +44,11 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). @@ -63,11 +63,11 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Press Ctrl+` to open the integrated terminal in Visual Studio Code. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -81,7 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -99,9 +99,9 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +## Create a Blazor WebAssembly project using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -112,11 +112,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor WebAssembly app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. -## Install Syncfusion® Blazor Inputs and Themes NuGet in the App +## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -Here's an example of how to add **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -128,7 +128,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -147,9 +147,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -171,7 +171,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -187,9 +187,22 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor File Upload component +## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component in the **~/Pages/Index.razor** file. +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +## Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally. + +Add the Syncfusion® Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. + +N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. + +``` +@* desired render mode define here *@ +@rendermode InteractiveServer +``` {% tabs %} {% highlight razor %} @@ -199,41 +212,60 @@ Add the Syncfusion® Blazor File Upload comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Upload component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %} +![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif) -## Without server-side API endpoint +## Use ValueChange Event -You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html). +The [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event fires when files are selected or removed from the uploader. This event is crucial for client-side processing of selected files, allowing you to access file details and their content, which is useful for previewing files or handling uploads without a server-side endpoint. -### Save and Remove actions +### Code Example -You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below. +This example demonstrates how to use the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event to save uploaded files directly to a local directory when the [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload) property is set to `true`. This is useful for scenarios where you want to process files immediately after selection without an explicit upload button. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} @using Syncfusion.Blazor.Inputs +@using System.IO + + @code { private async Task OnChange(UploadChangeEventArgs args) { try { - foreach (var file in args.Files) + foreach (var fileEntry in args.Files) { - var path = @"" + file.FileInfo.Name; - FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); - await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream); - filestream.Close(); + // Define a path where you want to save the file. + // For a Blazor Server app, this path will be on the server. + var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads"); + if (!Directory.Exists(uploadsFolder)) + { + Directory.CreateDirectory(uploadsFolder); + } + + // Construct the full file path. + var filePath = Path.Combine(uploadsFolder, fileEntry.FileInfo.Name); + + // Use a FileStream to write the uploaded file's content to the server. + await using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write)) + { + // OpenReadStream with long.MaxValue allows reading the entire stream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream); + } + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' saved successfully to '{filePath}'"); } } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine($"Error saving file: {ex.Message}"); } } } @@ -241,85 +273,70 @@ You can get the uploaded files as file stream in the [ValueChange](https://help. {% endhighlight %} {% endtabs %} -![Blazor FileUpload displays Updated Files](./images/blazor-fileupload-with-updated-files.png) +N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files. -While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below. +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% tabs %} -{% highlight cshtml %} +![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif) -Private void onRemove(RemovingEventArgs args) -{ - foreach(var removeFile in args.FilesData) - { - if (File.Exists(Path.Combine(@"rootPath", removeFile.Name))) - { - File.Delete(Path.Combine(@"rootPath", removeFile.Name)) - } - } -} -{% endhighlight %} -{% endtabs %} +## Memory stream -## With server-side API endpoint +When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system. -The upload process requires save and remove action URL to manage the upload process in the server. +### Code Example -N> * The save action is necessary to handle the upload operation. -
    * The remove action is optional, one can handle the removed files from server. +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. - -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +{% tabs %} +{% highlight razor %} -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +@using Syncfusion.Blazor.Inputs +@using System.IO -{% tabs %} -{% highlight cshtml %} + + + -[Route("api/[controller]")] -public class SampleDataController : Controller +@if (!string.IsNullOrEmpty(base64Image)) { - public string uploads = ".\\Uploaded Files"; // replace with your directory path +

    Uploaded Image Preview (Base64)

    + +} + +@code { + private string base64Image; - [HttpPost("[action]")] - public async Task Save(IFormFile UploadFiles) // Save the uploaded file here + private async Task OnValueChangeMemoryStream(UploadChangeEventArgs args) { - if (UploadFiles.Length > 0) - { - //Create directory if not exists - if (!Directory.Exists(uploads)) - { - Directory.CreateDirectory(uploads); - } + base64Image = string.Empty; // Clear previous image - var filePath = Path.Combine(uploads, UploadFiles.FileName); - if (System.IO.File.Exists(filePath)) - { - //Return conflict status code - return new StatusCodeResult(StatusCodes.Status409Conflict); - } - using (var fileStream = new FileStream(filePath, FileMode.Create)) + foreach (var fileEntry in args.Files) + { + if (fileEntry.FileInfo.Type.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) { - //Save the uploaded file to server - await UploadFiles.CopyToAsync(fileStream); + // Create a MemoryStream to hold the file content. + using var memoryStream = new MemoryStream(); + + // Copy the file's content from the upload stream to the MemoryStream. + await fileEntry.File.OpenReadStream(long.MaxValue).CopyToAsync(memoryStream); + + // Convert the MemoryStream content to a byte array. + byte[] imageBytes = memoryStream.ToArray(); + + // Convert byte array to Base64 string for display or further processing. + base64Image = Convert.ToBase64String(imageBytes); + Console.WriteLine($"Image '{fileEntry.FileInfo.Name}' loaded into MemoryStream and converted to Base64."); } - } - return Ok(); - } - - - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here - { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) + else { - //Delete the file from server - System.IO.File.Delete(filePath); + Console.WriteLine($"File '{fileEntry.FileInfo.Name}' is not an image and won't be processed for Base64 preview."); + // For non-image files, you could read their content as text or handle differently. + // Example for text file: + // memoryStream.Position = 0; // Reset stream position + // using var reader = new StreamReader(memoryStream); + // var content = await reader.ReadToEndAsync(); + // Console.WriteLine($"Content of {fileEntry.FileInfo.Name}: {content}"); } } } @@ -328,181 +345,146 @@ public class SampleDataController : Controller {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server. -{% tabs %} -{% highlight razor %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - - - -@code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) - { - // Here, you can customize your code. - } -} +![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif) -{% endhighlight %} -{% endtabs %} - -### Server-side configuration for saving and returning responses -The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats. +## Created Event -{% tabs %} -{% highlight cshtml %} +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -[Route("api/[controller]")] +### Code Example -private IHostingEnvironment hostingEnv; +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. -public SampleDataController(IHostingEnvironment env) -{ - this.hostingEnv = env; -} - -[HttpPost("[action]")] -public IActionResult Save() -{ - // for JSON Data - try - { - // Process uploaded files - var responseData = new - { - Success = true, - Message = "Files uploaded successfully", - // Additional data can be added here - }; +{% tabs %} +{% highlight razor %} - return Ok(responseData); - } - catch (Exception e) - { - var errorResponse = new - { - Success = false, - Message = "File upload failed: " + e.Message - }; +@using Syncfusion.Blazor.Inputs - return BadRequest(errorResponse); - } + + + - // for String Data - try - { - // Process string data - var data = "success"; - // Return the string data - return Content(data); - } - catch (Exception) - { - var data = "failed"; - return Content(data); - } +

    @statusMessage

    - // for File Data - try - { - // Example: Retrieve file path for stream.txt - var filePath = "stream.txt"; // Example file path - - var fullPath = Path.GetFullPath(filePath); +@code { + private string statusMessage = "Uploader not yet created."; - // Return the file - return PhysicalFile(fullPath, "text/plain"); - } - catch (Exception e) + private void OnUploaderCreated() { - return Content("Failed to retrieve file response: " + e.Message, "text/plain"); + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } - } {% endhighlight %} {% endtabs %} -### Client-side configuration for saving and returning responses +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. -The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload Created Example](images/blazor-fileupload-created.gif) + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} @using Syncfusion.Blazor.Inputs -@using System.Text.Json +@using System.Linq - - - - + + +

    @validationMessage

    @code { + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB - private void OnSuccessHandler(SuccessEventArgs args) + private void OnFileSelected(SelectedEventArgs args) { - if (args.Response is not null) // Check if the event argument is not null + validationMessage = ""; + foreach (var file in args.FilesData) { - var responseText = args.Response.ResponseText; - if (!string.IsNullOrWhiteSpace(responseText)) - { - // for JSON and File Datas - using var jsonDoc = JsonDocument.Parse(responseText); - var jsonResponse = jsonDoc.RootElement; - - if (jsonResponse.TryGetProperty("success", out var successProp)) - { - var isSuccess = successProp.GetBoolean(); - - if (isSuccess) - { - // File upload success - var message = jsonResponse.TryGetProperty("message", out var messageProp) ? messageProp.GetString() : "File uploaded successfully"; - - // Additional processing as needed - } - } - - - // for string Data - var message = responseText; - // Additional processing as needed - } + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); } } - } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif) + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor.Inputs + + + + + + +@code { + SfUploader fileobj; + private void OnFileListRenderHandler(FileListRenderingEventArgs args) + { + + } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzDsrOqbKVNviI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Allowing Specific Files in Blazor FileUpload](./images/blazor-fileupload-allow-specific-file.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload). + ## See also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) * [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) +* [How to convert images to Base64 string with Blazor File Upload](https://support.syncfusion.com/kb/article/21178/how-to-convert-images-to-base64-string-with-blazor-file-upload) diff --git a/blazor/file-upload/images/AllowMultiple.gif b/blazor/file-upload/images/AllowMultiple.gif new file mode 100644 index 0000000000..103bcb5bca Binary files /dev/null and b/blazor/file-upload/images/AllowMultiple.gif differ diff --git a/blazor/file-upload/images/AllowedExtension.gif b/blazor/file-upload/images/AllowedExtension.gif new file mode 100644 index 0000000000..89e3996ecf Binary files /dev/null and b/blazor/file-upload/images/AllowedExtension.gif differ diff --git a/blazor/file-upload/images/AutoUpload.gif b/blazor/file-upload/images/AutoUpload.gif new file mode 100644 index 0000000000..b5a5a5a44d Binary files /dev/null and b/blazor/file-upload/images/AutoUpload.gif differ diff --git a/blazor/file-upload/images/blazor-file-upload-browser.png b/blazor/file-upload/images/blazor-file-upload-browser.png new file mode 100644 index 0000000000..a294438247 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-browser.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-container.png b/blazor/file-upload/images/blazor-file-upload-container.png new file mode 100644 index 0000000000..cd52e6a7db Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-container.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-content.png b/blazor/file-upload/images/blazor-file-upload-content.png new file mode 100644 index 0000000000..2eb9452a45 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-content.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-cssclass.png b/blazor/file-upload/images/blazor-file-upload-cssclass.png new file mode 100644 index 0000000000..1ceabe3c81 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-cssclass.png differ diff --git a/blazor/file-upload/images/blazor-file-upload-file-list.gif b/blazor/file-upload/images/blazor-file-upload-file-list.gif new file mode 100644 index 0000000000..522d59e56e Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-file-list.gif differ diff --git a/blazor/file-upload/images/blazor-file-upload-progress.gif b/blazor/file-upload/images/blazor-file-upload-progress.gif new file mode 100644 index 0000000000..894bf61fa9 Binary files /dev/null and b/blazor/file-upload/images/blazor-file-upload-progress.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-basic.gif b/blazor/file-upload/images/blazor-fileupload-basic.gif new file mode 100644 index 0000000000..68ffe86d17 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-basic.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-cancelasync.gif b/blazor/file-upload/images/blazor-fileupload-cancelasync.gif new file mode 100644 index 0000000000..9a2be6fb47 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-cancelasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-clearallasync.gif b/blazor/file-upload/images/blazor-fileupload-clearallasync.gif new file mode 100644 index 0000000000..4d95090840 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-clearallasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif b/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif new file mode 100644 index 0000000000..c624727cb2 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-clipboard-paste.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-created.gif b/blazor/file-upload/images/blazor-fileupload-created.gif new file mode 100644 index 0000000000..11759f373a Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-created.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif b/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif new file mode 100644 index 0000000000..75af61547c Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drag-and-drop-copy.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif new file mode 100644 index 0000000000..ce41052662 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-customization.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif new file mode 100644 index 0000000000..a9f67392f5 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-link.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif new file mode 100644 index 0000000000..d06141df70 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-move.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif b/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif new file mode 100644 index 0000000000..c477045b95 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-drop-area-none.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-fileselected.gif b/blazor/file-upload/images/blazor-fileupload-fileselected.gif new file mode 100644 index 0000000000..8617f4b867 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-fileselected.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif b/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif new file mode 100644 index 0000000000..ff9364144e Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-getfiledetails.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif b/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif new file mode 100644 index 0000000000..ff2b997c97 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-getfilesdataasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-memorystream.gif b/blazor/file-upload/images/blazor-fileupload-memorystream.gif new file mode 100644 index 0000000000..f2146ef200 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-memorystream.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-removeasync.gif b/blazor/file-upload/images/blazor-fileupload-removeasync.gif new file mode 100644 index 0000000000..889395d97b Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-removeasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-uploadasync.gif b/blazor/file-upload/images/blazor-fileupload-uploadasync.gif new file mode 100644 index 0000000000..bf9c7e1ecc Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-uploadasync.gif differ diff --git a/blazor/file-upload/images/blazor-fileupload-valuechange.gif b/blazor/file-upload/images/blazor-fileupload-valuechange.gif new file mode 100644 index 0000000000..afd16653d8 Binary files /dev/null and b/blazor/file-upload/images/blazor-fileupload-valuechange.gif differ diff --git a/blazor/file-upload/localization.md b/blazor/file-upload/localization.md index e7c6883315..bd91e668f1 100644 --- a/blazor/file-upload/localization.md +++ b/blazor/file-upload/localization.md @@ -1,7 +1,7 @@ --- layout: post title: Localization in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Localization in Syncfusion Blazor File Upload component and much more. +description: Learn how to translate labels and tooltips in the Syncfusion Blazor File Upload component to different cultures. platform: Blazor control: File Upload documentation: ug @@ -9,4 +9,13 @@ documentation: ug # Localization in Blazor File Upload Component -[Blazor FileUpload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. \ No newline at end of file +The Syncfusion Blazor File Upload component can be localized to display static text, such as button labels and tooltips, in different languages. This is achieved by adding a resource file (`.resx`) for each culture and referencing it in your application. + +The following UI elements of the File Upload component can be localized: + +* **Browse button text:** The label for the file selection button. +* **Drop area hint:** The "Or drop files here" message. +* **File status messages:** Text indicating success, failure, or upload progress. +* **Action button tooltips:** Tooltips for buttons like "Clear" and "Upload." + +To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic. \ No newline at end of file diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md index 8704c9c106..4bca884a09 100644 --- a/blazor/file-upload/style-appearance.md +++ b/blazor/file-upload/style-appearance.md @@ -1,61 +1,137 @@ --- layout: post -title: Style and appearance in Blazor File Upload Component | Syncfusion -description: Checkout and learn here all about Style and appearance in Syncfusion Blazor File Upload component and more. +title: File Upload Customization in Blazor File Upload Component | Syncfusion +description: Learn how to style the Syncfusion Blazor File Upload component using CSS to customize its container, buttons, file list, content area, and progress bar. platform: Blazor control: File Upload documentation: ug --- -# Style and appearance in Blazor File Upload Component +# File Uploader Customization in Blazor -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The visual appearance of the Syncfusion Blazor File Upload component can be extensively customized using CSS to align with your application's theme and style. This document provides a detailed guide to the component's CSS structure, enabling you to tailor its look and feel. By targeting specific CSS classes, you can modify elements such as the container, buttons, drop area, file list, and progress bar. For best results, it is recommended to use the CssClass property to apply a custom class, which helps scope your styles and prevent them from affecting other components. -## Customizing the appearance of File Upload container element +## CssClass Property -Use the following CSS to customize the appearance of File Upload container element. +The File Upload component allows you to add a custom CSS class to its wrapper element using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_CssClass) property. This approach helps scope customizations and prevents unintended global style changes. + +```csharp +@using Syncfusion.Blazor.Inputs + + + + + +@code{ + private void OnChange(UploadChangeEventArgs args) + { + // here you can get uploaded file data + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeDkrSTBqHOkfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with custom styles applied using CssClass](./images/blazor-file-upload-cssclass.png) + +By using the `e-custom-uploader` class, you can target specific elements within the File Upload component. + +## Customizing the Container + +Customize the main container of the File Upload component to control its overall dimensions and spacing. To scope your changes, target the custom class assigned via the `CssClass` property followed by the component's default class selectors. ```css -/* To specify height */ -.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper { - height: 300px; - width: 300px; +/* To specify a custom height, width and padding */ +.e-upload.e-control-wrapper { + height: 200px; + width: 300px; + padding: 30px; } ``` -## Customizing the File Upload browse button +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSDuVSpLzhuZgm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized container size](./images/blazor-file-upload-container.png) -Use the following CSS to customize the File Upload browse button +## Customizing the Browse Button + +Alter the **Browse** button's appearance by targeting the `.e-file-select-wrap .e-btn` selector within your custom class. This allows you to style properties like `background-color`, `color`, and `font-family` to match your application's design. ```css -/* To specify font size and color */ -.e-upload .e-file-select-wrap .e-btn, .e-upload .e-upload-actions .e-btn, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn, .e-bigger.e-small .e-upload .e-upload-actions .e-btn { - font-family: cursive; - height: 40px; - background-color: aquamarine; - color: coral; +/* To specify font styles, background, and color */ +.e-upload .e-file-select-wrap .e-btn { + font-family: 'cursive'; + height: 40px; + background-color: #ead228; + color: #ca3d09; } ``` -## Customizing the File Upload content +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVItYBoTrJQsbao?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized Browse button](./images/blazor-file-upload-browser.png) + +## Customizing the Content Area -Use the following CSS to customize the File Upload content +Style the drop zone where users drag and drop files to provide better visual feedback. Use the `.e-file-drop` selector scoped with your custom class to adjust properties like `font-size` and `color`. ```css /* To specify font size and color */ -.e-upload .e-file-select-wrap .e-file-drop, .e-bigger.e-small .e-upload .e-file-select-wrap .e-file-drop { - font-size: 20px; - color: aqua; +.e-upload .e-file-select-wrap .e-file-drop { + font-size: 20px; + color: aqua; } ``` -## Customizing the uploaded file container in File Upload +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhetarophoebktx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -Use the following CSS to customize the uploaded file container in File Upload +![Blazor File Upload with a customized content area](./images/blazor-file-upload-content.png) + +## Customizing the File List + +Customize the appearance of the file list that displays selected files. Target the `.e-upload-file-list` selector within your custom class to apply styles like `background-color` to the list container. ```css -/* To specify background color */ +/* To specify a background color */ .e-upload .e-upload-files .e-upload-file-list { - background-color: beige; + background-color: beige; +} +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrIjEVIphdshIUl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized file list background](./images/blazor-file-upload-file-list.gif) + +## Customizing the Progress Bar + +Provide a consistent look during file uploads by customizing the progress bar and its text. Use the `.e-upload-progress-bar` and `.e-progress-bar-text` selectors, scoped with your custom class, to control properties like `background-color` and `font-weight`. + +```css +/* To specify the background color of the progress bar */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-upload-progress-bar { + background: green; +} + +/* To specify the color of the progress bar text */ +.e-upload .e-upload-files .e-upload-progress-wrap .e-progress-bar-text { + color: #288928; + font-weight: bold; } ``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVetaVyzLHkRSPG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Upload with a customized progress bar](./images/blazor-file-upload-progress.gif) + +## See Also + +* [How to create a responsive, full-height file uploader](https://support.syncfusion.com/kb/article/21232/how-to-create-a-responsive-full-height-file-uploader-in-blazor) +* [How to customize button text](https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component) +* [How to center the Clear and Upload buttons](https://support.syncfusion.com/kb/article/17534/how-to-center-the-clear-and-upload-buttons-in-blazor-file-upload) +* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload) \ No newline at end of file diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG deleted file mode 100644 index 9e2da0c3e3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-schedule-task.PNG and /dev/null differ diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index b9c5a50b07..7b4a0a3e0c 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -9,25 +9,25 @@ documentation: ug # Creating Desktop Application using Blazor and Electron -This section explains how to create and run desktop applications using Blazor and Electron Framework with Syncfusion® Blazor components. +This section explains how to create and run a desktop application by using Blazor and the Electron.NET framework with Syncfusion® Blazor components. ## What is Electron? -[Electron](https://www.electronjs.org/) framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application on a desktop shell. +[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application in a desktop shell. ## Create a Blazor server-side application -You can create Blazor Server application using either CLI or Visual Studio referring the below links +Create a Blazor Server application by using either the CLI or Visual Studio: -* [Create Blazor server application using CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Create a Blazor Server application by using the CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -* [Create Blazor Server application using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Create a Blazor Server application by using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -N> This setup does not work with Target Frameworks greater than .NET 6. For more details and troubleshooting, refer to this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). +N> This setup does not work with target frameworks greater than .NET 6. For details and troubleshooting, see this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). ## Configure Electron in Blazor App -You can run the below commands either in **Visual Studio Developer Command Prompt** or **CLI** based on the tool you are using for development. +Run the following commands in either the **Visual Studio Developer Command Prompt** or a **command-line interface (CLI)** based on the development environment. 1.Install [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application. @@ -35,13 +35,13 @@ You can run the below commands either in **Visual Studio Developer Command Promp dotnet add package ElectronNET.API ``` -2.Create a local .NET tool manifest file by running the following command. This will create a manifest file in the **~/.config/dotnet-tools.json** location. +2.Create a local .NET tool manifest file by running the following command. This creates a manifest file at **~/.config/dotnet-tools.json** in the current project. ``` dotnet new tool-manifest ``` -![.NET tool manifest file](images\electron\net-tool-manifest.png) +![.NET tool manifest file](images/electron/net-tool-manifest.png) 3.Install the tool locally in the project by running the below command. @@ -49,14 +49,14 @@ dotnet new tool-manifest dotnet tool install ElectronNET.CLI ``` -![Electron NET CLI](images\electron\net-cli.png) +![Electron.NET CLI installation](images/electron/net-cli.png) 4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application. ``` dotnet electronize init ``` -![Update launch profile](images\electron\update-launch-profile.png) +![Update launch profile for Electron.NET](images/electron/update-launch-profile.png) 5.To integrate `Electron.NET` in the application add the below code in **~/Program.cs** file of the application. @@ -113,9 +113,9 @@ var app = builder.Build(); dotnet electronize start ``` -![Electron app output](images\electron\electron-grid-output.png) +![Electron app output](images/electron/electron-grid-output.png) -N> To close the electron app when closed the electron window add the below code in **//Open the Electron-Window** in step 6 in the **~/Program.cs** file of .NET 6 application. +N> To close the Electron app when the Electron window is closed, add the following code under **// Open the Electron-Window** in step 6 in the **~/Program.cs** file of a .NET 6 application. {% tabs %} {% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="14 15 16" %} @@ -145,7 +145,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -8.Run the below command lines to do production builds based on platform +8.Run the following commands to create production builds for each platform. ``` dotnet electronize build /target win @@ -153,4 +153,4 @@ dotnet electronize build /target osx dotnet electronize build /target linux ``` -N> [View the complete Blazor Server electron application with Syncfusion® controls on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) +N> [View the complete Blazor Server Electron application with Syncfusion® components on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) diff --git a/blazor/getting-started/blazor-server-side-visual-studio.md b/blazor/getting-started/blazor-server-side-visual-studio.md index e7f9ed505c..31bfe1132c 100644 --- a/blazor/getting-started/blazor-server-side-visual-studio.md +++ b/blazor/getting-started/blazor-server-side-visual-studio.md @@ -9,17 +9,17 @@ documentation: ug # Getting Started with Blazor Server App -This article provides a step-by-step instructions for building Blazor Server App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Server App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -31,17 +31,17 @@ This section provides a brief explanation on how to manually create a Blazor Ser ### Create a new Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor Server App Creation Template](images/Blazor-server-app-creation.png) -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) while creating a Blazor Server Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) when creating a Blazor Server App. ![Blazor Server App with Interactive Mode](images/blazor-app-interactive-mode.png) ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,7 +52,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -66,7 +66,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, create a Server application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor Server App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -95,7 +95,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -115,7 +115,7 @@ dotnet --version ### Create a new Blazor Server App in .NET CLI -Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -142,7 +142,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} @@ -184,7 +184,7 @@ builder.Services.AddSyncfusionBlazor(); ### Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **App.razor** file as shown below: ```html @@ -202,7 +202,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page. N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. @@ -243,6 +243,6 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} diff --git a/blazor/getting-started/blazor-single-nuget.md b/blazor/getting-started/blazor-single-nuget.md index 08c07de6bb..ad0a8f38c3 100644 --- a/blazor/getting-started/blazor-single-nuget.md +++ b/blazor/getting-started/blazor-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Visual Studio -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Visual Studio and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Component using Syncfusion.Blazor NuGet -This section briefly explains how to include a Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Server App and Blazor WebAssembly Standalone App using Visual Studio. +This section explains how to add a Blazor component by using the consolidated Syncfusion.Blazor (Single NuGet) package in a Blazor Server App and a Blazor WebAssembly Standalone App in Visual Studio. ## Prerequisites @@ -17,11 +17,11 @@ This section briefly explains how to include a Blazor component with the Syncfus ## Create a new Blazor App in Visual Studio -You can create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone**using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Single NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for, and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, use the following Package Manager command. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -31,11 +31,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/Components/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml diff --git a/blazor/getting-started/blazor-web-app-authentication.md b/blazor/getting-started/blazor-web-app-authentication.md index 0dc7d323e4..0dd8e535a1 100644 --- a/blazor/getting-started/blazor-web-app-authentication.md +++ b/blazor/getting-started/blazor-web-app-authentication.md @@ -23,47 +23,47 @@ This guide demonstrates how to build a **Blazor Web App with authentication** us ## Choose Project Template -* Select the **Blazor Web App** template using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and click **Next**. +* Select the **Blazor Web App** template using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), and then click **Next**. ![Create-blazor-web-app-template](images/blazor-web-template.jpeg) ## Configure Project Settings -* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the Configure for **HTTPS option is enabled**, and select **Individual Accounts** as the authentication type before clicking **Create**. This setup enables authentication support without persisting user data in a local database. +* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type before clicking **Create**. This enables authentication support without persisting user data in a local database. ![Project-setting](images/project-setting.png) ## Finalize Project Creation -Click the **Create** button to generate the Blazor Web App. Once created, run the project and locate the **Register** button. +Click **Create** to generate the Blazor Web App. After the project is created, run the app and locate the **Register** button. ![Click-register](images/register-button.png) ## Register a User -* Enter the necessary details, such as your **email address and password** into the registration form, then click **Register** to complete the account creation process. +* Enter the required details, such as **email address** and **password**, in the registration form, and then click **Register** to complete account creation. ![Enter-register-details](images/register-details.jpg) ## Apply Database Migrations -After completing registration, click **Apply Migrations** to set up the database schema and configure it with the necessary account-related tables and settings. +After registration completes, click **Apply Migrations** to create the database schema and configure account-related tables and settings. ![Apply-migration](images/apply-migration.jpg) ## Verify Login -Once migrations are applied, refresh the page. The home page will now display the logged-in user's email address along with a **Logout** option. +After migrations are applied, refresh the page. The home page displays the signed-in user’s email address and a **Logout** option. ![Verify-login](images/verify-login.png) -You can also integrate Syncfusion® Blazor Components within the **AuthorizeView** component by following these steps: +Syncfusion® Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App To add the **Blazor Calendar** component to your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. -Alternatively, you can install the packages using the following command in the **Package Manager Console**: +Alternatively, install the packages by using the following command in the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Then, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Then, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. ```cshtml @@ -101,9 +101,9 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in your application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below: +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in the application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below. -* For **.NET 9 and .NET 8** Blazor Web app, include it in the **~/Components/App.razor** file. +* For **.NET 9 and .NET 8** Blazor Web App, include these references in the **~/Components/App.razor** file. ```html @@ -119,11 +119,11 @@ The theme stylesheet and script are available via NuGet as [Static Web Assets](h ``` N> For more information on theming options, refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) documentation, which covers various methods such as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) for referencing themes in your Blazor application. -Additionally, explore the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn about different approaches for including script references in your Blazor project. +Additionally, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for including script references in a Blazor project. ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file within an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -141,12 +141,12 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will launch your default web browser and display the Syncfusion® Blazor Calendar component within the app interface. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This opens the default web browser and displays the Syncfusion® Blazor Calendar component within the app interface. ![Blazor Calendar Component](images/sync-components-auth.jpg) -N> For detailed implementation, The demo project can be downloaded from the [GitHub](https://github.com/SyncfusionExamples/blazor-authentication) repository. +N> For a complete implementation, download the demo project from the [GitHub repository](https://github.com/SyncfusionExamples/blazor-authentication). ## See Also diff --git a/blazor/getting-started/blazor-web-app-single-nuget.md b/blazor/getting-started/blazor-web-app-single-nuget.md index e035ed1113..8f6b35a597 100644 --- a/blazor/getting-started/blazor-web-app-single-nuget.md +++ b/blazor/getting-started/blazor-web-app-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Blazor Web App -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Blazor Web App and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Web App using Syncfusion.Blazor NuGet -This section briefly explains how to include a Syncfusion® Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This section explains how to include a Syncfusion® Blazor component in a Blazor Web App by using the consolidated Syncfusion.Blazor “Single NuGet” package in [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -17,18 +17,17 @@ This section briefly explains how to include a Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web App. +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) during project creation. ## Install Syncfusion® Blazor Single NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,11 +37,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, except PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -51,9 +50,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **interactive render mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. ```cshtml @@ -67,7 +66,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file as shown: ```html @@ -81,12 +80,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> If you are using Syncfusion.Blazor single NuGet, you don’t have to refer Syncfusion.Blazor.Themes NuGet. Since style sheets already inside the assets of Syncfusion.Blazor NuGet. +N> When using the Syncfusion.Blazor Single NuGet, a separate Syncfusion.Blazor.Themes package is not required because the stylesheets are included in the Syncfusion.Blazor assets. N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Syncfusion® Blazor component -* Now, add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file.If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +* Add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: {% tabs %} {% highlight razor %} @@ -105,6 +104,6 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® Blazor Calendar component will be rendered in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. The Syncfusion® Blazor Calendar component is rendered in the default browser. -![Blazor Calendar Component](images/core-hosted/browser-output.png) +![Blazor Web App rendering the Syncfusion Blazor Calendar component](images/core-hosted/browser-output.png) diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md index af05bdd5f9..bc4999d9b7 100644 --- a/blazor/getting-started/blazor-web-app.md +++ b/blazor/getting-started/blazor-web-app.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Web App -This article provides a step-by-step instructions for building Blazor Web App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Web App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor Web App, you can check on this video. +To get started quickly with a Blazor Web App, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=hjPGxApA5W8" %} @@ -28,7 +28,7 @@ You can create a Blazor Web App using Syncfusion® ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -42,13 +42,13 @@ This section provides a brief explanation on how to manually create a Blazor Web You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web App. ### Install Syncfusion® Blazor Grid and Themes NuGet in the Blazor Web App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -61,7 +61,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -75,7 +75,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -91,11 +91,11 @@ cd BlazorWebApp.Client ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following command to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -109,7 +109,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -145,13 +145,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor DataGrid** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -163,7 +163,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -171,7 +171,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -186,7 +186,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -241,7 +241,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor DataGrid component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: @@ -309,6 +309,6 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-app.md b/blazor/getting-started/blazor-webassembly-app.md index b166a81070..8cb754dff4 100644 --- a/blazor/getting-started/blazor-webassembly-app.md +++ b/blazor/getting-started/blazor-webassembly-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor WebAssembly Standalone App -This article provides a step-by-step instructions for building Blazor WebAssembly App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor WebAssembly App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} @@ -23,7 +23,7 @@ You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) @@ -64,9 +64,9 @@ N> Syncfusion® Blazor components are availa ### Create a Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor WebAssembly App** using Visual Studio Code via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor WASM App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Install latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the .NET SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or command shell (Linux) or terminal (macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight c# tabtitle="Blazor WebAssembly App (~/Program.cs)" hl_lines="3 11" %} @@ -195,7 +195,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for adding script references in a Blazor application. ### Add Syncfusion® Blazor component @@ -233,6 +233,6 @@ Add the Syncfusion® Blazor DataGrid compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-authentication.md b/blazor/getting-started/blazor-webassembly-authentication.md index 1843ac6c82..1387f4cdca 100644 --- a/blazor/getting-started/blazor-webassembly-authentication.md +++ b/blazor/getting-started/blazor-webassembly-authentication.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor WASM App with Authentication Library -This article provides a step-by-step instructions for building and securing Blazor WebAssembly Standalone App with Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building and securing a Blazor WebAssembly Standalone App with the Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -19,11 +19,11 @@ This article provides a step-by-step instructions for building and securing Blaz You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) by setting the `Authentication type` to `Individual Accounts`. This selection adds authentication support and doesn't result in storing users in a database. -## Configure the application with Google Auth 2.0 OIDC +## Configure the application with Google OAuth 2.0 (OIDC) -* Set up `Google OAuth 2.0` authentication. For more information, refer [here](https://support.google.com/cloud/answer/6158849?hl=en) +* Set up Google OAuth 2.0 authentication. For more information, see the [Google Cloud documentation](https://support.google.com/cloud/answer/6158849?hl=en). -* Now, replace the `appsettings.json` with the following code which contains code to configure the application with `Google OAuth 2.0`. +* Replace the `appsettings.json` file with the following content to configure the application with `Google OAuth 2.0`. {% tabs %} {% highlight cshtml tabtitle="appsettings.json" %} @@ -45,11 +45,11 @@ You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [ ![OAuth 2.0 client ID](images/oauth-client-id.png) -* The `RedirectUri` (https:///authentication/login-callback) should be registered in the Google APIs console as mentioned below. +* The `RedirectUri` (https:///authentication/login-callback) must be registered in the Google APIs console as shown below. ![OAuth RedirectUri](images/oauth-rediredt-uri.png) -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. @@ -62,11 +62,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -75,7 +75,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly Standalone App. ```cshtml @@ -89,7 +89,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet reference in the `` section and the script reference at the end of the `` as follows: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` section and the script at the end of the `` of the main page as follows: * For **.NET 9 and .NET 8** Blazor WebAssembly Standalone app, include it in the **~/Components/App.razor** file. @@ -109,7 +109,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -127,7 +127,7 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Calendar component in the default web browser. ![Blazor Calendar Component](images/output-calendar-using-blazor-webassembly.png) diff --git a/blazor/getting-started/maui-blazor-app.md b/blazor/getting-started/maui-blazor-app.md index 9fec95a970..e7b81a340a 100644 --- a/blazor/getting-started/maui-blazor-app.md +++ b/blazor/getting-started/maui-blazor-app.md @@ -11,34 +11,34 @@ documentation: ug This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI Blazor) app with Syncfusion® Blazor components. -To get start quickly with Blazor MAUI App, you can check on this video. +To get started quickly with a .NET MAUI Blazor app, review the following video. {% youtube "youtube:https://www.youtube.com/watch?v=wnceZx-Xezs" %} ## What is .NET MAUI Blazor App? -.NET MAUI Blazor App is a .NET MAUI App where `Blazor Web App` is hosted in .NET MAUI app using `BlazorWebView` control. This enable a Blazor Web App to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of .NET MAUI app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all the platforms supported by .NET MAUI. +A .NET MAUI Blazor App is a .NET MAUI application where a Blazor Web App is hosted in the .NET MAUI app using the `BlazorWebView` control. This enables a Blazor Web App to integrate with platform features and UI controls. The `BlazorWebView` can be added to any page of a .NET MAUI app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all platforms supported by .NET MAUI. -Visual Studio provides **.NET MAUI Blazor app** template to create .NET MAUI Blazor Apps. +Visual Studio provides the **.NET MAUI Blazor App** template to create .NET MAUI Blazor Apps. ## Prerequisites * .NET SDK 8.0 or above -* The latest preview of Visual Studio 2022 17.1 or above, with required workloads: +* Visual Studio 2022 17.1 or above with the required workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor App in Visual Studio -You can create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0) +Create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). ## BlazorWebView in .NET MAUI Blazor App -The above steps creates a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. +The above steps create a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. -In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. +In `MainPage.xaml`, the `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -59,11 +59,11 @@ In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the B {% endhighlight %} {% endtabs %} -For more details refer [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. +For more details, refer to the [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of your MAUI Blazor App. +Next, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of the MAUI Blazor App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 3" %} @@ -111,11 +111,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes in a Blazor application. For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Home.razor` page under the `~/Components/Pages` folder. +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added to the `~/Home.razor` page under the `~/Components/Pages` folder. {% tabs %} {% highlight razor %} @@ -127,22 +127,22 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the app. -Before running the sample, make sure the mode is `Windows Machine`. +In the Visual Studio toolbar, select **Windows Machine** to build and run the app. +Ensure the run profile is set to `Windows Machine` before starting the app. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components). ## How to use images in .NET MAUI Blazor Application -Add the images in the images in the `wwwroot` folder of the application and refer it using `img` tag in Blazor App. +Add images to the `wwwroot` folder of the application and reference them using the `img` tag in the Blazor App. -In the below code images are added under `images` folder in `wwwroot` folder. +In the following example, images are added under the `images` folder in the `wwwroot` folder. {% tabs %} {% highlight razor %} @@ -158,7 +158,7 @@ In the below code images are added under `images` folder in `wwwroot` folder. ### How to solve deployment errors in Windows? -If you get error dialog like "There were deployment errors", Enable developer mode. For more details refer [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). +If the error dialog “There were deployment errors” appears, enable Developer Mode. For more details, refer to [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). ![Enable developer mode in system settings](images/maui/enable-developer-mode.png) @@ -166,11 +166,11 @@ If you get error dialog like "There were deployment errors", Enable developer mo ### How to solve deployment errors in iOS? -In iOS code is statically compiled ahead of time, so, configure Syncfusion® Blazor assemblies in `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploy on a real device. +In iOS, code is statically compiled ahead of time. Configure Syncfusion® Blazor assemblies in the `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploying to a real device. -Below are possible errors if `MtouchExtraArgs` tag is not configured, -1. App won't load on real device with error "An unhandled error has occurred" after you compile in Release mode with Visual Studio and deploy to real device. -2. AOT related failures like [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416) +Possible errors if the `MtouchExtraArgs` tag is not configured: +1. The app does not load on a real device with the error “An unhandled error has occurred” after compiling in Release mode with Visual Studio and deploying to a real device. +2. AOT-related failures such as [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416) ``` @@ -186,9 +186,9 @@ Reference: ### How to solve "The project doesn't know how to run the profile Windows Machine" while running MAUI Blazor App? -* This issue has been fixed in most recent release of Visual Studio. For more details refer [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). +* This issue has been addressed in a recent release of Visual Studio. For details, see the discussion [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). -* You can also fix this error by installing [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17). +* Alternatively, install [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17) to resolve this error. ## See also diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md index 13673f5079..8d30241c3a 100644 --- a/blazor/getting-started/maui-blazor-web-app.md +++ b/blazor/getting-started/maui-blazor-web-app.md @@ -9,34 +9,32 @@ documentation: ug # Getting Started with .NET MAUI Blazor Hybrid and Web App -This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) app with Syncfusion® Blazor components. - +This section explains how to create and run a .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) using Syncfusion® Blazor components. ## What is .NET MAUI Blazor Hybrid and Web App? -[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and **reuse it across mobile, desktop, and browser platforms**. +[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server App and a .NET MAUI Blazor App. This approach enables a unified web-based UI that can be **reused across mobile, desktop, and browser platforms**. -By sharing UI components between native and web apps, this approach ensures consistent user experiences, promotes maximum code reuse, and simplifies maintenance for applications that target multiple environments. +By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments. -Visual Studio provides **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App. +Visual Studio provides the **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create a .NET MAUI Blazor Hybrid app with a Blazor Web App. ## Prerequisites -* .NET SDK 9.0 and later. - -* The latest preview of Visual Studio 2022 17.3 or above, with required workloads: +* .NET SDK 9.0 or later +* Visual Studio 2022 17.3 or later with the following workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio -You can create a **.NET MAUI Blazor Hybrid and Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) +Create a **.NET MAUI Blazor Hybrid and Blazor Web App** in Visual Studio using the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0). ![.NET MAUI Blazor Hybrid and Blazor Web App](images/maui/maui-web-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar component in the app's shared folder**, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor Calendar component in the app’s shared folder, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,11 +45,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** in both the `.Maui` and `.Web` Apps and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -60,7 +58,7 @@ Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Sy ``` -Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of your MAUI Blazor App and `~/Program.cs` file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of the MAUI Blazor App and the `~/Program.cs` file of the Blazor Web App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 4" %} @@ -89,7 +87,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and **~/Components/App.razor file** of your Blazor Web App. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and in the **~/Components/App.razor file** of your Blazor Web App. ```html @@ -108,7 +106,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Pages/Home.razor` page under the `~/Pages` folder of your `.Shared` App . +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added in `~/Pages/Home.razor` under the `~/Pages` folder of the `.Shared` App. {% tabs %} {% highlight razor %} @@ -120,16 +118,15 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the `.Maui` app. -Before running the sample, make sure the mode is `Windows Machine`. Also to build and run the `.Web` app, select the **IIS Express** button. +In the Visual Studio toolbar, select the **Windows Machine** target to build and run the `.Maui` app. To build and run the `.Web` app, select the **IIS Express** target. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for emulator or device setup. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components). ## See also diff --git a/blazor/getting-started/microsoft-teams-app.md b/blazor/getting-started/microsoft-teams-app.md index 1e7c0c97b9..9aa54960f0 100644 --- a/blazor/getting-started/microsoft-teams-app.md +++ b/blazor/getting-started/microsoft-teams-app.md @@ -9,51 +9,51 @@ documentation: ug # Getting Started with Microsoft Teams Application -This section explains how to create and run the first Microsoft Teams application (Tab App) with Syncfusion® Blazor components. +This section explains how to create and run a Microsoft Teams application (Tab App) with Syncfusion® Blazor components. ## Prerequisites -* Visual Studio 2022 [> 17.13 version] with the required work loads (Visual studio Installer -> Workloads -> ASP.NET and web development -> Select Microsoft 365 Agents development tools from Installation details). +* Visual Studio 2022 (version 17.13 or later) with the required workloads. In Visual Studio Installer, select Workloads → ASP.NET and web development, then enable Microsoft 365 Agents development tools under Installation details. - ![workload installation](images\MSTeams\workload-installation.png) + ![Visual Studio workloads installation for Microsoft 365 Agents](images/MSTeams/workload-installation.png) -* Microsoft Teams Application +* Microsoft Teams application -* Microsoft Edge or Google Chrome browser with developer tools. +* Microsoft Edge or Google Chrome with developer tools -* In the Teams client, go to the Apps icon > Manage your apps > Upload an app, and check for the "Upload a custom app" option to confirm if custom app upload is enabled. Contact Teams administrator, if you don't have the option to upload a custom app. +* In the Teams client, go to Apps icon → Manage your apps → Upload an app, and confirm that "Upload a custom app" is available. Contact a Teams administrator if the option is not available. - ![custom upload](images\MSTeams\custom-upload.png) + ![Verify Teams custom app upload permission](images/MSTeams/custom-upload.png) ## Create a new Microsoft Team Application with Tab using Visual Studio 1. Launch Visual Studio 2022, and in the start window click **Create a new project**. 2. Search for Microsoft 365 Agents app in Visual Studio template. Select **Microsoft 365 Agents** and click on Next. - ![Create Microsoft Teams App](images\MSTeams\create-msteams-app.png) + ![Create Microsoft Teams App](images/MSTeams/create-msteams-app.png) 3. Configure the project with required project name, select the location to save the application and click on Create. - ![Configure Microsoft Teams App](images\MSTeams\configure-msteams-app.png) + ![Configure Microsoft Teams App](images/MSTeams/configure-msteams-app.png) 4. Select the type of Microsoft 365 Agent application to create. In this example, **Microsoft application with Tab** is selected. -![Select type of Microsoft Teams Application](images\MSTeams\select-type-msteams-app.png) +![Select type of Microsoft Teams Application](images/MSTeams/select-type-msteams-app.png) 5. Wait for the project to be created, and its dependencies to be restored, then the project structure looks like below. - ![Microsoft Teams project structure](images\MSTeams\msteams-project-structure.png) + ![Microsoft Teams project structure](images/MSTeams/msteams-project-structure.png) ## Build and run the first Microsoft Teams Application 1. To configure the project with the Microsoft teams application, right Click on the M365 Agent Project and Select Microsoft M365 Account. - ![Configure dependecies with MS Teams Application](images\MSTeams\configure-teams-dependencies.png) -2. After configuring successfully, it displays the window with Microsoft 365 Account. If you already have an account Select the available Office 365 account and click on continue. If you dont have account, create a new account and add the newly created account and click on continue. + ![Configure dependencies with Microsoft Teams application](images/MSTeams/configure-teams-dependencies.png) +2. After configuration completes, a Microsoft 365 Account window appears. If an account exists, select the Office 365 account and click Continue. If you don't have an account, create a new account, add it, and then click Continue. - ![Select the MS365 account to SignIn](images\MSTeams\ms365-account-select.png) -3. After successful login. Click on Debug -> Start Debugging or click on F5 to run the application. -4. Once the application is build successfully, prompts the output window with create My365Agent application. Click on Add in the created application -![Newly created teams application](images\MSTeams\new-teams-app.png) -5. On clicking on "Open" the new Microsoft application with personal Tab is created. -![New Teams application with Personal Tab](images\MSTeams\new-app-personal-tab.png) + ![Select a Microsoft 365 account to sign in](images/MSTeams/ms365-account-select.png) +3. After successful sign-in, select Debug → Start Debugging or press F5 to run the application. +4. After a successful build, the output window prompts to create the My365Agent application. Click Add to add the created application. +![Newly created Teams application](images/MSTeams/new-teams-app.png) +5. Click Open to create the new Microsoft application with a personal tab. +![New Teams application with a personal tab](images/MSTeams/new-app-personal-tab.png) ## Install Syncfusion® Blazor Kanban and Themes NuGet in the App @@ -68,7 +68,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service @@ -208,6 +208,6 @@ Now, add the Syncfusion® Blazor Kanban comp {% endhighlight %} {% endtabs %} -![Microsoft Teams Application with Syncfusion Blazor controls](images\MSTeams\output-msteams-syncfusion.png) +![Microsoft Teams application with Syncfusion Blazor controls](images/MSTeams/output-msteams-syncfusion.png) -N> [View the complete Microsoft Teams Application with Blazor Syncfusion® Controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) +N> [View the complete Microsoft Teams application with Syncfusion® Blazor controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) diff --git a/blazor/getting-started/razor-class-library.md b/blazor/getting-started/razor-class-library.md index a8e0df84d0..e2f5e07cee 100644 --- a/blazor/getting-started/razor-class-library.md +++ b/blazor/getting-started/razor-class-library.md @@ -7,9 +7,9 @@ component: Common documentation: ug --- -# Creating Razor Class Library (RCL) using Syncfusion® Blazor components +# Creating Razor Class Library (RCL) using Syncfusion® Blazor components -This section provides information about creating Razor Class Library with the Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to create a Razor Class Library (RCL) that includes Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -17,7 +17,7 @@ This section provides information about creating Razor Class Library with the Sy ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor Class Library in Visual Studio 2022 @@ -39,7 +39,7 @@ This section provides information about creating Razor Class Library with the Sy ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the library, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,11 +51,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library -Now, import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. +Import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. ```html @@ -79,11 +79,11 @@ This Blazor component is defined in the RazorClassLibrary packa ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor class library in Visual Studio Code -You can create a Razor class library using visual studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). +You can create a Razor class library using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). {% tabs %} @@ -96,13 +96,13 @@ cd RazorUIClassLib {% endtabs %} -## Install Syncfusion® Blazor Navigations and Themes NuGet in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -116,7 +116,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library @@ -152,7 +152,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse ![add RCL in blazor app](images/blazor-razor-configure.png) - N> Razor Class Library project is added to the existing Blazor Application. + N> The Razor Class Library project is added to the existing Blazor Application. 3. Right-click the Blazor App project, and then select Add/Project reference. Now, click the checkbox and configure the **Razor Class Library**. @@ -187,7 +187,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse * For Blazor WebAssembly standalone app, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/wwwroot/index.html** file. - * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. + * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. ```html diff --git a/blazor/getting-started/winforms-blazor-app.md b/blazor/getting-started/winforms-blazor-app.md index d9caa60f43..1793cd05b1 100644 --- a/blazor/getting-started/winforms-blazor-app.md +++ b/blazor/getting-started/winforms-blazor-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WinForms Blazor App in Visual Studio | Syncfusion -description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and much more. +description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,18 +9,17 @@ documentation: ug # Getting Started with WinForms Blazor Application -This section explains how to create and run the first WinForms Blazor App UI (.NET WinForms Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WinForms Blazor App (.NET WinForms Blazor) that uses Syncfusion® Blazor components. ## What is WinForms Blazor App? -WinForms Blazor App is an app where `Blazor web app` is hosted in WinForms app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WinForms Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WinForms Blazor apps can run on all the platforms supported by WinForms. +A WinForms Blazor app hosts a Blazor web app inside a Windows Forms application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and UI controls. The `BlazorWebView` control can be added to any form in the WinForms app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WinForms Blazor apps run on platforms supported by WinForms (Windows). -Visual Studio provides **WinForms Application** template to create WinForms Blazor Apps. +Visual Studio provides the **WinForms Application** template to create WinForms Blazor Apps. ## Prerequisites * [Supported platforms (WinForms documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/winforms/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) ## Create a new WinForms Blazor App in Visual Studio @@ -29,7 +28,7 @@ To create a **WinForms Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,15 +39,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16` or later. ![Winforms Blazor App NuGet package reference](images/winforms/winforms-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -72,7 +71,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +The theme stylesheet and script are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -85,7 +84,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} diff --git a/blazor/getting-started/wpf-blazor-app.md b/blazor/getting-started/wpf-blazor-app.md index 1839a7337d..8662e5781c 100644 --- a/blazor/getting-started/wpf-blazor-app.md +++ b/blazor/getting-started/wpf-blazor-app.md @@ -9,23 +9,22 @@ documentation: ug # Getting Started with WPF Blazor Application -This section explains how to create and run the first WPF Blazor App UI (.NET WPF Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WPF Blazor app (.NET WPF Blazor) that uses Syncfusion® Blazor components. -To get start quickly with Blazor WPF App, you can check on this video. +To get started quickly with a WPF Blazor app, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=MxSGEbPUbMg" %} ## What is WPF Blazor App? -WPF Blazor App is an app where `Blazor web app` is hosted in WPF app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WPF Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WPF Blazor apps can run on all the platforms supported by WPF. +A WPF Blazor app hosts a `Blazor web app` inside a WPF application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and WPF UI. The `BlazorWebView` control can be added to any page in the WPF Blazor app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WPF Blazor apps run on platforms supported by WPF. -Visual Studio provides **WPF Application** template to create WPF Blazor Apps. +Visual Studio provides the **WPF Application** template to create WPF Blazor Apps. ## Prerequisites * [Supported platforms (WPF documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the .NET desktop development workload ## Create a new WPF Blazor App in Visual Studio @@ -34,7 +33,7 @@ To create a **WPF Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -45,15 +44,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16` or later. For details, see the package page in NuGet. ![WPF Blazor App NuGet package reference](images/wpf/wpf-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -62,7 +61,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of your WPF Blazor App. +Next, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of the WPF Blazor App. {% tabs %} {% highlight C# tabtitle="~/MainWindow.xaml.cs" hl_lines="1 3" %} @@ -77,7 +76,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +Theme stylesheets and scripts are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -90,7 +89,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file in the Blazor project. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} @@ -106,4 +105,4 @@ In the Visual Studio toolbar, select the start button to build and run the app. ![WPF Blazor App with Syncfusion Blazor Components](images/wpf/wpf-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) diff --git a/blazor/image-editor/accessibility.md b/blazor/image-editor/accessibility.md index 3d45a2c370..ae79e36b99 100644 --- a/blazor/image-editor/accessibility.md +++ b/blazor/image-editor/accessibility.md @@ -1,15 +1,15 @@ --- layout: post title: Accessibility in Blazor Image Editor component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Image Editor component and more. +description: Learn about accessibility support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor -control: Progress Button +control: Image Editor documentation: ug --- # Accessibility in Blazor Image Editor component -The Blazor Image Editor component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Image Editor component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Image Editor component is outlined below. @@ -39,25 +39,25 @@ The accessibility compliance for the Blazor Image Editor component is outlined b ## Keyboard interaction -The Blazor Image Editor component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. +The Blazor Image Editor component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. | Windows | Mac | Actions | | --- | --- | --- | -| Ctrl + Z | ⌘ + Z | Undo the last user action. | -| Ctrl + Y | ⌘ + Y | Redo the last user action. | -| Ctrl + S | ⌘ + S | To save the Image. | -| Ctrl + O | ⌘ + O | To open the Image. | -| Delete | Delete | To delete the shape once the shape got selected through mouse click . | -| Enter | Enter | To apply Selection Crop or Image Resize. | -| Escape | Escape | To discard operations performed in the Image Editor, such as annotation drawings, crop selection, and more. | +| Ctrl + Z | ⌘ + Z | Undo the last action. | +| Ctrl + Y | ⌘ + Y | Redo the last action. | +| Ctrl + S | ⌘ + S | Save the image. | +| Ctrl + O | ⌘ + O | Open an image. | +| Delete | Delete | Delete the selected shape. | +| Enter | Enter | Apply selection crop or image resize. | +| Escape | Escape | Discard operations such as annotation drawings and crop selections. | ## Ensuring accessibility -The Blazor Image Editor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Image Editor component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Image Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the accessibility of the Blazor Image Editor component with accessibility tools. +The accessibility compliance of the Blazor Image Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the Blazor Image Editor component with accessibility tools. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLfZMhEziJhvXKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also diff --git a/blazor/image-editor/end-user-capabilities.md b/blazor/image-editor/end-user-capabilities.md index 357277c481..567d6e0c30 100644 --- a/blazor/image-editor/end-user-capabilities.md +++ b/blazor/image-editor/end-user-capabilities.md @@ -1,7 +1,7 @@ --- layout: post title: End-user capabilities with Blazor Image Editor Component | Syncfusion -description: Checkout the end-user capabilities available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore end-user capabilities in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,174 +9,177 @@ documentation: ug # End-user capabilities in the Blazor Image Editor component -The following operations are available for end-users and the same is explained briefly in these sections. +The following operations are available for end users and are outlined in the sections below. ## Open an image -To open an image in the image editor, do the following steps. +To open an image in the image editor, follow these steps: -* Click the Open icon from the left side of the toolbar. +* Click the Open icon on the left side of the toolbar. -* The file explorer lists only JPEG, PNG, JPG, WEBP and BMP format files. +* The file explorer lists only JPEG, PNG, JPG, WEBP, and BMP files. -* Select the image from the list of the images from the file explorer window. +* Select an image from the file explorer to load it in the editor. ![Blazor Image Editor with Opening an image showcase](./images/blazor-image-editor-open.gif) ## Zooming -Image zooming can be performed in the following ways. +Image zooming can be performed in the following ways: -* Using toolbar. +* Using the toolbar -* Using pinch zoom in touch enabled devices. +* Using pinch zoom on touch-enabled devices -* Using mouse wheel. +* Using the mouse wheel -* Using keyboard. +* Using the keyboard ![Blazor Image Editor with Zoom In/ Out an image showcase](./images/blazor-image-editor-end-zoom.jpg) ### Using toolbar -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using the toolbar: -* The Zoom In/ Out option only enabled after opening the image. +* Zoom In/Out options are enabled after opening an image. ### Using pinch -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using touch gestures: -* Touch with two fingers to perform zooming. +* Perform a two-finger pinch gesture to zoom in or out. -* Zoom in and out controlled by touch gestures. +* Zoom level is controlled by the pinch distance. ### Using mouse wheel -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using the mouse: -* Press the ctrl key and scroll the mouse wheel to perform zooming. +* Press Ctrl and scroll the mouse wheel to zoom in or out. -* The zoom in and out controlled by the mouse wheel. +* Zoom level is adjusted based on the scroll direction. ### Using keyboard -To zoom in or out the image in the image editor, do the following steps. +To zoom the image using keyboard shortcuts: -* Press the ctrl key with ‘+’ button from the keyboard to zoom in an image. +* Press Ctrl + ‘+’ to zoom in. -* Press the ctrl key with ‘-’ button from the keyboard to zoom out an image. +* Press Ctrl + ‘−’ to zoom out. ## Panning -To pan an image in the image editor, do the following steps. +To pan the image in the editor: -* Click on the image and do dragging to move or pan the image. +* Click and drag on the image to move it within the canvas. -* Panning option will be enabled in the following two cases. +* Panning is enabled in the following cases: - * If the selection is applied for cropping an image. + * When a selection is active for cropping. - * If the image size exceeds the canvas size while zooming an image. + * When the image size exceeds the canvas size due to zooming. ![Blazor Image Editor with Panning an image showcase](./images/blazor-image-editor-pan.gif) ## Cropping and image transformation -To crop an image in the image editor, do the following steps. +To crop and transform an image: -* Cropping can be performed based on the selection in an image editor. +* Cropping is based on a selection within the editor. -* To perform selection, click the crop button in the toolbar which opens the contextual toolbar that shows crop selection options, rotate options, flip options, and straightening options. +* Click the Crop button on the toolbar to open the contextual toolbar with crop selection, rotate, flip, and straighten options. -* Click the crop selection button and select the type of selection such as custom, circle, square, and ratio selection from the popup. +* Click the crop selection button and choose a selection type: custom, circle, square, or ratio. -* Once selection is completed, do panning to move the image to get the cropped region. +* After creating a selection, pan the image to position the desired crop region. -* Utilize the rotate and flip buttons along with the straighten slider to perform image transformations, including any inserted annotations. +* Use rotate and flip buttons and the straighten slider to apply transformations, including to inserted annotations. -* Once the cropping region is finalized in the image click the tick icon at the top right of the toolbar to crop the image. +* When the crop region is finalized, click the tick icon at the top-right of the toolbar to apply the crop. ![Blazor Image Editor with Cropping and Image Transformation showcase](./images/blazor-image-editor-end-crop.jpg) ## Image annotation -To add annotations to an image in the image editor, do the following steps. +To add and modify annotations: -* To add annotation, click the annotation button in the toolbar and select the type of annotations such as Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand drawing to be inserted to the image editor. +* Click the annotation button on the toolbar and choose an annotation type: Line, Rectangle, Ellipse, Path, Arrow, Text, or Freehand Drawing. -* Once the annotation is added to the image, that can be repositioned by clicking and dragging the annotations using mouse as well as resized by clicking and resizing the selection circle to be placed around the annotations. +* Click and drag on the image to draw the selected annotation. -* To rotate annotations, you can simply grab the circle located at the bottom of the annotation. The rotation can be applicable to all the annotations except text annotation. +* After insertion, annotations can be repositioned by clicking and dragging with the mouse, and resized by interacting with the selection circle placed around the annotation. -* Customize the annotations by changing their color, stroke width, font family, and font size through the contextual toolbar. The contextual toolbar will be enabled whenever the annotations are selected. +* To rotate an annotation, drag the circle at the bottom of the annotation. -* When annotations are selected in the image editor, the quick access toolbar becomes active, providing convenient access to various actions such as duplicating, deleting, or editing text associated with the selected annotation. This toolbar enables users to perform these common operations quickly and efficiently, streamlining their workflow and enhancing the overall editing experience. +* Customize annotations using the contextual toolbar: color, stroke width, font family, and font size. The contextual toolbar appears when an annotation is selected. + +* When annotations are selected, the quick access toolbar enables common actions such as duplicate, delete, and edit text to streamline editing. ![Blazor Image Editor with annotation showcase](./images/blazor-image-editor-end-annotation.jpg) -## Filtering and fine-tune +## Fine-tune -To perform fine-tuning on an image in the image editor, do the following steps. +To apply fine-tuning adjustments: -* Click the fine-tune button which displays the list of fine-tuning available in the image editor. +* Click the Fine-tune button to display available adjustments. -* Click one of the fine-tune options from the list of options which shows a slider to adjust the corresponding filter. +* Choose an adjustment to display a slider for control. -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. ![Blazor Image Editor with Filtering and finetune showcase](./images/blazor-image-editor-end-finetune.jpg) -To apply filters on an image in the image editor, do the following steps. +## Filter + +To apply filters: -* Click the filter button which displays the list of filters available in the image editor. +* Click the Filter button to display available filters. -* Click the filter from list of options to apply the corresponding filter to an image. +* Select a filter to apply it to the image. -* Click on the canvas or tick icon at the right corner of the toolbar in the image editor to apply the modifications. +* Click on the canvas or the tick icon at the right corner of the toolbar to apply changes. ![Blazor Image Editor with Filtering and finetune showcase](./images/blazor-image-editor-end-filter.jpg) ## Undo and redo the operations -To undo and redo the actions performed in an image editor, do the following steps. +To undo and redo actions in the editor: -* The undo button will be enabled once the action is performed in an image editor. +* The Undo button is enabled after an action is performed. -* The redo button will be enabled once the undo action is performed in an image editor. +* The Redo button is enabled after an undo action is performed. -* Click the undo or redo button at the left side of the toolbar to perform undo and redo operation. +* Click the Undo or Redo button on the left side of the toolbar. -* Ctrl + Z and Ctrl + Y facilitates this process by allowing users to undo and redo actions, respectively. +* Keyboard shortcuts: Ctrl + Z (undo) and Ctrl + Y (redo). ![Blazor Image Editor with Undo and redo showcase](./images/blazor-image-editor-undo-redo.gif) ## Reset an image -To revert all the changes done in an image editor, do the following steps. +To revert all changes in the editor: -* Click the reset button which is located on the right side of the toolbar. +* Click the Reset button on the right side of the toolbar. -* This will revert all the changes performed in the image editor. +* This action reverts all modifications applied in the editor. ## Export an image To save the modified image in the Image Editor, follow these steps: -* Click the Save Button - * Locate the Save button on the right side of the toolbar and click it. +* Click the Save button + * Locate the Save button on the right side of the toolbar and click it. -* Select the File Format - * In the export popup, choose your preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all -applied modifications. +* Select the file format + * In the export popup, choose the preferred file format (PNG, JPEG, SVG, or WEBP) to save the image with all applied modifications. -* Adjust Image Quality (JPEG Format Only) - * If saving in JPEG, use the Image Quality slider to set the desired quality level (0-100). A higher value retains more detail but increases file size. +* Adjust image quality (JPEG only) + * If saving as JPEG, use predefined settings (Good, Great, Highest) or use the Image Quality slider (0–100). Higher values retain more detail and increase file size. -* Download the Image - * Click Download to save the modified image to your device. +* Download the image + * Click Download to save the modified image. -* Use Keyboard Shortcut (Ctrl + S) - * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. +* Use keyboard shortcut (Ctrl + S) + * Press Ctrl + S to download the image in the same format as the loaded image without opening the Save dialog. For example, if the loaded image is PNG, it will be saved as PNG. ![Blazor Image Editor with Export an image showcase](./images/blazor-image-editor-end-save.jpg) \ No newline at end of file diff --git a/blazor/image-editor/filter.md b/blazor/image-editor/filter.md index 654ce0e94d..58002d84e5 100644 --- a/blazor/image-editor/filter.md +++ b/blazor/image-editor/filter.md @@ -1,7 +1,7 @@ --- layout: post title: Filter with Blazor Image Editor Component | Syncfusion -description: Checkout the Filter available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore image filter options in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Filters in the Blazor Image Editor component -Filters are pre-defined effects that can be applied to an image to alter its appearance or mood. Image filters can be used to add visual interest or to enhance certain features of the image. Some common types of image filters include cold, warm, chrome, sepia, and invert. +Filters are predefined effects that modify an image’s appearance or mood. They can add visual emphasis or enhance specific elements of an image. Common filters include cold, warm, chrome, sepia, and invert. ## Apply filter effect -The [`ApplyImageFilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_) method is utilized to apply filters to an image. By passing the desired filter type as the first parameter of the method, specified as [`ImageFilterOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterOption.html) the method applies the corresponding filter to the image. This allows for easy and convenient application of various filters to enhance or modify the image based on the chosen filter type. - -The `ApplyImageFilterAsync` method is used to perform filtering by specifying the type of filter as `ImageFilterOption` and send it a first parameter of the method. +The [ApplyImageFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_) method applies a filter to the image. Provide the desired filter as the first parameter using the [ImageFilterOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterOption.html) enumeration. Here is an example of filtering using the `ApplyImageFilterAsync` method. @@ -77,14 +75,14 @@ Here is an example of filtering using the `ApplyImageFilterAsync` method. } ``` -![Blazor Image Editor with Filter an image](./images/blazor-image-editor-filter.jpg) +![Blazor Image Editor showing a filter applied to an image](./images/blazor-image-editor-filter.jpg) -### Image filtering event +## Image filtering event -The [`ImageFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageFiltering) event is triggered when applying filtering on the image. This event is passed an object that contains information about the filtering event, such as the type of filtering. +The [ImageFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageFiltering) event is triggered when a filter is applied to the image. The event provides details about the action. -The parameter available in the [`ImageFilterEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html) event is, +Parameters available in [ImageFilterEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html): -ImageFilterEventArgs.Filter - The type of filtering as ImageFilterOption to be applied in the image editor. +- [ImageFilterEventArgs.Filter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageFilterEventArgs_Filter) - The filter type, as an `ImageFilterOption`, to be applied. -ImageFilterEventArgs.Cancel – Specifies to cancel the filtering action. +- [ImageFilterEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFilterEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageFilterEventArgs_Cancel) - Indicates whether the filtering action should be canceled. \ No newline at end of file diff --git a/blazor/image-editor/finetune.md b/blazor/image-editor/finetune.md index 77b00542e3..40a55b5698 100644 --- a/blazor/image-editor/finetune.md +++ b/blazor/image-editor/finetune.md @@ -1,7 +1,7 @@ --- layout: post -title: Finetune with Blazor Image Editor Component | Syncfusion -description: Checkout the Finetune available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Fine-tune with Blazor Image Editor Component | Syncfusion +description: Discover the Finetune feature available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,20 +9,13 @@ documentation: ug # Fine-tune in the Blazor Image Editor component -Fine-tuning involves making precise adjustments to the settings of an image filter in order to achieve a specific desired effect. It provides control over the intensity and specific aspects of the filter's impact on the image. For example, fine-tuning allows you to modify parameters like brightness, saturation, or other relevant properties to fine-tune the level or quality of the filter's effect. This level of control enables you to achieve the exact look or outcome you want for your image. +Fine-tuning provides precise control over image filter settings to achieve a specific visual result. It adjusts the intensity and key attributes of a filter’s effect, such as brightness or saturation, to refine the final output. -## Adjust the brightness, contrast, and saturation +## Adjust brightness, contrast, and saturation -The [`FinetuneImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is [`ImageFinetuneOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html) which determines the type of fine-tuning to be applied (brightness, contrast, and saturation), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of brightness, contrast, and saturation by specifying the desired type and corresponding value. - -Here is an example of brightness, contrast, and saturation fine-tuning using the `FinetuneImageAsync` method. - -## Adjust the hue, exposure, blur, and opacity - -The [`FinetuneImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is [`ImageFinetuneOption`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html) which determines the type of fine-tuning to be applied (hue, exposure, blur, and opacity), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of hue, exposure, blur, and opacity by specifying the desired type and corresponding value. - -Here is an example of hue, exposure, blur, and opacity fine-tuning using the `FinetuneImageAsync` method. +The [FinetuneImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method performs fine-tuning on an image. It accepts two parameters: the first is [ImageFinetuneOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html), which specifies the type of fine-tuning (brightness, contrast, and saturation), and the second is an integer value indicating the degree or intensity of the adjustment. This method enables convenient adjustments to brightness, contrast, and saturation by specifying the desired type and corresponding value. +The following example demonstrates brightness, contrast, and saturation fine-tuning using the `FinetuneImageAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -30,12 +23,8 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi
    Brightness - Blur Contrast Contrast - Exposure - Hue - Opacity
    @@ -56,11 +45,6 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Brightness, 10); } - private async void BlurClick() - { - await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Blur, 10); - } - private async void ContrastClick() { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Contrast, 10); @@ -70,10 +54,39 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Saturation, 100); } +} +``` - private async void ExposureClick() +![Blazor Image Editor with fine-tuning applied](./images/blazor-image-editor-finetune-saturation.jpg) + +## Adjust hue, exposure, blur, and opacity + +The [FinetuneImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_) method also supports fine-tuning for hue, exposure, blur, and opacity. The first parameter is [ImageFinetuneOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageFinetuneOption.html), which specifies the type of fine-tuning to apply (hue, exposure, blur, and opacity), and the second parameter is an integer value representing the intensity of the adjustment. This method allows straightforward adjustment of these properties by specifying the type and value. + +The following example demonstrates hue, exposure, blur, and opacity fine-tuning using the `FinetuneImageAsync` method. + +```cshtml +@using Syncfusion.Blazor.ImageEditor +@using Syncfusion.Blazor.Buttons + +
    + Hue + Exposure + Blur + Opacity +
    + + + + + +@code { + SfImageEditor ImageEditor; + private List customToolbarItem = new List() { }; + + private async void OpenAsync() { - await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Exposure, 10); + await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); } private async void HueClick() @@ -81,6 +94,16 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Hue, 10); } + private async void ExposureClick() + { + await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Exposure, 10); + } + + private async void BlurClick() + { + await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Blur, 10); + } + private async void OpacityClick() { await ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Opacity, 70); @@ -88,16 +111,16 @@ Here is an example of hue, exposure, blur, and opacity fine-tuning using the `Fi } ``` -![Blazor Image Editor with Finetune an image](./images/blazor-image-editor-finetune.jpg) +![Blazor Image Editor with fine-tuning applied](./images/blazor-image-editor-finetune-blur.jpg) ## Finetune value changing event -The [`FinetuneValueChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FinetuneValueChanging) event is triggered when performing fine-tuning on the image. This event is passed an object that contains information about the fine-tuning event, such as the type of fine-tuning and the value of fine-tuning performed. +The [FinetuneValueChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FinetuneValueChanging) event is triggered during fine-tuning. It provides details such as the fine-tune type and the applied value. -The parameter available in the `FinetuneValueChanging` event is, +Parameters available in [FinetuneEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html): -FinetuneEventArgs.Finetune - The type of fine-tuning as ImageFinetuneOption to be applied in the image editor. +- [FinetuneEventArgs.Finetune](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Finetune) - The type of fine-tuning as `ImageFinetuneOption` to be applied in the image editor. -FinetuneEventArgs.Value - The fine-tuning value to be applied in the image editor. +- [FinetuneEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Value) - The fine-tuning value to be applied in the image editor. -FinetuneEventArgs.Cancel – Specifies a boolean value to cancel the fine-tuning action. +- [FinetuneEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FinetuneEventArgs.html#Syncfusion_Blazor_ImageEditor_FinetuneEventArgs_Cancel) - A boolean value that cancels the fine-tuning action. \ No newline at end of file diff --git a/blazor/image-editor/frame.md b/blazor/image-editor/frame.md index 044c396dc5..8f3c7c2254 100644 --- a/blazor/image-editor/frame.md +++ b/blazor/image-editor/frame.md @@ -1,7 +1,7 @@ --- layout: post title: Frame with Blazor Image Editor Component | Syncfusion -description: Checkout the Frame available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Frame feature in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,35 +9,35 @@ documentation: ug # Frames in the Blazor Image Editor component -The frame feature in an Image Editor provides users with the capability to add decorative borders or frames around their images. Frames are a visual design element that can enhance the overall appearance and appeal of an image. +The frame feature in the Image Editor enables adding decorative borders around images. Frames enhance visual appeal and can be styled to match the image context or design requirements. ## Apply frame to the Image -The [`DrawFrameAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method is a function designed to enable the application of various frame options to an image. This method simplifies the process of adding decorative frames, such as mat, bevel, line, hook, and inset, to an image by allowing users to specify their desired frame type. +The [DrawFrameAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method applies a frame to an image with options such as mat, bevel, line, hook, and inset. -Depending on the frame type selected, users may have additional customization options, such as adjusting the frame's thickness, color, texture, or other attributes. This allows for fine-tuning the appearance of the frame to match the image's theme or the user's preferences +Depending on the selected frame type, additional customization options may be available, such as thickness, color, gradient, and other styling attributes. -The `DrawFrameAsync` method in the Image Editor control takes nine parameters to define the properties of the frame to the image: +The `DrawFrameAsync` method accepts nine parameters that define the frame properties: -* frameType - Specified the image data or url of the image to be inserted. +- `frameType` - Specifies the type of frame to apply. -* color - Specifies the color for the frame. +- `color` - Specifies the frame color. -* gradientColor - Specifies the gradient color for the frame. +- `gradientColor` - Specifies the gradient color for the frame. -* size - Specifies the size of the frame. +- `size` - Specifies the frame size. -* inset - Specifies the inset value for line, hook, and inset type frames. +- `inset` - Specifies the inset value for line, hook, and inset frame types. -* offset - Specifies the offset value for line and inset type frames. +- `offset` - Specifies the offset value for line and inset frame types. -* borderRadius - Specifies the border radius for line type frame. +- `borderRadius` - Specifies the border radius for the line frame type. -* frameLineStyle - Specifies the frame line style for line type frame. +- `frameLineStyle` - Specifies the frame line style for the line frame type. -* lineCount - Specifies the line count for the line type frame. +- `lineCount` - Specifies the line count for the line frame type. -Here is an example of Frame using the `DrawFrameAsync` method. +Here is an example of applying frames using the `DrawFrameAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -91,20 +91,20 @@ Here is an example of Frame using the `DrawFrameAsync` method. } ``` -![Blazor Image Editor with Frame an image](./images/blazor-image-editor-frame.png) +![Blazor Image Editor with a frame applied](./images/blazor-image-editor-frame.jpg) ## Frame changing event -The [`FrameChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered when applying frame on the image. This event provides information encapsulated within an object, which includes details about the frame applied in an image. This information encompasses: +The [FrameChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered while applying a frame. The event object provides details about the frame settings involved in the change. -Frame Type: This indicates the specific type of frame being applied, whether it's a mat, bevel, line, or hook. +- Frame type: Specifies the type of frame applied, such as mat, bevel, line, hook, or inset. -Customization Values: These values contain information about any adjustments or modifications made to the frame. For instance, if the frame can be customized with attributes like color, size, or style, these details are conveyed within the event object. +- Customization values: Includes attributes such as color, size, style, inset, offset, gradient color, and related settings. -The parameter available in the [`FrameChangeEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html) is +Parameters available in [FrameChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html): -* [`FrameChangeEventArgs.PreviousFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is applied before changing the frame. +- [FrameChangeEventArgs.PreviousFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - Frame settings (size, color, inset, offset, gradient color) applied before the change. -* [`FrameChangeEventArgs.CurrentFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is going to apply after changing the frame. +- [FrameChangeEventArgs.CurrentFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - Frame settings (size, color, inset, offset, gradient color) to be applied after the change. -* [`FrameChangeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Specifies a boolean value to cancel the frame changing action. \ No newline at end of file +- [FrameChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Indicates whether to cancel the frame-changing action. \ No newline at end of file diff --git a/blazor/image-editor/how-to/clear-image.md b/blazor/image-editor/how-to/clear-image.md index 1fe69261e8..bf4a911539 100644 --- a/blazor/image-editor/how-to/clear-image.md +++ b/blazor/image-editor/how-to/clear-image.md @@ -1,7 +1,7 @@ --- layout: post title: Clear an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Learn how to clear an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Clear an Image in the Blazor Image Editor component -The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `ClearImageAsync` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. +The [ClearImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method clears the current image from the editor. This is useful when the component is rendered in a dialog: calling `ClearImageAsync` before closing the dialog prevents the previously loaded image from persisting when the dialog is reopened, ensuring a fresh state for a new selection. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -37,4 +37,4 @@ The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-clear-image.jpg) \ No newline at end of file +![Blazor Image Editor clearing the image](../images/blazor-image-editor-clear-image.jpg) \ No newline at end of file diff --git a/blazor/image-editor/how-to/render-dialog.md b/blazor/image-editor/how-to/render-dialog.md index 45e1db9d6a..bf371930c1 100644 --- a/blazor/image-editor/how-to/render-dialog.md +++ b/blazor/image-editor/how-to/render-dialog.md @@ -1,7 +1,7 @@ --- layout: post -title: Clear an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Render Image Editor in a Dialog Component | Syncfusion +description: Render the Blazor Image Editor in a modal dialog for a focused, space-saving editing experience in Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Render Image Editor in Dialog Component -Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page. +Rendering the Image Editor in a dialog displays the component within a modal window, enabling image editing in a pop-up interface. This approach helps maintain a clean layout and provides a focused editing experience without navigating away from the current page. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -23,44 +23,45 @@ Rendering the Image Editor in a dialog involves displaying the image editor comp Open Image } - + +
    - +
    -     @code { private bool Visibility { get; set; } = false; private bool ShowButton { get; set; } = true; - SfImageEditor ImageEditor; + SfImageEditor ImageEditor; - private async void OpenDialogAsync() - { + private void OpenDialogAsync() + { this.Visibility = true; } - private async void OpenAsync() - { - await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); + private async void OpenAsync() + { + await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); + ImageEditor.RefreshAsync(); } - private void BeforeDialogOpen(BeforeOpenEventArgs args) + private void BeforeDialogOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args) { this.ShowButton = false; } - private void DialogClosed(CloseEventArgs args) + private void DialogClosed(Syncfusion.Blazor.Popups.CloseEventArgs args) { this.ShowButton = true; } } ``` -![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-dialog.jpg) \ No newline at end of file +![Blazor Image Editor rendered in a dialog](../images/blazor-image-editor-dialog.jpg) \ No newline at end of file diff --git a/blazor/image-editor/how-to/reset.md b/blazor/image-editor/how-to/reset.md index d8b385126c..5891d76c55 100644 --- a/blazor/image-editor/how-to/reset.md +++ b/blazor/image-editor/how-to/reset.md @@ -1,7 +1,7 @@ --- layout: post -title: Reset an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Reset an image in the Blazor Image Editor | Syncfusion +description: Learn how to reset an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,6 +9,6 @@ documentation: ug # Reset an image in the Blazor Image Editor component -The [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. +The [ResetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all changes made to an image and revert it to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and a return to the original, unmodified version is required. -By invoking the `ResetAsync` method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image. \ No newline at end of file +Invoking the `ResetAsync` method discards all modifications and restores the image to its initial state, enabling a clean restart of the editing process. \ No newline at end of file diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md index 37adfee207..efe53d636f 100644 --- a/blazor/image-editor/image-restrictions.md +++ b/blazor/image-editor/image-restrictions.md @@ -1,7 +1,7 @@ --- layout: post title: Image Restrictions with Blazor Image Editor Component | Syncfusion -description: Checkout the Image Restrictions available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Image Restrictions in the Blazor Image Editor component -The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience. +The Image Editor supports restricting image uploads by file extension and by minimum and maximum file size using the [ImageEditorUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. When an uploaded image does not meet the configured criteria, the component displays an alert to guide the end user and maintain a smooth workflow. -`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions. +Note: File restrictions apply when opening images via the open method or the built-in uploader. If upload settings are not defined, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions, with no file size restrictions. ## Allowed image extensions -The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`, `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions. +Configure allowed file extensions for uploaded images using the [ImageEditorUploadSettings.AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property. This ensures that only supported formats—such as .jpg, .png, .svg, .webp, and .bmp—are processed, improving compatibility and preventing errors caused by unsupported file types. By default, the Image Editor allows .jpg, .png, .svg, .webp, and .bmp. -`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string. +Note: Specify allowed extensions as a comma-separated string, for example: '.jpg, .svg'. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. @@ -46,9 +46,9 @@ Here is an example of configuring image restrictions using the `ImageEditorUploa ## Minimum and maximum image size -The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed. +Set minimum and maximum upload size limits using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. These constraints enforce consistent input and prevent oversized or undersized files from being processed. -`Note:` Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply. +Note: When images are uploaded as base64 strings, file extension validation is bypassed; file size restrictions still apply. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. diff --git a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg index d3fac69d34..89e0e753a6 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg and b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg index a4c7054275..7f9547315e 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg index 0551f2a81c..95a1173f43 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-filter.jpg b/blazor/image-editor/images/blazor-image-editor-filter.jpg index 95ce80ddd8..c060cc35e4 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-filter.jpg and b/blazor/image-editor/images/blazor-image-editor-filter.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg new file mode 100644 index 0000000000..db32269942 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg new file mode 100644 index 0000000000..2c6925dc90 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-finetune.jpg b/blazor/image-editor/images/blazor-image-editor-finetune.jpg deleted file mode 100644 index 0b43d5c60f..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-finetune.jpg and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-frame.jpg b/blazor/image-editor/images/blazor-image-editor-frame.jpg new file mode 100644 index 0000000000..a3fc817954 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-frame.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-frame.png b/blazor/image-editor/images/blazor-image-editor-frame.png deleted file mode 100644 index 557e1cafa4..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-frame.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg new file mode 100644 index 0000000000..cb227691e9 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png deleted file mode 100644 index 3bccbdb8bc..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.jpg b/blazor/image-editor/images/blazor-image-editor-redact.jpg new file mode 100644 index 0000000000..64de0991ec Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-redact.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.png b/blazor/image-editor/images/blazor-image-editor-redact.png deleted file mode 100644 index e2b20c0982..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-redact.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.jpg b/blazor/image-editor/images/blazor-image-editor-resize.jpg new file mode 100644 index 0000000000..7ae9df6a9c Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-resize.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.png b/blazor/image-editor/images/blazor-image-editor-resize.png deleted file mode 100644 index cc0ea39490..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-resize.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg new file mode 100644 index 0000000000..315d29b056 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.png b/blazor/image-editor/images/blazor-image-editor-undo-redo.png deleted file mode 100644 index 61da88b7f6..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-undo-redo.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-z-order.jpg b/blazor/image-editor/images/blazor-image-editor-z-order.jpg index dc79249e53..c5942a8d6c 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-z-order.jpg and b/blazor/image-editor/images/blazor-image-editor-z-order.jpg differ diff --git a/blazor/image-editor/localization.md b/blazor/image-editor/localization.md index 32b91c70a1..bad0747e6b 100644 --- a/blazor/image-editor/localization.md +++ b/blazor/image-editor/localization.md @@ -1,15 +1,14 @@ --- layout: post title: Localization with Blazor Image Editor Component | Syncfusion -description: Checkout the Localization available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- - # Localization in the Blazor Image Editor component -[Blazor Image editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. -N> You can also explore our [Blazor Image editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to know how to render and configure the image editor. \ No newline at end of file +N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor. \ No newline at end of file diff --git a/blazor/image-editor/quick-access.md b/blazor/image-editor/quick-access.md index 6c5c662e81..4b9773ce5a 100644 --- a/blazor/image-editor/quick-access.md +++ b/blazor/image-editor/quick-access.md @@ -1,41 +1,34 @@ --- layout: post title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion -description: Checkout the Quick Access Toolbar available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- -# Quick access toolbar in the Blazor Image Editor Component +# Quick Access Toolbar in the Blazor Image Editor Component -The quick access toolbars in the Image Editor play a vital role in facilitating interactions with annotations like Rectangle, Ellipse, Line, Arrow, and Path. These toolbars offer a diverse array of tools and options that can be tailored to match the specific requirements and preferences associated with each annotation type. The toolbar is only displayed when an annotation is selected, ensuring a focused and contextual user experience. +The quick access toolbars in the Image Editor facilitate interactions with annotations such as Rectangle, Ellipse, Line, Arrow, and Path. These toolbars provide a configurable set of tools and options tailored to each annotation type. The toolbar appears only when an annotation is selected, ensuring a focused and contextual editing experience. -The [`ShowQuickAccessToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls the visibility of the quick access toolbar. Users have the flexibility to enable or disable this toolbar, add or remove items, and create a personalized set of tools. +The [ShowQuickAccessToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls quick access toolbar visibility. The toolbar can be enabled or disabled, items can be added or removed, and a customized toolset can be configured. ## Add a custom toolbar item -The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [`QuickAccessToolbarOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar is opened, allowing you to modify its contents. To add additional toolbar items to the quick access toolbar, you can access the ToolbarItems property of the [`QuickAccessToolbarEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from the ToolbarItems property based on the Item property, you can customize the options available in the quick access toolbar according to your needs. This gives you the ability to extend the functionality of the quick access toolbar and provide additional tools and options for working with inserted annotations. +The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar opens, allowing modification of its contents. Additional toolbar items can be included by accessing the `ToolbarItems` property of the [QuickAccessToolbarEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from `ToolbarItems` based on the `Item` property, the quick access toolbar options can be customized to match specific requirements for working with inserted annotations. -Here is an example of adding the custom toolbar item to the quick access toolbar. +Here is an example of adding a custom toolbar item to the quick access toolbar. ```cshtml @using Syncfusion.Blazor.ImageEditor @using Syncfusion.Blazor.Navigations - + @code { SfImageEditor ImageEditor; - private List customToolbarItem = new List() - { - new ImageEditorToolbarItemModel { Name = "Annotation" }, - new ImageEditorToolbarItemModel { Name = "Confirm" }, - new ImageEditorToolbarItemModel { Name = "Reset" } - }; - private async void OpenAsync() { await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); @@ -48,4 +41,4 @@ Here is an example of adding the custom toolbar item to the quick access toolbar } ``` -![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.png) \ No newline at end of file +![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.jpg) \ No newline at end of file diff --git a/blazor/image-editor/redact.md b/blazor/image-editor/redact.md index 44004c3334..7533632d49 100644 --- a/blazor/image-editor/redact.md +++ b/blazor/image-editor/redact.md @@ -1,7 +1,7 @@ --- layout: post title: Redact with Blazor Image Editor Component | Syncfusion -description: Checkout the Redact available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Redact support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,49 +9,49 @@ documentation: ug # Redact in the Blazor Image Editor component -The redact feature in an Image Editor is a valuable tool that empowers users to conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information. +The redact feature conceals sensitive content by applying blur or pixel effects to selected regions of an image. It supports privacy protection and regulatory compliance, enabling secure image sharing without exposing confidential information. ## Apply redact to the image -The Image Editor control includes a [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method, which allows you to draw redaction on an image. This method takes six parameters that define how the redact should be carried out: +The Image Editor control provides the [DrawRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method to draw a redaction on an image. This method accepts six parameters that define how the redaction is applied: -* redactType: Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value. +* redactType: Defines the redaction type to draw on the image, such as blur or pixelate. If not specified, redaction uses the default blur type. -* startX: Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter. +* startX: Defines the x-coordinate of the redaction. If not specified, redaction starts from the image center. -* startY: Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image. +* startY: Defines the y-coordinate of the redaction. If not specified, redaction starts from the image center. -* width: Specifies the width of redaction. The default value is 100. +* width: Defines the redaction width. The default value is 100. -* height: Specifies the height of redaction. The default value is 50. +* height: Defines the redaction height. The default value is 50. -* value: Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur. +* value: Defines the blur intensity for blur-type redaction or the pixel size for pixelate-type redaction. The default is 20 because the default redaction type is blur. ## Selecting a redact -The Image Editor control includes a [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method, which allows you to select a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [SelectRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method to select a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to perform selection. This method accepts one parameter: -* id: Specifies the redact id to select a redact on an image. +* id: Defines the redaction identifier to select a redaction on an image. ## Deleting a redact -The Image Editor control includes a [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method, which allows you to delete a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [DeleteRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method to delete a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to delete the corresponding redaction. This method accepts one parameter: -* id: Specifies the redact id to delete a redact on an image. +* id: Defines the redaction identifier to delete a redaction on an image. ## Updating a redact -The Image Editor control includes a [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method, which allows you to update the existing redacts by changing its height, width, blur, and pixel size in the component. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redacts which is then passed to change the options of a redacts. This method takes two parameters that define how the redact should be carried out: +The Image Editor control provides the [UpdateRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method to update existing redactions by modifying height, width, blur intensity, or pixel size. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redactions and pass them to update the desired options. This method accepts two parameters: -* setting: Specifies the redact settings to be updated for the shape on an image. +* setting: Defines the redact settings to update for the redaction on an image. -* isSelected: Specifies to show the redacts in the selected state. +* isSelected: Defines whether to show the redactions in the selected state. ## Getting redacts -The Image Editor control includes a [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method, which allows you to get all the redact details which is drawn on an image editor. +The Image Editor control provides the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to retrieve all redaction details drawn in the Image Editor. -Here's an example demonstrating how to draw, select, delete, update, and get redacts on an image using the [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__), [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_), [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_), [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) and [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) methods. +The following example demonstrates how to draw, select, delete, update, and get redactions using the `DrawRedactAsync`, `SelectRedactAsync`, `DeleteRedactAsync`, `UpdateRedactAsync` and `GetRedactsAsync` methods. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -77,7 +77,7 @@ Here's an example demonstrating how to draw, select, delete, update, and get red private async void addRedact() { ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); - await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 100, Dimension.Y.Value + 100, 200, 300); + await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 10, Dimension.Y.Value + 10, 200, 300); } private async void updateRedact() { @@ -104,4 +104,4 @@ Here's an example demonstrating how to draw, select, delete, update, and get red } ``` -![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.png) \ No newline at end of file +![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.jpg) \ No newline at end of file diff --git a/blazor/image-editor/resize.md b/blazor/image-editor/resize.md index 12775e7c19..03d237bb02 100644 --- a/blazor/image-editor/resize.md +++ b/blazor/image-editor/resize.md @@ -1,7 +1,7 @@ --- layout: post title: Resizing with Blazor Image Editor Component | Syncfusion -description: Checkout the Resizing available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the resizing support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,22 +9,22 @@ documentation: ug # Resize in the Blazor Image Editor component -The resize feature in an Image Editor is a valuable tool that empowers users to modify the size or dimensions of an image to meet their specific requirements. Whether it's for printing, web display, or any other purpose, this feature allows users to tailor images to their desired specifications. +The resize feature adjusts the size or dimensions of an image to match specific requirements for printing, web display, or other use cases. ## Apply resize to the image -The Image Editor control includes a [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method, which allows you to adjust the size of an image. This method takes three parameters that define how the resizing should be carried out: +The Image Editor control provides the [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method to change image size. This method accepts three parameters that define the resizing behavior: -* width: Specifies the resizing width of the image. +- width: Sets the target width of the image. -* height: Specifies the resizing height of the image. +- height: Sets the target height of the image. -* isAspectRatio: Specifies a boolean value indicating whether the image should maintain its original aspect ratio during resizing. - * When set to `true`, the image maintains its original aspect ratio. The width is applied as specified, and the height is automatically adjusted to maintain the aspect ratio. - * When set to `false`, the image is resized according to the specified width and height, without maintaining the aspect ratio. - * The default value is `false`. +- isAspectRatio: Indicates whether to preserve the original aspect ratio. + - When `true`, the image maintains its original aspect ratio. The specified width is applied, and the height adjusts automatically. + - When `false`, the image resizes to the specified width and height without preserving the aspect ratio. + - The default value is `false`. -Here is an example of resizing the image using the `ImageResizeAsync` method. +Here is an example of resizing the image using the `ImageResizeAsync` method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -60,22 +60,22 @@ Here is an example of resizing the image using the `ImageResizeAsync` method. } ``` -![Blazor Image Editor with Resize an image](./images/blazor-image-editor-resize.png) +![Blazor Image Editor with a resized image](./images/blazor-image-editor-resize.jpg) ## Resizing event -The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event is triggered when resizing the image. This event provides information encapsulated within an object, which includes details about the previous and current height and width of an image. +The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event triggers while an image is being resized and provides details about the previous and current dimensions. -The parameter available in ResizeEventArgs is, +Parameters available in [ImageResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html): -* [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) - The width of the image before resizing is performed. +- [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) – The width of the image before resizing. -* [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) - The height of the image before resizing is performed. +- [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) – The height of the image before resizing. -* [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) - The width of the image after resizing is performed. +- [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) – The width of the image after resizing. -* [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) - The width of the image after resizing is performed. +- [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) – The height of the image after resizing. -* [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) - The type of resizing performed such as aspect ratio or non-aspect ratio. +- [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) – Indicates whether the resizing preserved the aspect ratio. -* [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) - Specifies a boolean value to cancel the resizing action. \ No newline at end of file +- [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) – A boolean value that cancels the resizing action when set to true. \ No newline at end of file diff --git a/blazor/image-editor/undo-redo.md b/blazor/image-editor/undo-redo.md index 275543a034..d00b1f8534 100644 --- a/blazor/image-editor/undo-redo.md +++ b/blazor/image-editor/undo-redo.md @@ -1,27 +1,27 @@ --- layout: post -title: Undo Redo with Blazor Image Editor Component | Syncfusion -description: Checkout the Undo Redo available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Undo and Redo with Blazor Image Editor Component | Syncfusion +description: Explore undo and redo features in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- -# Undo Redo in the Blazor Image Editor component +# Undo and redo in the Blazor Image Editor component -The undo and redo functionalities provide a way to reverse and repeat editing actions performed on an image. These features are essential for maintaining control and flexibility during the editing process. +The undo and redo functionalities enable reversing and reapplying editing actions performed on an image. These capabilities are essential for maintaining control and flexibility during the editing process. -In Blazor Image Editor component, the undo and redo history typically have a limited capacity, and the number of steps that can be stored is 16 steps, meaning that the editor keeps track of the most recent 16 actions performed on the image. Once the history reaches its maximum capacity, any new actions beyond the 16th step will result in the removal of the oldest action from the history. +In the Blazor Image Editor component, the undo and redo history has a fixed capacity of 16 steps. The editor tracks the most recent 16 actions performed on the image. When the history reaches its maximum capacity, any new action removes the oldest action from the history. -## Undo the action +## Undo the action -The undo action in an image editor allows users to revert the most recent editing action or a series of actions back to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, effectively restoring the image to its state before the action was performed. The undo action is useful for correcting mistakes, removing unwanted changes, or exploring different editing options without permanently altering the image. +The undo action reverts the most recent editing action or a series of actions to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, restoring the image to its prior state. The undo action is useful for correcting mistakes, removing unwanted changes, or testing different editing options without permanently altering the image. ## Redo the action -The redo action in an image editor allows users to reapply previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, bringing the image back to the state it was in after the action was initially applied. The redo is useful when users want to repeat an action that was previously undone or restore changes that were temporarily reversed. +The redo action reapplies previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, returning the image to the state it was in after the action was initially applied. The redo action is useful for repeating an action that was previously undone or restoring changes that were temporarily reversed. -Here is an example of undoing and redoing the action using the [`UndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [`RedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method. +Here is an example of undoing and redoing the action using the [UndoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [RedoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -64,4 +64,4 @@ Here is an example of undoing and redoing the action using the [`UndoAsync`](htt } ``` -![Blazor Image Editor with Undo Redo an image](./images/blazor-image-editor-undo-redo.png) +![Blazor Image Editor showing undo and redo actions](./images/blazor-image-editor-undo-redo.jpg) diff --git a/blazor/image-editor/z-order.md b/blazor/image-editor/z-order.md index 5e55aae56f..55db766b69 100644 --- a/blazor/image-editor/z-order.md +++ b/blazor/image-editor/z-order.md @@ -1,7 +1,7 @@ --- layout: post title: Z-order with Blazor Image Editor Component | Syncfusion -description: Checkout the Z-order in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Z-order support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,20 +9,16 @@ documentation: ug # Z-order in the Blazor Image Editor Component -We are excited to introduce `z-order` support in the Image Editor. It's a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. +The Image Editor supports z-order control to manage the stacking order of annotations. This capability is useful when designing templates such as greeting cards or posters, where arranging multiple annotations in the correct order is essential. -Types of adjustment in the Image Editor `z-order` support. +The following z-order actions are available: -* [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) - Switch the selected annotation with the annotation one layer ahead of it. +- [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) – Swap the selected annotation with the one directly above it. +- [Send backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) – Swap the selected annotation with the one directly below it. +- [Bring to front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) – Move the selected annotation in front of all other annotations. +- [Send to back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) – Move the selected annotation behind all other annotations. -* [Sent Backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) - Switch the selected annotation with the annotation one layer behind it. - -* [Bring to Front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) - Move the selected annotation to ahead of all other annotations. - -* [Send to Back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) - Move the selected annotation to behind all other annotations. - - -In the following example, you can use the `z-order` support. +The following example demonstrates z-order support: ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -79,4 +75,4 @@ In the following example, you can use the `z-order` support. } ``` -![Blazor Image Editor with Opening an image](./images/blazor-image-editor-z-order.jpg) +![Blazor Image Editor z-order example](./images/blazor-image-editor-z-order.jpg) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md new file mode 100644 index 0000000000..d66c1982d1 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md @@ -0,0 +1,531 @@ +--- +layout: post +title: Sentiment Analysis in Blazor Kanban | Syncfusion +description: Learn how to use Syncfusion Blazor Kanban with AI to analyze the emotional tone of tasks using sentiment analysis. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Kanban, AI sentiment analysis, Syncfusion Blazor AI +--- + +# Sentiment Analysis in Blazor Kanban Component + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to perform sentiment analysis in the Syncfusion Blazor Kanban component. The AI integration enables automatic detection of emotional tone in task descriptions, helping teams prioritize and respond to tasks more effectively. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Kanban -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 OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## Add Stylesheet and Script Resources + +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: + +- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. +- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. + +```html + + + + + + +``` + +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. + +## Configure AI Service + +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: +- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. +- **Ollama**: Suitable for self-hosted, privacy-focused AI models. + +Follow the instructions for your selected service to register the AI model in your application. + +### OpenAI + +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI + +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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Azure.AI.OpenAI; +using Microsoft.Extensions.AI; +using System.ClientModel; + +var builder = WebApplication.CreateBuilder(args); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Ollama + +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. +2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). +3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OllamaSharp; + +var builder = WebApplication.CreateBuilder(args); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `http://localhost:11434`) before starting the application. + +## Register Syncfusion Blazor Service + +Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: + +- **Server Mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. + +{% tabs %} +{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} + +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} + +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +await builder.Build().RunAsync(); + +{% endhighlight %} +{% endtabs %} + +## Razor Component + +This section demonstrates how to implement sentiment analysis in the Syncfusion Blazor Kanban component using AI. The AI Assistant evaluates the emotional tone of each task description and displays a corresponding emoji (😊, 😐, 😞) to help teams quickly assess the mood or urgency of tasks. This can be especially useful in agile workflows where emotional context can influence task priority and team communication. + +(`Home.razor`) + +```csharp +@using Syncfusion.Blazor.Kanban +@using Syncfusion.Blazor.SplitButtons +@using Syncfusion.Blazor.Calendars +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@using AISamples.Components.Models +@using AISamples.Components.Service +@inject AzureAIService OpenAIService + +
    + + + +
    +
    +
    + + + @foreach (ColumnModel item in columnData) + { + + } + + + + + + + + +
    +
    + +``` + +`Home.razor.cs` + +```csharp + +using System.Text.Json; +using AISamples.Components.Models; +using Syncfusion.Blazor.DropDowns; +using Syncfusion.Blazor.Inputs; +using Syncfusion.Blazor.Kanban; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfDropDownList CategoryRef; + SfTextBox DescriptionRef; + private string SelectedAPI = "Open AI"; + private bool ShowScore = false; + private bool IsSpinner = false; + private List Pizza = new PizzaDataModel().GetPizzaData(); + public string Content = "Check Customer Sentiments"; + private async Task GetScore() + { + this.IsSpinner = true; + string result = ""; + string json = JsonSerializer.Serialize(Pizza, new JsonSerializerOptions { WriteIndented = true }); + var description = "Provide a SentimentScore out of 5 (whole numbers only) based on the Feedback. If the feedback is null, do not give a SentimentScore. Use the dataset provided below to make recommendations. NOTE: Return the data in JSON format with all fields included, and return only JSON data, no explanatory text." + json; + result = await OpenAIService.GetCompletionAsync(description); + string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim(); + this.Pizza = JsonSerializer.Deserialize>(data); + this.IsSpinner = false; + foreach(var item in Pizza) + { + if(item.SentimentScore > 0 && item.SentimentScore <= 2) + { + item.Emoji = "😢"; + } + else if (item.SentimentScore > 3 && item.SentimentScore <= 5) + { + item.Emoji = "😀"; + } + else if (item.SentimentScore == 3) + { + item.Emoji = "😐"; + } + } + this.ShowScore = true; + StateHasChanged(); + } + private List CategoryData = new List() + { + new DropDownModel { Id = 0, Value = "Menu" }, + new DropDownModel { Id = 1, Value = "Order" }, + new DropDownModel { Id = 2, Value = "Ready to Serve" }, + new DropDownModel { Id = 3, Value = "Delivered"}, + new DropDownModel { Id = 3, Value = "Served"}, + }; + private class DropDownModel + { + public int Id { get; set; } + public string Value { get; set; } + } + private List columnData = new List() { + new ColumnModel(){ HeaderText= "Menu", KeyField= new List() { "Menu" } }, + new ColumnModel(){ HeaderText= "Order", KeyField= new List() { "Order" } }, + new ColumnModel(){ HeaderText= "Ready to Serve", KeyField= new List() { "Ready to Serve"} }, + new ColumnModel(){ HeaderText= "Delivered", KeyField=new List() { "Delivered", "Served" } } + }; + public void Begin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + Content = "Analyzing..."; + } + public async Task End(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + while (this.IsSpinner) + { + await Task.Delay(1000); + } + Content = "Check Cusotomer Sentiments"; + } + } +} +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Kanban will display an error message ("Oops! Please try again!"). Common issues include: + +- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. +- **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported. +- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances. +- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + +![Kanban AI Assistant - Output](../../ai/images/sentiment-analysis.png) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md new file mode 100644 index 0000000000..a8034ddae5 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md @@ -0,0 +1,584 @@ +--- +layout: post +title: Smart Task Suggestion in Blazor Kanban with AI Models| Syncfusion +description: Learn how to use Syncfusion Blazor Kanban with AI to automatically generate and assign tasks based on project descriptions. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Kanban, AI task suggestion, Syncfusion Blazor AI +--- + +# Smart Task Suggestion in Blazor Kanban Component + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to enhance task planning in the Syncfusion Blazor Kanban component. The AI integration enables intelligent task generation based on project descriptions, sprint planning, and backlog management. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Kanban -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 OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## Add Stylesheet and Script Resources + +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: + +- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. +- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. + +```html + + + + + + +``` + +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. + +## Configure AI Service + +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: +- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. +- **Ollama**: Suitable for self-hosted, privacy-focused AI models. + +Follow the instructions for your selected service to register the AI model in your application. + +### OpenAI + +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI + +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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Azure.AI.OpenAI; +using Microsoft.Extensions.AI; +using System.ClientModel; + +var builder = WebApplication.CreateBuilder(args); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Ollama + +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. +2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). +3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OllamaSharp; + +var builder = WebApplication.CreateBuilder(args); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `http://localhost:11434`) before starting the application. + +## Register Syncfusion Blazor Service + +Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: + +- **Server Mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. + +{% tabs %} +{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} + +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} + +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +await builder.Build().RunAsync(); + +{% endhighlight %} +{% endtabs %} + +## Razor Component + +This section demonstrates how to implement the Syncfusion Blazor Kanban component with AI-powered task generation. The AI Assistant analyzes the provided project description and automatically suggests relevant tasks, which are then displayed in the Kanban board. + +(`Home.razor`) + +```csharp + +@rendermode InteractiveServer +@inject AzureAIService OpenAIService +@using Syncfusion.Blazor.Kanban +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.SplitButtons +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Notifications +@using BlazorApp4.Components.Models +@using BlazorApp4.Components.Service +@using Syncfusion.Blazor.Grids + +@if (isHomapage) +{ +
    +
    +
    +
    +

    AI Smart Task Suggestion

    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +} +else +{ +
    +
    +
    + @if (showBacklogs) + { +
    +

    Kanban Board

    +
    + Add New Projects +
    +
    + +
    +
    + if (!showBacklogBoard) + { +
    + + + + + + + + + + + + + +
    + } + else if (showBacklogBoard) + { +
    + + + + + + + + + + + +
    + } + } +
    +
    +
    +} + + + + + +
    AI Smart Task Suggestion
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +     + +
    +
    +
    + + + +
    +
    +
    +     +     + +     + +``` + +`Home.razor.cs` + +```csharp +using System.Text.Json; +using AISamples.Components.Models; +using Microsoft.AspNetCore.Components; +using Syncfusion.Blazor.Grids; +using Syncfusion.Blazor.Kanban; +using Syncfusion.Blazor.Notifications; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfToast ToastObj; + public string[] SelectedAssignees { get; set; } = new string[] { }; + private string ToastTarget { get; set; } = "#toast-kanban-observable"; + SfKanban kanbanObj; + public string ContentGenerateTask = "Generate Tasks"; + public string BacklogButtonViewContent = "View as Backlog"; + private string TextBoxValue = string.Empty; + private string TasksValue = string.Empty; + private bool enableProjectDetailsDialog = false; + private bool isGeneratedProjectTasks = false; + private bool enableTaskEditing = false; + private bool isHomapage = true; + private bool showSprintBoard = false; + private bool showBacklogs = false; + private bool showBacklogBoard = true; + private List smartSuggestion = new List(); + private DialogSettings DialogParams = new DialogSettings { MinHeight = "400px", Width = "450px" }; + private string waringText = "Click \"Generate Tasks\" to preview"; + private void GoToBacklogBoardView() + { + if (BacklogButtonViewContent == "View as Board") + { + BacklogButtonViewContent = "View as Backlog"; + showBacklogBoard = true; + } + else + { + showBacklogBoard = false; + BacklogButtonViewContent = "View as Board"; + } + showSprintBoard = false; + } + private RenderFragment GetTemplate() => builder => + { + builder.OpenElement(0, "div"); + builder.AddContent(1, "An error occurred during the AI process, Please try again."); + builder.CloseElement(); + }; + public void BeginGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + ContentGenerateTask = "Generating..."; + } + public async Task EndGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + while (!isGeneratedProjectTasks) + { + await Task.Delay(1000); + } + this.isHomapage = false; + this.CloseDialog(); + showBacklogs = true; + } + private async Task GenerateProjectTasks() + { + try + { + if (!string.IsNullOrEmpty(TextBoxValue) && !string.IsNullOrEmpty(TasksValue)) + { + string result = ""; + var description = $"Generate {TasksValue} task recommendations for {TextBoxValue}. Each task should include the following fields: Id (like example: ID should be in project name simple 4char word - 1), Title, Status, Description, Assignee, StoryPoints, Color and Due Date, formatted according to the dataset. Assign each task to the Assignee: empty string, set the Status to 'Open', and use black for the Color. Use the dataset provided below to create your recommendations. IMPORTANT: Return the data strictly in JSON format with all the required fields. Only the JSON data is needed, no additional text.Return only the JSON array format without any explanations."; + result = await OpenAIService.GetCompletionAsync(description); + if (result != null) + { + string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim(); + List modifiedData; + modifiedData = JsonSerializer.Deserialize>(data); + smartSuggestion = modifiedData != null ? smartSuggestion.Concat(modifiedData).ToList() : smartSuggestion; + this.isGeneratedProjectTasks = true; + } + ContentGenerateTask = "Generate Tasks"; + } + else + { + waringText = string.IsNullOrEmpty(TextBoxValue) && string.IsNullOrEmpty(TasksValue) ? "Enter the required task creation details" : !string.IsNullOrEmpty(TasksValue) ? "Enter the Project Details" : "Enter the number of tasks"; + } + } + catch + { + await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(), ShowCloseButton = true, Timeout = 0 }); + } + } + private void OpenProjectDetailsDialog() + { + this.enableProjectDetailsDialog = true; + } + private async Task GenerateTasks() + { + this.isGeneratedProjectTasks = false; + await this.GenerateProjectTasks(); + } + private void SaveTask() + { + this.enableProjectDetailsDialog = false; + this.TasksValue = string.Empty; + this.TextBoxValue = string.Empty; + this.isGeneratedProjectTasks = false; + StateHasChanged(); + } + private void CloseDialog() + { + this.enableProjectDetailsDialog = false; + this.TasksValue = string.Empty; + this.TextBoxValue = string.Empty; + this.isGeneratedProjectTasks = false; + StateHasChanged(); + } + public void TaskEditingHandler(Syncfusion.Blazor.Grids.ActionEventArgs args) + { + if (args.RequestType.ToString() == "Add") + { + enableTaskEditing = true; + } + else + { + enableTaskEditing = false; + } + } + public void RowCreatedHandler(RowCreatedEventArgs args) + { + args.Data.Status = "Open"; + args.Data.Color = "#000000"; + } + } +} + +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Kanban will display an error message ("Oops! Please try again!"). Common issues include: + +- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. +- **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported. +- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances. +- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + +![Kanban AI Assistant - Output](../../ai/images/smart-task-suggestion.png) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md b/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md new file mode 100644 index 0000000000..d2db103885 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/pivot-table/smart-pivot.md @@ -0,0 +1,870 @@ +--- +layout: post +title: AI-Powered Smart Pivot Table with Syncfusion Blazor | Syncfusion +description: Learn how to use Syncfusion Blazor Pivot Table with AI service to Smart Data Aggregation, Predictive Modeling and Adaptive Filtering. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Pivot Table, Syncfusion Blazor AI, Smart Data Aggregation, Predictive Modeling and Adaptive Filtering +--- + +# Creating an AI-Powered Smart Blazor Pivot Table + +The Syncfusion Blazor Pivot Table can be enhanced with AI-driven features by using the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) NuGet package. This guide helps you add AI features to your Pivot Table, including Smart Data Aggregation, Predictive Modeling, and Adaptive Filtering. You can use different AI services such as OpenAI, Azure OpenAI, or Ollama. With these features, you can interact with the Pivot Table in a smarter way to understand your data better. + +In this guide +- Prerequisites +- Add Stylesheet and Script Resources +- Configure your AI service (OpenAI, Azure OpenAI, Ollama) +- Register the Syncfusion Blazor service +- Razor component: AI-driven features for your Pivot Table +- How the sample works +- Error Handling and Troubleshooting +- Performance Considerations +- Sample Code + +## Prerequisites + +Install the NuGet packages that match your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.PivotTable -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 OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## Add Stylesheet and Script Resources + +Include the theme stylesheet and script via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: + +- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. +- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. + +```html + + + + + + +``` + +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. + +## Configure your AI service + +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: +- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. +- **Ollama**: Suitable for self-hosted, privacy-focused AI models. + +Follow the instructions for your selected service to register the AI model in your application. + +### OpenAI + +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI + +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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Azure.AI.OpenAI; +using Microsoft.Extensions.AI; +using System.ClientModel; + +var builder = WebApplication.CreateBuilder(args); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Ollama + +To use self-hosted AI models with Ollama: + +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) (e.g., `llama2:13b`, `mistral:7b`). +3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OllamaSharp; + +var builder = WebApplication.CreateBuilder(args); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `http://localhost:11434`) before starting the application. + +## Register the Syncfusion Blazor service + +Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: + +- **Server Mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. + +{% tabs %} +{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} + +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} + +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +await builder.Build().RunAsync(); + +{% endhighlight %} +{% endtabs %} + +## Razor component + +### AI-driven features for your Pivot Table + +This section shows you how to create a Syncfusion Blazor Pivot Table with AI-driven features. The AI features help you explore your data in new ways: + +- **Predictive Modeling**: The AI uses your past data to predict what might happen in the future. You select a year, and the AI shows you what values might look like in that year. +- **Smart Data Aggregation**: The AI analyzes your data based on what you ask it to do. It automatically adjusts how the data is summarized and calculated to show you the most useful insights. +- **Adaptive Filtering**: You can apply and modify filters dynamically through the AI Assist dialog UI, allowing the Pivot Table to instantly update and display refined data views. + +The following example shows how to set up these features in your Blazor application: + +[`SmartPivot.razor`] + +```csharp +@using Syncfusion.Blazor.PivotView +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Inputs + +@inject AzureAIService ChatGptService +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Spinner +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Notifications + +Syncfusion - Smart Pivot Table + +

    Smart Pivot Table

    + +
    + +

    + The Pivot, enhanced with AI, offers features such as Smart Data Aggregation, Predictive Modeling, and Adaptive Filtering. Click the AI Assist option to explore these AI-powered capabilities. + Know more here. +

    +     +
    + + + +
    + + + +
    AI Assistant
    + +

    Pick a Suggested Query:

    +
    + + + + + + + +
    +
    +

    Prompt:

    +
    + @if (ChoiceSelected[0] == "Predictive Analytics & Modeling") + { + + Provide future data points up to the year + + + + along with the existing data. + + } + @if (ChoiceSelected[0] == "Adaptive Filter Suggestions") + { + + Filter the products field based on + + + } + @if (ChoiceSelected[0] == "Intelligent Report Aggregation") + { + + Suggest the best way to aggregate and view provided fields + + + + in + + + + + + + } +
    +     +     + + + +     + +
    + + + + @{ + var data = (context as AxisSet); + if (data != null) + { + if ((data.Axis == "value" || (data.Axis == "value" && data.ColumnHeaders.ToString() == "Grand Total")) && !(data.RowHeaders as string).Contains('.') && (predictivePoints.Contains(data.ColumnHeaders.ToString()) || predictivePoints.Contains(data.RowHeaders.ToString())) + && ChoiceSelected[0] == "Predictive Analytics & Modeling") + { + pivotRef.PivotValues[data.RowIndex][data.ColIndex].CssClass = "e-custom-class"; + @data.FormattedText + } + else + { + @data.FormattedText + } + } + } + + + + + + + + + + + + + + + + + +
    +
    + + +``` + +[`SmartPivot.razor.cs`] +```csharp +using Microsoft.AspNetCore.Components; +using Newtonsoft.Json; +using PivotTableAI.Components.Data; +using Syncfusion.Blazor.Navigations; +using Syncfusion.Blazor.Notifications; +using Syncfusion.Blazor.PivotView; +using Syncfusion.Blazor.Popups; +using Syncfusion.Blazor.Spinner; +using SyncfusionAISamples.Models; +using System; + +namespace SyncfusionAISamples.Components.Pages.PivotTable +{ + public partial class SmartPivot + { + public string[] ChoiceSelected = { "Predictive Analytics & Modeling" }; + private List predictivePoints = new List() + { + "FY 2025", "FY 2026", "FY 2027", "FY 2028", "FY 2029" + }; + private void SelectedChipsChanged(string[] args) + { + if (args.Length > 0) + { + ChoiceSelected = args; + } + + } + + public string TextValue { get; set; } = "2025"; + public class Data + { + public string Name { get; set; } + public string ID { get; set; } + } + List InlineYears = new List + { + new Data() { Name = "2025", ID = "1" }, + new Data() { Name = "2026", ID = "2" }, + new Data() { Name = "2027", ID = "3" }, + new Data() { Name = "2028", ID = "4" }, + new Data() { Name = "2029", ID = "5" }, + }; + + public string filterText = "Bikes"; + + public string[] SelectedGroup { get; set; } = new string[] { "Year", "Product_Categories", "Sold" }; + public class PivotFields + { + public string Name { get; set; } + public string Code { get; set; } + } + List Country = new List + { + new PivotFields() { Name = "Country", Code = "Country" }, + new PivotFields() { Name = "Product_Categories", Code = "Product_Categories" }, + new PivotFields() { Name = "Products", Code = "Products" }, + new PivotFields() { Name = "Year", Code = "Year" }, + new PivotFields() { Name = "Sold", Code = "Sold" }, + new PivotFields() { Name = "Amount", Code = "Amount" } + }; + + public string AggregationValue = "Sum"; + public class AggregateData + { + public string Name { get; set; } + public string ID { get; set; } + } + List AggregationTypes = new List + { + new AggregateData() { Name = "Sum", ID = "Sum" }, + new AggregateData() { Name = "Count", ID = "Count" }, + new AggregateData() { Name = "Product", ID = "Product" }, + new AggregateData() { Name = "Average", ID = "Average" }, + new AggregateData() { Name = "Min", ID = "Min" }, + }; + + SfToast ToastObj; + private string ToastPosition = "Right"; + private string ToastContent = "Server is busy right now, Please try again"; + private SfSpinner spinnerObj; + private string Description = string.Empty; + private SfDialog Dialog { get; set; } + private bool Visibility { get; set; } = false; + private SfPivotView pivotRef; + public List data { get; set; } + public List cloneDataSource { get; set; } + PivotViewDataSourceSettings CloneDataSourceSettings { get; set; } + + public class PivotReport + { + public List DataSource { get; set; } + public List Columns { get; set; } + public List Rows { get; set; } + public List Values { get; set; } + public List MemberFilters { get; set; } + public List LabelFilters { get; set; } + } + + public class MemberFilter + { + public string Name { get; set; } + public string[] Items { get; set; } + public Syncfusion.Blazor.PivotView.FilterType Type { get; set; } + } + + public class LabelFilter + { + public string Name { get; set; } + public string Value1 { get; set; } + public string Value2 { get; set; } + public Operators Condition { get; set; } + public Syncfusion.Blazor.PivotView.FilterType Type { get; set; } + } + + public List toolbar = new List { + Syncfusion.Blazor.PivotView.ToolbarItems.Grid, + Syncfusion.Blazor.PivotView.ToolbarItems.Export, + Syncfusion.Blazor.PivotView.ToolbarItems.SubTotal, + Syncfusion.Blazor.PivotView.ToolbarItems.GrandTotal, + Syncfusion.Blazor.PivotView.ToolbarItems.ConditionalFormatting, + Syncfusion.Blazor.PivotView.ToolbarItems.FieldList + }; + + protected override void OnInitialized() + { + this.cloneDataSource = PivotProductDetails.GetProductData().ToList(); + this.data = new List(cloneDataSource); + } + + public void ToolbarRender(ToolbarArgs args) + { + args.CustomToolbar.Add(new ItemModel + { + Align = ItemAlign.Left, + Type = ItemType.Separator + }); + args.CustomToolbar.Add(new ItemModel + { + Text = "AI Assistant", + TooltipText = "AI Assistant", + PrefixIcon = "e-icons e-ai-chat e-btn-icon e-icon-left", + Click = EventCallback.Factory.Create(this, OpenDialog), + }); + } + + public async void OpenDialog(ClickEventArgs args) + { + await Dialog.ShowAsync(); + } + + private async Task OnBtnClick() + { + await Dialog.HideAsync(); + if (ChoiceSelected[0] == "Predictive Analytics & Modeling") + { + Description = $"Provide future data points up to the year {TextValue} along with the existing data from the provided data source"; + } + else if (ChoiceSelected[0] == "Adaptive Filter Suggestions") + { + Description = $"Filter the Products field based on {filterText} and return the filtersettings with corresponding items from the Products field and return data source as null."; + } + else if (ChoiceSelected[0] == "Intelligent Report Aggregation") + { + string selectedFields = string.Empty; + if (SelectedGroup?.Length > 0) + { + selectedFields = string.Join(",", SelectedGroup.Select(item => item)); + } + Description = $"Suggest the best way to aggregate and view provided fields({selectedFields}). Use only these fields ({selectedFields}) to frame the rows, columns, and values, ensuring all the provided fields are included in the report. **Ensure that the Type property in the Values section reflects the correct aggregation type as an enum (specifically {AggregationValue}), and this is not returned as a numeric value and return data source as null."; + } + if (!string.IsNullOrEmpty(Description)) + { + await spinnerObj.ShowAsync(); + bool isFilterQuery = Description.IndexOf("filter", StringComparison.OrdinalIgnoreCase) > -1; + Dictionary filters = UpdateFilters(); + PivotReport pivot = new PivotReport() + { + DataSource = data, + Columns = pivotRef.DataSourceSettings.Columns, + Rows = pivotRef.DataSourceSettings.Rows, + Values = pivotRef.DataSourceSettings.Values, + MemberFilters = filters["memberFilters"] as List, + LabelFilters = filters["labelFilters"] as List + }; + var pivotReportJson = GetSerializedPivotReport(pivot); + string prompt = ValidateAndGeneratePrompt(pivotReportJson, Description, isFilterQuery); + var result = string.Empty; + result = await ChatGptService.GetCompletionAsync(prompt); + if (result != null) + { + try + { +#pragma warning disable BL0005 + PivotReport deserializeResult = new PivotReport(); + result = result.Replace("```json", "").Replace("```", "").Trim(); + deserializeResult = DeserializeResult(result); + this.data = deserializeResult.DataSource ?? data; + pivotRef.DataSourceSettings.Rows = deserializeResult.Rows; + pivotRef.DataSourceSettings.Columns = deserializeResult.Columns; + pivotRef.DataSourceSettings.Values = deserializeResult.Values; + List filterSettings = UpdateFilterSettings(deserializeResult.MemberFilters, deserializeResult.LabelFilters); + pivotRef.DataSourceSettings.FilterSettings = filterSettings.Count > 0 ? filterSettings : pivotRef.DataSourceSettings.FilterSettings; +#pragma warning restore BL0005 + } + catch (Exception ex) + { + await this.ToastObj.ShowAsync(); + } + } + await spinnerObj.HideAsync(); + } + else + { + this.data = cloneDataSource; + } + } + + private List UpdateFilterSettings(List members, List labels) + { + List filterSettings = new List(); + if (members?.Count > 0) + { + foreach (MemberFilter item in members) + { + if (!string.IsNullOrEmpty(item.Name)) + { + filterSettings.Add(new PivotViewFilterSetting() + { + Name = item.Name, + Items = item.Items, + Type = (item.Type == Syncfusion.Blazor.PivotView.FilterType.Include || item.Type == Syncfusion.Blazor.PivotView.FilterType.Exclude) ? item.Type : Syncfusion.Blazor.PivotView.FilterType.Include + }); + } + } + } + if (labels?.Count > 0) + { + foreach (LabelFilter item in labels) + { + if (!string.IsNullOrEmpty(item.Name)) + { + filterSettings.Add(new PivotViewFilterSetting() + { + Name = item.Name, + Value1 = item.Value1, + Value2 = item.Value2, + Condition = item.Condition, + Type = item.Type == Syncfusion.Blazor.PivotView.FilterType.Label ? item.Type : Syncfusion.Blazor.PivotView.FilterType.Label + }); + } + } + } + return filterSettings; + } + + private Dictionary UpdateFilters() + { + List memberFilters = new List(); + List labelFilters = new List(); + List filterSettings = pivotRef.DataSourceSettings.FilterSettings; + if (filterSettings?.Count > 0) + { + foreach (PivotViewFilterSetting item in filterSettings) + { + if (item.Type == Syncfusion.Blazor.PivotView.FilterType.Include || item.Type == Syncfusion.Blazor.PivotView.FilterType.Exclude) + { + memberFilters.Add(new MemberFilter() + { + Name = item.Name, + Type = item.Type, + Items = item.Items + }); + } + else if (item.Type == Syncfusion.Blazor.PivotView.FilterType.Label) + { + labelFilters.Add(new LabelFilter() + { + Name = item.Name, + Value1 = item.Value1, + Value2 = item.Value2, + Condition = item.Condition, + Type = item.Type + }); + } + } + } + if (memberFilters?.Count <= 0) + { + memberFilters.Add(new MemberFilter() + { + Name = null, + Type = Syncfusion.Blazor.PivotView.FilterType.Include, + Items = Array.Empty() + }); + } + if (labelFilters?.Count <= 0) + { + labelFilters.Add(new LabelFilter() + { + Name = null, + Value1 = null, + Value2 = null, + Condition = Operators.Equals, + Type = Syncfusion.Blazor.PivotView.FilterType.Label + }); + } + Dictionary dictionary = new Dictionary() + { + {"memberFilters", memberFilters}, + {"labelFilters", labelFilters} + }; + return dictionary; + } + + private string GetSerializedPivotReport(PivotReport report) + { + return JsonConvert.SerializeObject(report); + } + + private PivotReport DeserializeResult(string result) + { + return JsonConvert.DeserializeObject(result); + } + + private static string ValidateAndGeneratePrompt(string report, string userInput, bool isFilterQuery) + { + var filterTypes = Enum.GetValues(typeof(Syncfusion.Blazor.PivotView.FilterType)).Cast(); + var filter = string.Join(", ", filterTypes.Select(ft => ft.ToString())); + + var summaryTypes = Enum.GetValues(typeof(SummaryTypes)).Cast(); + var summary = string.Join(", ", summaryTypes.Select(st => st.ToString())); + + var operatorTypes = Enum.GetValues(typeof(Operators)).Cast(); + var operators = string.Join(", ", operatorTypes.Select(op => op.ToString())); + + string filterQuery = $"The MemberFilters property has a Type property that is an enum with values corresponding to {filter}" + + $"and the LabelFilters property has a Condition property that is an enum with values corresponding to {operators}." + + $"Filters should not be applied to fields bound in Values and the same field should not be added to both label filters and member filters."; + + string pivotQuery = $"The Values property has a Type property, which is an enum with values corresponding to {summary}."; + + return $"Given the following datasource and settings(such as rows, columns, values and filters) are bounded in the pivot table\n\n{report}." + + $"\n\n Return the newly prepared datasource and settings based on following user query: {userInput + (isFilterQuery ? " important: Ensure that the datasource remains unchanged and only update the filter settings." : string.Empty)}" + + $"\n\nGenerate an output in JSON format only and Should not include any additional information or content in response" + + $"\n\n Note: {pivotQuery}" + + $"\n\n{filterQuery}"; + } + } +} +``` + +### How the sample works + +In this example, we added a custom button called **AI Assistant** to the Pivot Table toolbar. Here's how to use the AI-driven features: + +![AI Assistant Button](../../ai/images/ai-assistant-button.jpeg) + +#### Step 1: Click the AI Assistant button + +A dialog box opens with three options to choose from: **Predictive Modeling**, **Intelligent Report Aggregation**, and **Adaptive Filtering**. + +![AI Assistant Dialog](../../ai/images/ai-assistant-dialog.png) + +#### Step 2: Select a feature + +Pick one of the AI features below and follow the detailed steps for each feature. + +##### Predictive Modeling + +Choose a future year to predict values for that time period. After you click Submit, the Pivot Table shows predicted data along with your existing data. The predicted values are highlighted in yellow so you can easily see them. + +![Predictive Modeling Dropdown](../../ai/images/predictive-modeling-dropdown.png) + +![Clicking the submit button](../../ai/images/Cliking-Submit-Button.png) + +![Predictive Modeling](../../ai/images/predictive-modeling.png) + +##### Intelligent Report Aggregation + +Choose one or more fields from your data and pick an aggregation type (such as Sum or Count). After you click Submit, the AI arranges your data using only the fields you selected and applies the aggregation type you chose. The original data does not change. + +![Intelligent Report Dropdown](../../ai/images/intelligent-report-dropdown.jpeg) + +![Intelligent Report Aggregation Dropdown](../../ai/images/intelligent-report-aggregation-dropdown.png) + +![Clicking the submit button](../../ai/images/intelligent-report-cliking-submit-button.png) + +![Intelligent Report Aggregation](../../ai/images/smart-aggregation.png) + +##### Adaptive Filtering + +Type a product field member name (such as "Road Bikes" or "Mountain Bikes") in the input box. After you click Submit, the AI filters the products field to show only the items that match what you entered. The original data remains unchanged. + +![Adaptive Filter Suggestions](../../ai/images/adaptive-filtering-text-box.png) + +![Clicking the submit button](../../ai/images/adaptive-filtering-cliking-submit-button.png) + +![Adaptive Filtering](../../ai/images/adaptive-filtering.png) + +#### Step 3: Wait for processing + +While the AI processes your request, a loading indicator appears. If there is an error, a message appears asking you to try again. + +#### Step 4: View the results + +The Pivot Table automatically updates to show the results based on your AI request. + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Pivot Table shows a toast in the upper-right corner: "Server is busy right now, Please try again". Common issues include: + +- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. +- **Model Unavailable**: Ensure the specified `openAIModel`, `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 for efficiency. + +## 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. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + +## Live Demo + +Explore the AI-powered Smart Pivot Table in action by visiting the live demo: + +👉 [Try the Live Demo](https://blazor.syncfusion.com/demos/pivot-table/ai-smart-pivot?theme=fluent2) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md new file mode 100644 index 0000000000..3074d17360 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md @@ -0,0 +1,707 @@ +--- +layout: post +title: AI-Powered Content Assistance in Blazor Rich Text Editor | Syncfusion +description: Enhance content creation in Blazor Rich Text Editor using AI for grammar correction, summarization, translation, and more. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Rich Text Editor, AI content enhancement, Syncfusion Blazor AI +--- + +# AI-Powered Content Assistance in Blazor Rich Text Editor + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to enhance content creation in the Syncfusion Blazor Rich Text Editor. The AI integration enables intelligent features such as grammar correction, summarization, elaboration, translation, and rephrasing. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.RichTextEditor -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 OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## Add Stylesheet and Script Resources + +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: + +- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. +- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. + +```html + + + + + + +``` + +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. + +## Configure AI Service + +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: +- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. +- **Ollama**: Suitable for self-hosted, privacy-focused AI models. + +Follow the instructions for your selected service to register the AI model in your application. + +### OpenAI + +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI + +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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Azure.AI.OpenAI; +using Microsoft.Extensions.AI; +using System.ClientModel; + +var builder = WebApplication.CreateBuilder(args); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +### Ollama + +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. +2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). +3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `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 your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OllamaSharp; + +var builder = WebApplication.CreateBuilder(args); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +{% endhighlight %} +{% endtabs %} + +- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `http://localhost:11434`) before starting the application. + +## Register Syncfusion Blazor Service + +Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: + +- **Server Mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. + +{% tabs %} +{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} + +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +{% endhighlight %} +{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} + +using Syncfusion.Blazor; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddSyncfusionBlazor(); + +await builder.Build().RunAsync(); + +{% endhighlight %} +{% endtabs %} + +## Razor Component + +This section implements the Syncfusion Blazor Rich Text Editor with AI-powered content assistance features such as rephrase, correct grammar, summarize, elaborate, and translate. + +(`Home.razor`) + +```csharp +@inject AzureAIService semanticKernelAI +@inject IJSRuntime JSRuntime +@using AISamples.Components.Service +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.SplitButtons +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Notifications +@using Syncfusion.Blazor.DropDowns + +
    + + + + + + + + + + + + + +
    +
    + + +
    AI Assistant
    + +
    +
    +
    + + + + + +
    +
    +
    + @if (this.enableRephraseChips) + { + + + + + + + + + } + else if (this.enableLanguageList) + { +
    + Target Language +
    +
    + + + + +
    + } +
    +
    +
    +
    +
    + + + +
    +
    + @if (!isContentGenerating) + { + @if (noResultsFound) + { +
    +
    +
    + +
    No results found
    +
    +
    +
    + } + else { +
    +
    + + + +
    +
    + } + } else { +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + } +
    +     + +
    +
    +
    + Regenerate +
    +
    +
    + @if (!string.IsNullOrEmpty(sentiment)) { + + } + Copy + Replace +
    +
    +     +     + +     +
    + + + + +``` + +`Home.razor.cs` + +```csharp +using Markdig; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Syncfusion.Blazor.DropDowns; +using Syncfusion.Blazor.Inputs; +using Syncfusion.Blazor.Notifications; +using Syncfusion.Blazor.RichTextEditor; +using Syncfusion.Blazor.SplitButtons; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfToast ToastObj; + private string ToastTarget { get; set; } = "#scroll-restricted"; + SfRichTextEditor rteObj; + SfRichTextEditor leftRteChildObj; + SfRichTextEditor rightRteChildObj; + private string Value { get; set; } = "
    Integrate AI with the Editor

    Integrate the AI assistant into the rich text editor by capturing the content from the editor, sending it to the AI service, and displaying the results or suggestions back in the editor.

    Summarize

    This function condenses the selected content into a brief summary, capturing the main points succinctly.

    Elaborate

    This function expands the selected content, adding additional details and context.

    Rephrase

    This function rewrites the selected content to convey the same meaning using different words or structures. It also enables rephrase options and disables language selection.

    Correct Grammar

    This function reviews and corrects the grammar of the selected content, ensuring it adheres to standard grammatical rules.

    Translate

    This function translates the selected content into the specified language, enabling language selection and disabling rephrase options.

    "; + private bool dialogVisible { get; set; } + private bool enabelAIAssitantButton { get; set; } = false; + private bool enabelRegenerateContentButton { get; set; } = false; + private bool enabelContentButton { get; set; } = true; + private string promptQuery = string.Empty; + private string subQuery = string.Empty; + private string[] chipValue = new[] { "Standard" }; + private string translatelanguage = "EN"; + private string dropVal { get; set; } = "Rephrase"; + private bool enableRephraseChips { get; set; } = true; + private bool enableLanguageList { get; set; } = false; + private bool noResultsFound { get; set; } = false; + public bool isContentGenerating { get; set; } = true; + private string AIResult { get; set; } = string.Empty; + private bool isSentimentCheck { get; set; } = false; + private MarkdownPipeline pipeline { get; set; } = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build(); + private string sentiment = ""; + private string apiResultData = ""; + private string ButtonClass = "e-tbar-btn"; + private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + Value = args.Value; + enabelAIAssitantButton = string.IsNullOrWhiteSpace(Value); + } + private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args) + { + if (args.RequestType == "SourceCode") + { + this.ButtonClass = "e-tbar-btn e-overlay"; + } + if (args.RequestType == "Preview") + { + this.ButtonClass = "e-tbar-btn"; + } + } + private void UpdateTextAreaStatus(InputEventArgs args) + { + Value = args.Value; + enabelRegenerateContentButton = string.IsNullOrWhiteSpace(Value); + } + private async Task AIQuerySelectedMenu(MenuEventArgs args) + { + await DialogueOpen(args.Item.Text); + } + private async Task Rephrase() + { + await DialogueOpen("Rephrase"); + } + private async Task DialogueOpen(string selectedQuery) + { + var selectionText = await rteObj.GetSelectedHtmlAsync(); + if (!string.IsNullOrEmpty(selectionText)) + { + dialogVisible = true; + dropVal = QueryList.FirstOrDefault(q => q.Text.Equals(selectedQuery, StringComparison.OrdinalIgnoreCase))?.ID; + promptQuery = selectionText; + await this.rteObj.SaveSelectionAsync(); + await this.leftRteChildObj.RefreshUIAsync(); + await UpdateAISuggestionsData(selectedQuery); + } + else + { + await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(true), ShowCloseButton = true, Timeout = 0 }); + } + } + private async Task SelectedChipsChanged(Syncfusion.Blazor.Buttons.SelectionChangedEventArgs args) + { + if (chipValue.Length == 0 && args != null && args.RemovedItems.Length > 0) + { + chipValue = new [] { args.RemovedItems[0] }; + } + await UpdateAISuggestionsData("Rephrase"); + } + private async Task AITranslateDropdownList(ChangeEventArgs args) + { + await UpdateAISuggestionsData("Translate"); + } + private async Task AIQuerySelectedDropdownList(ChangeEventArgs args) + { + if (!string.IsNullOrEmpty(dropVal)) + { + chipValue = new[] { "Standard" }; + translatelanguage = "EN"; + var selectedQuery = QueryList.FirstOrDefault(q => q.ID.Equals(dropVal, StringComparison.OrdinalIgnoreCase))?.Text; + await UpdateAISuggestionsData(selectedQuery); + } + } + private async Task UpdateAISuggestionsData(string selectedQuery) + { + enableRephraseChips = false; + enableLanguageList = false; + isSentimentCheck = false; + switch (selectedQuery) + { + case "Summarize": + subQuery = "Briefly summarize the following text in a short and concise manner."; + break; + case "Elaborate": + subQuery = "Elaborate/Expand on the following text, providing more detail and context."; + break; + case "Rephrase": + enableRephraseChips = true; + enableLanguageList = false; + subQuery = $"Rephrase the following text in a {chipValue[0]} [tone/style], ensuring clarity and maintaining the original meaning."; + break; + case "Correct Grammar": + subQuery = "Correct any grammatical errors in the following text, ensuring it is clear and well-structured."; + break; + case "Translate": + enableLanguageList = true; + enableRephraseChips = false; + subQuery = $"Translate the following text into {translatelanguage}, preserving the original meaning and tone."; + break; + } + UpdateAISuggestionsData(); + } + private async Task RegenerateContent() + { + UpdateAISuggestionsData(); + } + private async Task ReplaceContent() + { + ExecuteCommandOption executeCommandOption = new ExecuteCommandOption(); + executeCommandOption.Undo = true; + await this.rteObj.RestoreSelectionAsync(); + await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, this.apiResultData, executeCommandOption); + await CloseDialog(); + } + private async Task CopyContent() + { + await JSRuntime.InvokeVoidAsync("copyToClipboard", Markdig.Markdown.ToPlainText(AIResult, pipeline)); + } + private async Task CloseDialog() + { + dialogVisible = false; + promptQuery = string.Empty; + AIResult = string.Empty; + chipValue = new[] { "Standard" }; + dropVal = "Query1"; + enableRephraseChips = true; + enableLanguageList = false; + sentiment = ""; + apiResultData = ""; + } + private async Task UpdateAISuggestionsData() + { + try + { + if (!string.IsNullOrEmpty(promptQuery)) + { + enabelRegenerateContentButton = isContentGenerating = enabelContentButton = true; + string systemPrompt = subQuery.Contains("emoji followed by the sentiment in the format") ? "You are a helpful assistant. Please respond in string format." : "NOTE:Please retain the existing HTML structure and modify the content only. Ensure that the response adheres to the specified formatting."; + apiResultData = await semanticKernelAI.GetCompletionAsync(promptQuery, false, false, (subQuery + systemPrompt)); + if (apiResultData != null) + { + isContentGenerating = false; + sentiment = isSentimentCheck ? apiResultData.Replace("\"", "").Replace("'", "") : ""; + AIResult = isSentimentCheck ? promptQuery : apiResultData; + noResultsFound = string.IsNullOrEmpty(AIResult) || string.IsNullOrEmpty(promptQuery); + enabelRegenerateContentButton = enabelContentButton = noResultsFound; + await InvokeAsync(StateHasChanged); + } + else + { + isContentGenerating = false; + await InvokeAsync(StateHasChanged); + } + } + } + catch + { + await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(), ShowCloseButton = true, Timeout = 0 }); + } + } + private RenderFragment GetTemplate(bool hasTextSelection = false) => builder => + { + builder.OpenElement(0, "div"); + builder.AddContent(1, hasTextSelection ? "Please select the content to perform the AI operation." : "An error occurred during the AI process, Please try again."); + builder.CloseElement(); + }; + public class SubQuery + { + public string ID { get; set; } + public string Text { get; set; } + } + public class Languages + { + public string ID { get; set; } + public string Text { get; set; } + } + public List QueryList = new List + { + new SubQuery { ID = "Rephrase", Text = "Rephrase" }, + new SubQuery { ID = "Grammar", Text = "Correct Grammar" }, + new SubQuery { ID = "Summarize", Text = "Summarize" }, + new SubQuery { ID = "Elaborate", Text = "Elaborate" }, + new SubQuery { ID = "Translate", Text = "Translate" } + }; + public List LanguageList = new List + { + new Languages { ID = "EN", Text = "English" }, + new Languages { ID = "ZH", Text = "Chinese (Simplified)" }, + new Languages { ID = "ZHT", Text = "Chinese (Traditional)" }, + new Languages { ID = "ES", Text = "Spanish" }, + new Languages { ID = "HI", Text = "Hindi" }, + new Languages { ID = "AR", Text = "Arabic" }, + new Languages { ID = "BN", Text = "Bengali" }, + new Languages { ID = "PT", Text = "Portuguese" }, + new Languages { ID = "RU", Text = "Russian" }, + new Languages { ID = "JA", Text = "Japanese" }, + new Languages { ID = "DE", Text = "German" }, + new Languages { ID = "KO", Text = "Korean" }, + new Languages { ID = "FR", Text = "French" }, + new Languages { ID = "IT", Text = "Italian" }, + new Languages { ID = "TR", Text = "Turkish" } + }; + private List Tools = new List() + { + new ToolbarItemModel() { Name = "AIAssistant", TooltipText = "AI Assistant" }, + new ToolbarItemModel() { Name = "Rephrase", TooltipText = "Rephrase" }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + }; + } +} + + +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Rich Text Editor will display an error message ("Oops! Please try again!"). Common issues include: + +- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. +- **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported. +- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances. +- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + +![Rich Text Editor AI Assistant - Output](../../ai/images/richtexteditor-ai-assistant.png) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md b/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md index da9f429bf4..2dca167da5 100644 --- a/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md +++ b/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md @@ -1,33 +1,33 @@ --- layout: post -title: Data Restructuring with Blazor TreeGrid and AI Models | Syncfusion -description: Learn how to use Syncfusion Blazor TreeGrid with AI service to automatically organize hierarchical data. +title: Data restructuring with Blazor TreeGrid and AI models | Syncfusion +description: Learn how to use the Syncfusion Blazor TreeGrid with OpenAI, Azure OpenAI, or Ollama to automatically organize hierarchical data. Explore to more details. platform: Blazor control: AI Integration documentation: ug keywords: Blazor TreeGrid, AI data restructuring, Syncfusion Blazor AI --- -# Data Restructuring with Blazor TreeGrid and Ollama +# Data restructuring with Blazor TreeGrid and AI models -This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to automatically organize hierarchical data in a Syncfusion Blazor TreeGrid component. The [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables integration with AI models to process and structure data, while Ollama provides self-hosted or cloud-based AI capabilities for analyzing relationships in datasets. In this example, the application assigns appropriate `ParentId` values based on `CategoryName` relationships, dynamically updating the TreeGrid to reflect the corrected hierarchical structure. +This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to automatically organize hierarchical data in a Syncfusion Blazor TreeGrid component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables integration with AI models to process and structure data, while Ollama provides self-hosted or cloud-based AI capabilities for analyzing relationships in datasets. In the example below, the application assigns appropriate `ParentId` values based on `CategoryName` relationships and dynamically updates the TreeGrid to reflect the corrected hierarchical structure. ## Prerequisites -Ensure the following NuGet packages are installed based on your chosen AI service: +Ensure the following NuGet packages are installed based on the selected AI service. ### For OpenAI -- **Microsoft.Extensions.AI** -- **Microsoft.Extensions.AI.OpenAI** +- Microsoft.Extensions.AI +- Microsoft.Extensions.AI.OpenAI ### For Azure OpenAI -- **Microsoft.Extensions.AI** -- **Microsoft.Extensions.AI.OpenAI** -- **Azure.AI.OpenAI** +- Microsoft.Extensions.AI +- Microsoft.Extensions.AI.OpenAI +- Azure.AI.OpenAI ### For Ollama -- **Microsoft.Extensions.AI** -- **OllamaSharp** +- Microsoft.Extensions.AI +- OllamaSharp {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,9 +43,9 @@ Install-Package OllamaSharp # For Ollama {% endhighlight %} {% endtabs %} -## Add Stylesheet and Script Resources +## Add stylesheet and script resources -Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of the main page: - For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. - For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. @@ -61,18 +61,18 @@ Include the theme stylesheet and script from NuGet via [Static Web Assets](https N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. -## Configure AI Service +## Configure AI service -Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: -- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. -- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. -- **Ollama**: Suitable for self-hosted, privacy-focused AI models. +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on requirements: +- **OpenAI**: Cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Enterprise-grade deployment with enhanced security and scalability. +- **Ollama**: Self-hosted, privacy-focused AI models. -Follow the instructions for your selected service to register the AI model in your application. +Follow the instructions for the selected service to register the AI model in the application. ### OpenAI -Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (for example, `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. - Install the required NuGet packages: @@ -85,7 +85,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -110,7 +110,7 @@ var app = builder.Build(); ### Azure OpenAI -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`. +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: @@ -124,7 +124,7 @@ Install-Package Azure.AI.OpenAI {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -156,9 +156,9 @@ 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. -2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). -3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `llama2:13b`). +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`). - Install the required NuGet packages: @@ -171,7 +171,7 @@ Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -192,14 +192,14 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `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 +## Register Syncfusion Blazor service -Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: +Add the Syncfusion Blazor service to the **~/Program.cs** file. The configuration depends on the app’s **Interactive Render Mode**: -- **Server Mode**: Register the service in the single **~/Program.cs** file. -- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. +- **Server mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. {% tabs %} {% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} @@ -228,9 +228,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Razor Component (`Home.razor`) +## Razor component (`Home.razor`) -This section implements the Syncfusion Blazor TreeGrid with AI-driven data restructuring using the AI model to assign `ParentId` values based on `CategoryName` relationships. +This section implements the Syncfusion Blazor TreeGrid with AI-driven data restructuring, using the AI model to assign `ParentId` values based on `CategoryName` relationships. ```csharp @page "/" @@ -362,20 +362,20 @@ namespace AISamples.Components.Pages } ``` -## Error Handling and Troubleshooting +## Error handling and troubleshooting -If the AI service fails to return a valid response, the TreeGrid will display an error message ("Oops! Please try again!"). Common issues include: +If the AI service fails to return a valid response, the TreeGrid displays an error message (“Oops! Please try again!”). Common issues include: -- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. -- **Model Unavailable**: Ensure the specified `openAIModel`, `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 for efficiency. +- **Invalid API key or endpoint**: Verify that `openAIApiKey`, `azureOpenAIKey`, or the Ollama `Endpoint` is correct and the service is accessible. +- **Model unavailable**: Ensure the specified `openAIModel`, `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 +## 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. -## Sample Code +## Sample code A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). diff --git a/blazor/smart-ai-solutions/ai/azure-openai.md b/blazor/smart-ai-solutions/ai/azure-openai.md index 81b886feb1..65c002cb39 100644 --- a/blazor/smart-ai-solutions/ai/azure-openai.md +++ b/blazor/smart-ai-solutions/ai/azure-openai.md @@ -1,7 +1,7 @@ --- layout: post title: Azure OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. +description: Learn here about how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. platform: Blazor control: AI Integration documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Azure OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). ## Prerequisites -To integrate Azure OpenAI with a Blazor WebApp Server, ensure the following: +To integrate Azure OpenAI with a Blazor Web App (Server), ensure the following: - The following NuGet packages are installed: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -28,13 +28,13 @@ Install-Package Azure.AI.OpenAI - An [Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) is deployed to obtain `apiKey`, `deploymentName`, and `endpoint` values. - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Credentials are stored securely using Azure Key Vault or environment variables (see [Microsoft’s guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Credentials are stored securely using Azure Key Vault or environment variables (see the [Microsoft guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure Azure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure Azure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -370,8 +370,8 @@ This example illustrates how the Syncfusion Blazor AI library integrates with Az - **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components integrate with the AI service for dynamic query processing. ## Error Handling -- **Invalid Credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. -- **Rate Limits**: Azure OpenAI usage may be limited based on your subscription. Check [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. +- **Invalid credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. +- **Rate limits**: Azure OpenAI usage may be limited based on your subscription. See the [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. ## See Also - [Syncfusion Blazor QueryBuilder Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started-webapp) diff --git a/blazor/smart-ai-solutions/ai/custom-ai-service.md b/blazor/smart-ai-solutions/ai/custom-ai-service.md index 46d8081c53..20e490d034 100644 --- a/blazor/smart-ai-solutions/ai/custom-ai-service.md +++ b/blazor/smart-ai-solutions/ai/custom-ai-service.md @@ -95,16 +95,16 @@ builder.Services.AddSingleton(); This example illustrates how the Syncfusion Blazor AI library integrates with a custom AI service (DeepSeek): 1. **Setup**: Implement and register the custom AI service in `Program.cs` using secure credentials. -2. **Component Integration**: Inject `IChatInferenceService` to process AI requests within Syncfusion components like Smart TextArea. +2. **Component integration**: Inject `IChatInferenceService` into components (for example, Smart TextArea or other Syncfusion controls) to send AI prompts and receive responses. 3. **Request Formatting**: Convert Syncfusion AI parameters into the custom provider’s API format (e.g., DeepSeek’s JSON structure). 4. **Response Processing**: Parse the provider’s response and update the component (e.g., displaying text suggestions). ### Key Components -- **IChatInferenceService**: Interface for interacting with custom AI providers. -- **AIServiceCredentials**: Syncfusion class for managing API keys, endpoints, and model names. -- **GenerateResponseAsync**: Sends asynchronous requests to the custom AI provider and retrieves responses. +- `IChatInferenceService`: Interface used by Syncfusion Blazor AI to interact with custom AI providers through a unified contract. +- `AIServiceCredentials`: Class for managing API keys, endpoints, and model names through configuration. +- `GenerateResponseAsync`: Method that sends asynchronous requests to the custom AI provider and retrieves responses. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and stored securely in environment variables or a configuration service. -- **Rate Limits**: Check the custom AI provider’s documentation (e.g., [DeepSeek API docs](https://platform.deepseek.com)) for rate limit details. +- **Invalid API key**: Verify the API key and scope, and load it from configuration or a secure secret store. +- **Rate limits**: Review provider-specific rate limits and implement back off or retries where appropriate (see the provider’s documentation, such as the [DeepSeek API docs](https://platform.deepseek.com)). - **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation. \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/images/Cliking-Submit-Button.png b/blazor/smart-ai-solutions/ai/images/Cliking-Submit-Button.png new file mode 100644 index 0000000000..51fa8a455e Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/Cliking-Submit-Button.png differ diff --git a/blazor/smart-ai-solutions/ai/images/adaptive-filtering-cliking-submit-button.png b/blazor/smart-ai-solutions/ai/images/adaptive-filtering-cliking-submit-button.png new file mode 100644 index 0000000000..41e6d5504f Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/adaptive-filtering-cliking-submit-button.png differ diff --git a/blazor/smart-ai-solutions/ai/images/adaptive-filtering-text-box.png b/blazor/smart-ai-solutions/ai/images/adaptive-filtering-text-box.png new file mode 100644 index 0000000000..eff6f0476e Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/adaptive-filtering-text-box.png differ diff --git a/blazor/smart-ai-solutions/ai/images/adaptive-filtering.png b/blazor/smart-ai-solutions/ai/images/adaptive-filtering.png new file mode 100644 index 0000000000..e5defecfa4 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/adaptive-filtering.png differ diff --git a/blazor/smart-ai-solutions/ai/images/ai-assistant-button.jpeg b/blazor/smart-ai-solutions/ai/images/ai-assistant-button.jpeg new file mode 100644 index 0000000000..abbb6bdf49 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/ai-assistant-button.jpeg differ diff --git a/blazor/smart-ai-solutions/ai/images/ai-assistant-dialog.png b/blazor/smart-ai-solutions/ai/images/ai-assistant-dialog.png new file mode 100644 index 0000000000..3e36720b99 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/ai-assistant-dialog.png differ diff --git a/blazor/smart-ai-solutions/ai/images/intelligent-report-aggregation-dropdown.png b/blazor/smart-ai-solutions/ai/images/intelligent-report-aggregation-dropdown.png new file mode 100644 index 0000000000..2a8ce8f38d Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/intelligent-report-aggregation-dropdown.png differ diff --git a/blazor/smart-ai-solutions/ai/images/intelligent-report-cliking-submit-button.png b/blazor/smart-ai-solutions/ai/images/intelligent-report-cliking-submit-button.png new file mode 100644 index 0000000000..eac98965b5 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/intelligent-report-cliking-submit-button.png differ diff --git a/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdow.jpeg b/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdow.jpeg new file mode 100644 index 0000000000..0824e8a009 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdow.jpeg differ diff --git a/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdown.jpeg b/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdown.jpeg new file mode 100644 index 0000000000..0824e8a009 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/intelligent-report-dropdown.jpeg differ diff --git a/blazor/smart-ai-solutions/ai/images/predictive-modeling-dropdown.png b/blazor/smart-ai-solutions/ai/images/predictive-modeling-dropdown.png new file mode 100644 index 0000000000..f1214976ea Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/predictive-modeling-dropdown.png differ diff --git a/blazor/smart-ai-solutions/ai/images/predictive-modeling.png b/blazor/smart-ai-solutions/ai/images/predictive-modeling.png new file mode 100644 index 0000000000..db73b7430f Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/predictive-modeling.png differ diff --git a/blazor/smart-ai-solutions/ai/images/richtexteditor-ai-assistant.png b/blazor/smart-ai-solutions/ai/images/richtexteditor-ai-assistant.png new file mode 100644 index 0000000000..b82610e038 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/richtexteditor-ai-assistant.png differ diff --git a/blazor/smart-ai-solutions/ai/images/sentiment-analysis.png b/blazor/smart-ai-solutions/ai/images/sentiment-analysis.png new file mode 100644 index 0000000000..8ab08cc5e7 Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/sentiment-analysis.png differ diff --git a/blazor/smart-ai-solutions/ai/images/smart-aggregation.png b/blazor/smart-ai-solutions/ai/images/smart-aggregation.png new file mode 100644 index 0000000000..8d1e65dc7f Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/smart-aggregation.png differ diff --git a/blazor/smart-ai-solutions/ai/images/smart-task-suggestion.png b/blazor/smart-ai-solutions/ai/images/smart-task-suggestion.png new file mode 100644 index 0000000000..a905a6b4cb Binary files /dev/null and b/blazor/smart-ai-solutions/ai/images/smart-task-suggestion.png differ diff --git a/blazor/smart-ai-solutions/ai/ollama.md b/blazor/smart-ai-solutions/ai/ollama.md index 83f8cecf19..ffc5972945 100644 --- a/blazor/smart-ai-solutions/ai/ollama.md +++ b/blazor/smart-ai-solutions/ai/ollama.md @@ -1,7 +1,7 @@ --- layout: post title: Ollama Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. +description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Ollama Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent-child relationships). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent–child relationships). ## Prerequisites @@ -24,13 +24,13 @@ Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -- [Ollama](https://ollama.com/docs) is installed on your local system (no virtual machines required). -- An Ollama model (e.g., `llama2`) is downloaded using the command: +- [Ollama](https://ollama.com/docs) is installed on the local system (no virtual machines required). +- An Ollama model (for example, `llama2`) is downloaded using the command: ```bash ollama run llama2 ``` - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Sufficient hardware resources (e.g., CPU/GPU, memory) are available for local model performance. +- Sufficient hardware resources (for example, CPU/GPU and memory) are available for local model performance. ## Configuration Steps @@ -53,6 +53,10 @@ builder.Services.AddChatClient(chatClient); builder.Services.AddSingleton(); ``` +- The example targets the default Ollama endpoint at http://localhost:11434. If Ollama runs on a different host or port, update the base URL accordingly. +- Ensure the registered client implements or adapts to `Microsoft.Extensions.AI.IChatClient`. If using a third‑party client, provide an adapter that conforms to `IChatClient` so the dependency injection registration succeeds. +- `SyncfusionAIService` provides an implementation of `IChatInferenceService` that integrates with the configured chat client. + ## Smart Data Restructuring with Ollama and TreeGrid This example demonstrates using the Syncfusion Blazor AI library with Ollama to perform intelligent data restructuring in a Syncfusion Blazor TreeGrid component. The application organizes hierarchical data by leveraging Ollama to assign appropriate `ParentId` values based on `CategoryName` relationships, updating the TreeGrid to reflect the corrected hierarchical structure. @@ -125,7 +129,7 @@ await builder.Build().RunAsync(); {% endtabs %} **For Server Render Mode**: -If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor Service should be registered within that `~/Program.cs` file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor service should be registered within that `~/Program.cs` file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -285,22 +289,21 @@ namespace OllamaExample.Components.Pages This example illustrates how the Syncfusion Blazor AI library integrates with Ollama to reorganize hierarchical data in a TreeGrid: -1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (e.g., `llama2`). -2. **Component Integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. -3. **Prompt Engineering**: Craft a detailed prompt to instruct Ollama to analyze `CategoryName` relationships and assign appropriate `ParentId` values. -4. **Response Processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. +1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (for example, `llama2`). +2. **Component integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. +3. **Prompt engineering**: Provide instructions for analyzing `CategoryName` relationships and assigning appropriate `ParentId` values. +4. **Response processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. ### Key Components -- **IChatInferenceService**: Injected service for interacting with Ollama models. +- **IChatInferenceService**: Injected service for interacting with Ollama models via the configured chat client. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to Ollama and retrieves responses. - **UI Components**: Syncfusion TreeGrid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Model Not Found**: Ensure the specified Ollama model (e.g., `llama2`) is downloaded and available. -- **JSON Parsing Errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. -- **Resource Limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. +- **Model not found**: Ensure the specified Ollama model (for example, `llama2`) is downloaded and available. +- **JSON parsing errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. +- **Resource limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. ## See Also -- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) - +- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/openAI.md b/blazor/smart-ai-solutions/ai/openAI.md index b5ea39ba0a..6adb831850 100644 --- a/blazor/smart-ai-solutions/ai/openAI.md +++ b/blazor/smart-ai-solutions/ai/openAI.md @@ -1,7 +1,7 @@ --- layout: post title: OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, and practical examples. +description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, practical examples. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,12 +9,12 @@ documentation: ug # OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). ## Prerequisites -To integrate OpenAI with a Blazor WebApp Server, ensure the following: -- The following NuGet packages are installed: +To integrate OpenAI with a Blazor Web App (Server), ensure the following: +- Install these NuGet packages: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -25,15 +25,15 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- An [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) is obtained from the OpenAI platform. -- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- The API key is stored securely using environment variables or user secrets (see [Microsoft’s guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Obtain an [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) from the OpenAI platform. +- Ensure the [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. +- Store the API key securely using environment variables or user secrets (see the [Microsoft guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -54,7 +54,7 @@ builder.Services.AddSingleton(); ## Anomaly Detection with OpenAI and Syncfusion® Blazor Grid -This example demonstrates using the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with inconsistent production rates based on operational factors, updating the grid with anomaly descriptions and visual styling. +This example uses the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate). OpenAI analyzes operational factors to identify rows with inconsistent production rates and updates the grid with anomaly descriptions and visual styling. ### Setup Prerequisites - Install the following NuGet packages: @@ -354,23 +354,23 @@ namespace OpenAIExample.Components.Pages ## How It Works -This example illustrates how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: +This example shows how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: -1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (e.g., `gpt-4`). -2. **Component Integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. -3. **Prompt Engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (e.g., inconsistent ProductionRate relative to Temperature or MotorSpeed). -4. **Response Processing**: Parse OpenAI’s JSON response to update the Grid with anomaly descriptions and apply visual styling. +1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (for example, `gpt-4`). +2. **Component integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. +3. **Prompt engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (for example, inconsistent `ProductionRate` relative to `Temperature` or `MotorSpeed`). +4. **Response processing**: Parse OpenAI’s JSON response to update the grid with anomaly descriptions and apply visual styling. ### Key Components - **IChatInferenceService**: Injected service for interacting with OpenAI models. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to OpenAI and retrieves responses. -- **UI Components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. +- **UI components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. -- **Rate Limits**: OpenAI API usage may be limited based on your plan. -- **Network Issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. +- **Invalid API key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. +- **Rate limits**: OpenAI API usage may be limited based on the plan. +- **Network issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. ## See Also - [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/overview.md b/blazor/smart-ai-solutions/ai/overview.md index fd184976d4..87a62f05f5 100644 --- a/blazor/smart-ai-solutions/ai/overview.md +++ b/blazor/smart-ai-solutions/ai/overview.md @@ -1,20 +1,20 @@ --- layout: post title: Syncfusion Blazor AI Library Overview | Syncfusion -description: Discover the Syncfusion Blazor AI library, its key features, supported AI providers, and how it powers AI-driven features in Blazor applications. +description: Learn her about discover the Syncfusion Blazor AI library, its key features, supported AI providers, how it powers AI-driven features in Blazor applications. platform: Blazor control: AI Integration documentation: ug --- # Syncfusion® Blazor AI Library Overview -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling seamless connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. This library forms the backbone for Syncfusion’s intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), empowering developers to build AI-enhanced applications. It offers text completion capabilities, delivering real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. The library powers Syncfusion intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling AI‑enhanced applications. It offers text completion capabilities for real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. ## Prerequisites To use the Syncfusion Blazor AI library, ensure the following: -- Install the `Syncfusion.Blazor.AI` NuGet package. -- Obtain API keys for your chosen AI provider (e.g., OpenAI or Azure OpenAI). -- Configure the Blazor application to support HTTP requests for cloud-based AI services or local setup for Ollama. +- Install the `Syncfusion.Blazor.AI` NuGet package +- Obtain API keys for the chosen AI provider (for example, OpenAI, Azure OpenAI, or Ollama) +- Configure HTTP access for cloud-based providers or local setup for Ollama ## Key Features - **Multi-Provider AI Support**: @@ -36,6 +36,6 @@ To use the Syncfusion Blazor AI library, ensure the following: - Cloud-based AI services may have rate limits or require stable internet connectivity. - Local models like Ollama demand sufficient hardware resources for optimal performance. -## See Also -- [Smart TextArea Documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) -- [Smart Paste Button Documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) \ No newline at end of file +## See also +- [Smart TextArea documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) +- [Smart Paste Button documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) \ No newline at end of file diff --git a/blazor/visual-studio-code-integration/upgrade-project.md b/blazor/visual-studio-code-integration/upgrade-project.md index 70af54c052..60bb491d4b 100644 --- a/blazor/visual-studio-code-integration/upgrade-project.md +++ b/blazor/visual-studio-code-integration/upgrade-project.md @@ -1,36 +1,36 @@ --- layout: post -title: Upgrade Project to Latest Version in Blazor | Syncfusion -description: Learn here about how to upgrade the project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. +title: Upgrade a project to the latest version | Syncfusion +description: Learn here about how to upgrade a project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Upgrading Syncfusion® Blazor application to updated version +# Upgrading Syncfusion® Blazor application to new version -The Syncfusion® Blazor Migration is an add-in for Visual Studio Code allows you to migrate an existing Syncfusion® Blazor Web Application from one Essential Studio® version to another. +The Syncfusion® Blazor migration add-in for Visual Studio Code enables upgrading an existing Syncfusion® Blazor web application from one Essential Studio® version to another. - N> The Syncfusion® Blazor Web Application Project Migration utility is available from `v17.4.0.39`. +N> The Syncfusion Blazor Web Application project migration utility is available from version `v17.4.0.39`. -The steps below assist you to migrating existing Syncfusion® Blazor Web Application. +Use the following steps to migrate an existing Syncfusion® Blazor Web Application. -1. Open an existing Syncfusion® Blazor Web Application or create a new Syncfusion® Blazor Web Application in Visual Studio Code. +1. In Visual Studio Code, open an existing Syncfusion® Blazor Web Application or create a new one. -2. Select **Migrate Syncfusion® Blazor Application to another version...** from the context menu when you right-click on the **Project file** from Explorer (Workspace). Refer to the screenshot below. +2. In Explorer (Workspace), right-click the project file and select **Migrate Syncfusion® Blazor Application to another version...** from the context menu. Refer to the screenshot below. - ![Migration add-in](images/Migration.PNG) + ![Context menu showing Migrate Syncfusion Blazor Application command](images/Migration.PNG) - N> If you have a Syncfusion® Blazor reference in your application, the Migration option will be enabled. + N> The Migration option is available only when the application already references Syncfusion® Blazor packages. -3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears. +3. From the Command Palette, choose **Select Blazor Version** and pick the required Syncfusion® Blazor package version published on `nuget.org`. - ![Select Blazor Version](images/VersionSelection.PNG) + ![Palette showing selection of Syncfusion Blazor version](images/VersionSelection.PNG) -4. The Syncfusion® NuGet packages references and themes are updated to the selected version in the application. +4. The Syncfusion® Blazor NuGet package references and theme links are updated to the selected version in the application. - ![NuGetPackage](images/NuGetPackage.png) + ![Project file updated with new Syncfusion NuGet package versions](images/NuGetPackage.png) - ![CDNLink](images/CDNLink.png) + ![Theme link updated to the selected version](images/CDNLink.png) 5. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. \ No newline at end of file diff --git a/blazor/visual-studio-integration/Syncfusion-Notifications.md b/blazor/visual-studio-integration/Syncfusion-Notifications.md index 01a74c23c9..e0d7d386d9 100644 --- a/blazor/visual-studio-integration/Syncfusion-Notifications.md +++ b/blazor/visual-studio-integration/Syncfusion-Notifications.md @@ -1,51 +1,51 @@ --- layout: post -title: Notifications | Blazor | Syncfusion -description: For displaying the notifications about trial and newer version update information for Syncfusion applications. +title: Syncfusion notifications in Blazor | Syncfusion +description: Configure and understand Syncfusion notifications in Blazor applications, including trial license alerts, newer NuGet package updates, ES build notifications. platform: Blazor control: Syncfusion Extensions documentation: ug --- -# Syncfusion® Notifications +# Syncfusion® notifications Syncfusion® enhances the user experience in Blazor applications through notification messages. These notifications cover various aspects, including alerts for trial applications when using Syncfusion® trial assemblies, updates about the availability of the latest Syncfusion® NuGet package, and notifications about newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay up to date with the latest features and enhancements. -N> The Syncfusion® Notification feature is available from Essential Studio® v22.1.34. +N> The Syncfusion® notifications feature is available starting with Essential Studio® v22.1.34. -## Notification Configuration +## Notification configuration -The Syncfusion® Options page allows you to configure notification settings. Customise trial and newer version notifications with a simple true or false toggle. +Notification behavior is configured in Visual Studio on the Syncfusion® Options page. Use the toggles to true or false trial and newer version notifications. -It can be accessed by clicking **Tools -> Options -> Syncfusion -> Blazor** +To access the settings, go to **Tools -> Options -> Syncfusion -> Blazor**. - ![Option Page](images/blazor_optionPage.png) + ![Visual Studio Options page for Syncfusion Blazor notifications](images/blazor_optionPage.png) -## Notification Types +## Notification types -**1. Syncfusion® Trial Application Notification** +**1. Syncfusion® trial application notification** -When you utilize Syncfusion® trial assemblies in your Blazor application, you will receive a notification stating, **This application uses a trial Syncfusion® license.** This notification encourages you to obtain a valid license key, enabling you to fully explore and experience the extensive features and capabilities offered by Syncfusion®. +When trial licensing is detected in a Blazor application, a message is shown: **This application uses a trial Syncfusion® license.** This notification encourages you to obtain a valid license key, enabling you to fully explore and experience the extensive features and capabilities offered by Syncfusion®. - ![Trial Notification](images/blazor_trial.png) + ![In-app banner indicating the application uses a trial Syncfusion license](images/blazor_trial.png) -**2. Newer Syncfusion® NuGet Package Notification** +**2. Newer Syncfusion® NuGet package notification** -If you have installed lower versions of Syncfusion® NuGet packages in your application, you will be notified about the availability of higher versions of Syncfusion® NuGet packages on nuget.org. This empowers you to easily identify opportunities to upgrade and gain access to new features, performance enhancements, and bug fixes. +If older Syncfusion® NuGet packages are referenced, a notification indicates that newer versions are available on NuGet.org. Upgrading provides access to new features, performance improvements, and bug fixes. - ![NuGet Notification](images/blazor_nuget.png) + ![Notification indicating newer Syncfusion NuGet packages are available](images/blazor_nuget.png) -**3. Newer Essential Studio® Build Notification** +**3. Newer Essential Studio® build notification** -If you use older versions of Syncfusion® assemblies or NuGet packages from **Essential Studio® Blazor,** Syncfusion® will notify you about new releases for the latest Essential Studio® build. Updating to the newest version ensures access to recent features, enhancements, and important updates, maximizing the capabilities of Syncfusion® in your Blazor development projects. +When using older Essential Studio® assemblies or NuGet packages, a notification announces the availability of a newer Essential Studio® build for Blazor. Updating to the newest version ensures access to recent features, enhancements, and important updates, maximizing the capabilities of Syncfusion® in your Blazor development projects. - ![Build Notification](images/blazor_build.png) + ![Notification announcing a newer Essential Studio build is available](images/blazor_build.png) -**4. Invalid License Key Notification** +**4. Invalid license key notification** If you have mistakenly used an incorrect license key or a license from another version or platform in your Blazor application, Syncfusion® will display a notification message stating, **The provided Syncfusion® license key is invalid**. This message serves as a reminder to obtain a valid license key and ensure proper licensing for Syncfusion® components. - ![Invalid Notification](images/blazor_invalid.png) + ![Notification indicating the provided Syncfusion license key is invalid](images/blazor_invalid.png) diff --git a/blazor/visual-studio-integration/convert-project.md b/blazor/visual-studio-integration/convert-project.md index 146307ea28..1ef92b4d70 100644 --- a/blazor/visual-studio-integration/convert-project.md +++ b/blazor/visual-studio-integration/convert-project.md @@ -1,52 +1,52 @@ --- layout: post -title: Convert Project in Blazor | Syncfusion -description: Learn here about how to convert the blazor application to Syncfusion Blazor application using Syncfusion Blazor Extension for Visual Studio. +title: Convert a Blazor project to Syncfusion Blazor | Syncfusion +description: Learn how to convert an existing Blazor application to a Blazor application using the Blazor Extension for VS 2022, including NuGet package installation. platform: Blazor -component: Common +control: Common documentation: ug --- # Converting Blazor application to Syncfusion® Blazor application -The Syncfusion® Blazor conversion is a Visual Studio add-in that transforms an existing Blazor application into a Syncfusion® Blazor application by adding the necessary assemblies and theme files. +The Syncfusion® Blazor conversion is a Visual Studio add-in that transforms an existing Blazor application into a Syncfusion® Blazor application by installing the required NuGet packages and adding the corresponding theme styles to the layout. -The steps below help you to convert the **Blazor application** to the **Syncfusion® Blazor application** via the **Visual Studio 2022**: +The steps below describe how to convert a Blazor application to a Syncfusion® Blazor application using Visual Studio 2022. -N> Before use the Syncfusion® Blazor Project Conversion, check whether the Syncfusion® Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor Project Conversion, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If the extension is not installed, install it by following the instructions in the [download and installation](download-and-installation) help topic. -1. Open your existing Blazor application or create a new Blazor application in Visual Studio 2022. +1. Open the existing Blazor application or create a new Blazor application in Visual Studio 2022. -2. To open the Syncfusion® Project Conversion Wizard, follow either one of the options below: +2. Open the Syncfusion® Project Conversion wizard using one of the following options: **Option 1:** - Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Convert Project...** in the Visual Studio menu. + Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Convert Project...** from the Visual Studio menu. - ![ConversionMenu](images/ConversionMenu.png) + ![Open Convert Project from the Extensions menu in Visual Studio](images/ConversionMenu.png) **Option 2:** - Right-click the application from the **Solution Explorer** and select the **Syncfusion® Blazor** and choose the **Convert to Syncfusion® Blazor application...** + In **Solution Explorer**, right-click the project, select **Syncfusion® Blazor**, and then choose **Convert to Syncfusion® Blazor application...** - ![ConversionAddin](images/ConversionAddin.png) + ![Open Convert Project from the Solution Explorer context menu](images/ConversionAddin.png) -3. The Syncfusion® Blazor Project Conversion window will appear. You can choose the required version of Syncfusion® Blazor and Themes to convert the application. +3. In the Syncfusion® Blazor Project Conversion window, select the required Syncfusion® Blazor version and theme to apply to the application. - ![ConversionWizard](images/Conversion.png) + ![Syncfusion Blazor Project Conversion wizard with version and theme selection](images/Conversion.png) - N> The versions are loaded from the Syncfusion® Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. + N> Versions are loaded from the Syncfusion® Blazor NuGet packages available on [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and require an active internet connection. -4. Check the **“Enable a backup before converting”** checkbox if you want to take the project backup and choose the location. +4. Select the **Enable a backup before converting** checkbox to create a project backup, and then choose the backup location. -5. Once the conversion process has been completed, you will get a successful message window. +5. After the conversion completes, a confirmation message is displayed. - ![ConversionSuccessMessage](images/ConversionSuccess.png) + ![Conversion succeeded message after completing the conversion](images/ConversionSuccess.png) - If you enabled project backup before converting, the old application was saved in the specified backup path location, as shown below once the conversion process completed. + If a backup was enabled, the original project is saved to the specified backup path after conversion, as shown below. - ![ConversionBackupLocation](images/Backuplocation.png) + ![Backup location for the original project created during conversion](images/Backuplocation.png) -6. The selected Blazor application is converted into a Syncfusion® Blazor application by installing the appropriate Syncfusion® Blazor NuGet packages with the selected version and adding the chosen styles to the corresponding layout file. +6. The selected Blazor application is converted to a Syncfusion® Blazor application by installing the appropriate Syncfusion® Blazor NuGet packages for the chosen version and adding the selected theme styles to the project’s layout file. -7. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file +7. If using a trial setup or packages from NuGet.org, a Syncfusion® license key must be registered with the application. Syncfusion® introduced license registration starting with the 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Refer to the [licensing overview and key generation guide](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key. For details about the licensing changes introduced in Essential Studio®, see the [2018 Volume 2 announcement](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2). \ No newline at end of file diff --git a/blazor/visual-studio-integration/images/MigrationAddin.png b/blazor/visual-studio-integration/images/MigrationAddin.png index 0ec7ac0395..9d729cf93d 100644 Binary files a/blazor/visual-studio-integration/images/MigrationAddin.png and b/blazor/visual-studio-integration/images/MigrationAddin.png differ diff --git a/blazor/visual-studio-integration/upgrade-project.md b/blazor/visual-studio-integration/upgrade-project.md index e90bf2fe4c..b63265eff4 100644 --- a/blazor/visual-studio-integration/upgrade-project.md +++ b/blazor/visual-studio-integration/upgrade-project.md @@ -1,52 +1,52 @@ --- layout: post -title: Upgrade Project in Blazor - Syncfusion -description: Learn here about how to upgrade the project in the Syncfusion Essential Blazor application to latest version. +title: Upgrade a Syncfusion Blazor project to the latest version | Syncfusion +description: Learn how to upgrade a Blazor application to latest version using Blazor Project Migration wizard in VS 2022, including NuGet package updates and backup option. platform: Blazor -component: Common +control: Common documentation: ug --- # Upgrading Syncfusion® Blazor application to latest version -The Syncfusion® Blazor migration add-in for Visual Studio allows you to migrate an existing Syncfusion® Blazor application from one version of Essential Studio® to another. This reduces the amount of manual work required during the migration process. +The Syncfusion® Blazor project migration wizard for Visual Studio updates an existing Syncfusion® Blazor application from one Essential Studio® version to another by upgrading the corresponding Syncfusion® Blazor NuGet packages. This reduces manual effort and helps keep projects current. -The steps below will assist you to upgrade the Syncfusion® version in the Syncfusion® Blazor application via Visual Studio 2022: +The steps below describe how to upgrade the Syncfusion® version in a Syncfusion® Blazor application using Visual Studio 2022. -N> Before use the Syncfusion® Blazor Project Migration, check whether the Syncfusion® Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor Project Migration, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If the extension is not installed, install it by following the instructions in the [download and installation](download-and-installation) help topic. -1. Open the Syncfusion® Blazor application that uses the Syncfusion® component in the Visual Studio 2022. +1. Open the Syncfusion® Blazor application that uses Syncfusion® components in Visual Studio 2022. -2. To open the Migration Wizard, either one of the following options should be followed: +2. Open the Migration Wizard using one of the following options: **Option 1** - Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Migrate Project…** from Visual Studio 2022 menu. + Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Migrate Project…** from the Visual Studio 2022 menu. - ![MigrationMenu](images/MigrationMenu.PNG) + ![Open the Migrate Project wizard from the Extensions menu in Visual Studio](images/MigrationMenu.PNG) **Option 2** - Right-click the application from the **Solution Explorer** and select the **Syncfusion® Blazor** and choose the **Migrate Syncfusion® Blazor project from another version...** + In **Solution Explorer**, right-click the project, select **Syncfusion® Blazor**, and then choose **Migrate Syncfusion® Blazor project from another version...** - ![MigrationAddin](images/MigrationAddin.png) + ![Open the Migrate Project wizard from the Solution Explorer context menu](images/MigrationAddin.png) -3. The Syncfusion® Project Migration window will appear. You can choose the required version of Syncfusion® Blazor to migrate. +3. In the Syncfusion® Project Migration window, select the required Syncfusion® Blazor version to migrate to. - N> The versions are loaded from the Syncfusion® Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. + N> Versions are loaded from the Syncfusion® Blazor NuGet packages published on [NuGet.org](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and require an active internet connection. - ![MigrationWizard](images/Migration.png) + ![Syncfusion Blazor Project Migration wizard with version selection](images/Migration.png) -4. Check the **“Enable a backup before migrating”** checkbox if you want to take the project backup and choose the location. +4. Select the **Enable a backup before migrating** checkbox to create a project backup, and then choose the backup location. -5. Once the migration process is completed, you will get a successful message window +5. After the migration completes, a confirmation message is displayed. - ![MigrationSuccessMessage](images/MigrationSuccess.png) + ![Migration succeeded message after completing the project migration](images/MigrationSuccess.png) - If you enabled project backup before migrating, the old application was saved in the specified backup path location, as shown below once the migration process completed. + If a backup was enabled, the original project is saved to the specified backup path after migration, as shown below. - ![MigrationBackupLocation](images/Backuplocation.png) + ![Backup location of the original project created during migration](images/Backuplocation.png) -6. The Syncfusion® Blazor NuGet packages are updated to the respective selected version in the Syncfusion® Blazor application. +6. The Syncfusion® Blazor NuGet packages are updated to the selected version in the Syncfusion® Blazor application. -7. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file +7. If using a trial setup or packages from NuGet.org, a Syncfusion® license key must be registered with the application. Syncfusion® introduced license registration starting with the 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Refer to the [licensing overview and key generation guide](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key. For details about the licensing changes introduced in Essential Studio®, see the [2018 Volume 2 announcement](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx). \ No newline at end of file