diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index 7b98fd95f4..16d059e703 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -247,7 +247,7 @@ The following code explains how to initialize Blazor Accordion using header and ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion. diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md index ca28adf590..b06c35cd89 100644 --- a/blazor/accordion/getting-started.md +++ b/blazor/accordion/getting-started.md @@ -177,7 +177,7 @@ The following code explains how to initialize Blazor Accordion using header and ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion. diff --git a/blazor/accumulation-chart/adaptive-layout.md b/blazor/accumulation-chart/adaptive-layout.md index c1e7375d08..82e688624a 100644 --- a/blazor/accumulation-chart/adaptive-layout.md +++ b/blazor/accumulation-chart/adaptive-layout.md @@ -9,7 +9,7 @@ documentation: ug # Adaptive Layout in Blazor Accumulation Chart Component -When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more. +When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion® Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more. ```cshtml diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 31266c8b9b..c9e3896983 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -357,5 +357,5 @@ Legend is used for the accumulation chart by setting the [Visible](https://help. ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index bb3fb23f3b..ac72a3e579 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -287,5 +287,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/ai-assistview/how-to/integration-with-ai.md b/blazor/ai-assistview/how-to/integration-with-ai.md index b60d0c3fa6..2fc7c15097 100644 --- a/blazor/ai-assistview/how-to/integration-with-ai.md +++ b/blazor/ai-assistview/how-to/integration-with-ai.md @@ -1,15 +1,15 @@ --- layout: post -title: Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component | Syncfusion +title: Integration | Blazor AI AssistView component | Syncfusion description: Checkout and learn about Integration with Microsoft.Extensions.AI and Keyboard interaction with Blazor AI AssistView component and more details. platform: Blazor control: AI AssistView documentation: ug --- -# Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component +# Integration of Microsoft.Extensions.AI with AI AssistView component -The Syncfusion AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more. +The Syncfusion® AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more. `The Microsoft.Extensions.AI` simplifies integration with different models, requiring minimal configuration changes depending on the provider. The following example demonstrates integration using `Azure OpenAI`. @@ -48,7 +48,7 @@ dotnet add package Markdig ### Configure services in Program.cs -Register the `Azure OpenAI` client and Syncfusion AI Assistview component within the Blazor application. +Register the `Azure OpenAI` client and Syncfusion® AI AssistView component within the Blazor application. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -88,7 +88,7 @@ var app = builder.Build(); ### AI AssistView with IChatClient -The Syncfusion `AI AssistView` component is built to seamlessly integrate with external AI services. When the `IChatClient` is registered via `Microsoft.Extensions.AI`, the component automatically uses it to handle user prompts without any additional configuration. +The Syncfusion® `AI AssistView` component is built to seamlessly integrate with external AI services. When the `IChatClient` is registered via `Microsoft.Extensions.AI`, the component automatically uses it to handle user prompts without any additional configuration. In the following example, the user input is processed using the injected `IChatClient`. The AI model's response is returned in Markdown format which is converted to HTML using the `Markdig` library before rendering in the AI AssistView component. diff --git a/blazor/ai/azure-openai.md b/blazor/ai/azure-openai.md index 34af512093..f5da58d907 100644 --- a/blazor/ai/azure-openai.md +++ b/blazor/ai/azure-openai.md @@ -7,9 +7,11 @@ control: AI Integration documentation: ug --- -# Azure OpenAI Integration with Syncfusion Blazor AI +# Azure OpenAI Integration with Syncfusion® Blazor AI -This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to enable AI functionalities in your Blazor applications. The package provides seamless integration with Azure OpenAI's API, allowing you to enhance any Syncfusion Blazor component with intelligent features. +## Introduction + +This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to enable AI functionalities in Blazor applications. The package provides seamless integration with Azure OpenAI's API, empowering Syncfusion® Blazor components with intelligent features such as natural language querying, data analysis, and content processing. ## Prerequisites @@ -28,7 +30,8 @@ Install-Package Azure.AI.OpenAI {% endtabs %} * To use Azure OpenAI, please install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/2.2.0-beta.5) package separately in your Blazor application. * [Deployed an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to obtain values for `apiKey`, `deploymentName` and `endpoint` -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components +* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion® Blazor components +* Configured secure credential storage using Azure Key Vault or environment variables ## Configuration Steps @@ -62,7 +65,7 @@ builder.Services.AddSingleton(); ## Natural Language Querying with Azure OpenAI -This example demonstrates using the **Syncfusion.Blazor.AI** package with **Azure OpenAI** to enable natural language querying in a Blazor application. The application features a Syncfusion Tab component with a textarea for entering natural language queries, a QueryBuilder component to visualize the generated query rules, and a Grid component to display filtered results based on the query processed by Azure OpenAI. +This example demonstrates using the **Syncfusion.Blazor.AI** package with Azure OpenAI to enable natural language querying in a Blazor application. The application features a Syncfusion® Tab component with a textarea for entering natural language queries, a QueryBuilder component to visualize the generated query rules, and a Grid component to display filtered results based on the query processed by Azure OpenAI. ### Prerequisites - Install the following NuGet packages: @@ -80,7 +83,7 @@ Install-Package Azure.AI.OpenAI {% endhighlight %} {% endtabs %} - Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements). -- Add the following to `App.razor` for Syncfusion themes and scripts: +- Add the following to `App.razor` for Syncfusion® themes and scripts: ```html @@ -94,7 +97,7 @@ Install-Package Azure.AI.OpenAI ``` -### Register Syncfusion Blazor Service +### Register Syncfusion® Blazor Service Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. @@ -354,7 +357,7 @@ namespace AzureOpenAIExample.Components.Pages ## How It Works -The example above demonstrates how to use Azure OpenAI with Syncfusion Blazor components for natural language query processing: +The example above demonstrates how to use Azure OpenAI with Syncfusion® Blazor components for natural language query processing: 1. **Setup**: Configuring the Azure OpenAI service in `Program.cs` with appropriate credentials. 2. **Component Integration**: Using the `IChatInferenceService` to process natural language queries. @@ -366,4 +369,4 @@ The example above demonstrates how to use Azure OpenAI with Syncfusion Blazor co - **IChatInferenceService**: Injected to interact with the Azure OpenAI models. - **ChatParameters**: Configures the AI request, including system prompt and user messages. - **GenerateResponseAsync**: Sends the request to Azure OpenAI and retrieves the response asynchronously. -- **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components work together with the AI service. +- **UI Components**: Syncfusion® Tab, QueryBuilder, and Grid components work together with the AI service. diff --git a/blazor/ai/custom-ai-service.md b/blazor/ai/custom-ai-service.md index 7b0993f03e..e99e36da3e 100644 --- a/blazor/ai/custom-ai-service.md +++ b/blazor/ai/custom-ai-service.md @@ -7,9 +7,11 @@ control: AI Integration documentation: ug --- -# Custom AI Service Integration with Syncfusion Blazor AI +# Custom AI Service Integration with Syncfusion® Blazor AI -This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility allows you to integrate DeepSeek or any custom AI provider into your Blazor applications, enhancing Syncfusion Blazor components with tailored AI functionalities. +## Introduction + +This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility feature empowers developers to integrate any AI provider into Blazor applications, enabling Syncfusion® Blazor components to work with specialized or proprietary AI services beyond the standard providers. ## Prerequisites @@ -23,11 +25,14 @@ Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -* Obtained a DeepSeek API key from the [DeepSeek platform](https://platform.deepseek.com) (or your preferred AI provider) -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components + +* Obtained an API key from your chosen AI provider (DeepSeek in this example) from the [DeepSeek platform](https://platform.deepseek.com) +* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion® Blazor components +* Understanding of HTTP client usage and JSON serialization in .NET applications ## Configuration Steps -To use DeepSeek as a custom AI service, implement the `IChatInferenceService` interface and configure it in your `Program.cs` file using `AIServiceCredentials` to provide the API key, deployment name, and endpoint. + +Follow these steps to integrate a custom AI service with Syncfusion® Blazor AI: ### Implement the Custom AI Service Create a class that implements the `IChatInferenceService` interface for DeepSeek. The implementation below uses the provided DeepSeek code, modified to utilize `AIServiceCredentials` from `Program.cs`. @@ -94,5 +99,18 @@ builder.Services.AddSingleton(new AIServiceCredentials builder.Services.AddSingleton(); ``` +## Custom AI Integration with Syncfusion® Components +The `GenerateResponseAsync` method in the DeepSeekAIService class serves as the core interface for AI communication. This method: + +1. **Formats Requests:** Converts Syncfusion® AI parameters into the custom provider's expected format +2. **Handles Authentication:** Manages API key authentication securely +3. **Processes Responses:** Parses the provider's response format into standard AI responses + +## See Also -The `GenerateResponseAsync` method in the DeepSeekAIService class is the core method that makes an AI call to the DeepSeek API endpoint. +- [Overview](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/overview) +- [OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/openai) +- [Azure OpenAI Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/azure-openai) +- [Ollama Integration](https://blazor.syncfusion.com/documentation/smart-ai-solutions/ai/ollama) +- [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) +- [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started) diff --git a/blazor/ai/ollama.md b/blazor/ai/ollama.md index 5fd3e68199..7e27539a57 100644 --- a/blazor/ai/ollama.md +++ b/blazor/ai/ollama.md @@ -7,9 +7,11 @@ control: AI Integration documentation: ug --- -# Ollama Integration with Syncfusion Blazor AI +# Ollama Integration with Syncfusion® Blazor AI -This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Ollama](https://ollama.com/) to enable AI functionalities in your Blazor applications. The package provides seamless integration with Ollama's locally hosted AI models, allowing you to enhance any Syncfusion Blazor component with intelligent features. +## Introduction + +This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Ollama](https://ollama.com/) to enable AI functionalities in Blazor applications. The package provides seamless integration with Ollama's locally hosted AI models, empowering Syncfusion® Blazor components with intelligent features such as data restructuring, content analysis, and hierarchical organization without requiring external API dependencies. ## Prerequisites @@ -30,7 +32,7 @@ Install-Package OllamaSharp ```bash ollama run llama2 ``` -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components. +* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion® Blazor components. ## Configuration Steps @@ -56,7 +58,7 @@ builder.Services.AddSingleton(); ## Smart Data Restructuring with Ollama and TreeGrid -This example demonstrates using the **Syncfusion.Blazor.AI** package with **Ollama** to perform smart 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 structure. +This example demonstrates using the **Syncfusion.Blazor.AI** package 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, automatically updating the TreeGrid to reflect the corrected hierarchical structure. ### Prerequisites - Install the following NuGet packages: @@ -74,7 +76,7 @@ Install-Package OllamaSharp {% endtabs %} - Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements). -- Add the following to `App.razor` for Syncfusion themes and scripts: +- Add the following to `App.razor` for Syncfusion® themes and scripts: ```html @@ -88,7 +90,7 @@ Install-Package OllamaSharp ``` -### Register Syncfusion Blazor Service +### Register Syncfusion® Blazor Service Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. @@ -282,7 +284,7 @@ namespace OllamaExample.Components.Pages ## How It Works -The example above demonstrates how to use Ollama with Syncfusion Blazor components for intelligent data organization: +The example above demonstrates how to use Ollama with Syncfusion® Blazor components for intelligent data organization: 1. **Setup**: Configuring the Ollama service in `Program.cs` with appropriate credentials and endpoint. 2. **Component Integration**: Using the `IChatInferenceService` to process TreeGrid data. @@ -294,5 +296,5 @@ The example above demonstrates how to use Ollama with Syncfusion Blazor componen - **IChatInferenceService**: Injected to interact with the Ollama models. - **ChatParameters**: Configures the AI request, including system prompt and user messages. - **GenerateResponseAsync**: Sends the request to Ollama and retrieves the response asynchronously. -- **UI Components**: Syncfusion TreeGrid and Button components work together with the AI service. +- **UI Components**: Syncfusion® TreeGrid and Button components work together with the AI service. diff --git a/blazor/ai/openAI.md b/blazor/ai/openAI.md index 7a2f665034..0aa61ff325 100644 --- a/blazor/ai/openAI.md +++ b/blazor/ai/openAI.md @@ -7,11 +7,11 @@ control: AI Integration documentation: ug --- -# OpenAI Integration with Syncfusion Blazor AI +# OpenAI Integration with Syncfusion® Blazor AI ## Introduction -This section helps to configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to enable AI functionalities in your Blazor applications. The package allows seamless integration with OpenAI’s API, empowering any Syncfusion Blazor component with intelligent features. +This section demonstrates configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to enable AI functionalities in Blazor applications. The package provides seamless integration with OpenAI's API, empowering Syncfusion® Blazor components with intelligent features such as anomaly detection, data analysis, and content generation. ## Prerequisites @@ -28,7 +28,8 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} * Obtained an [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) from the OpenAI platform -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components +* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion® Blazor components +* Configured secure API key storage using environment variables or user secrets ## Configuration Steps @@ -55,9 +56,9 @@ builder.Services.AddChatClient(openAiChatClient); builder.Services.AddSingleton(); ``` -## Anomaly Detection with OpenAI and Syncfusion Blazor Grid +## Anomaly Detection with OpenAI and Syncfusion® Blazor Grid -This example demonstrates using the **Syncfusion.Blazor.AI** package with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid component. The grid displays machine data (e.g., MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with irrelevant production rates relative to other factors, updating the grid with anomaly descriptions and visual styling. +This example demonstrates using the **Syncfusion.Blazor.AI** package with OpenAI to perform anomaly detection in a Syncfusion® Blazor Grid component. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with inconsistent production rates relative to other operational factors, updating the grid with anomaly descriptions and visual styling. ### Prerequisites - Install the following NuGet packages: @@ -72,7 +73,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- Add the following to `App.razor` for Syncfusion themes and scripts: +- Add the following to `App.razor` for Syncfusion® themes and scripts: ```html @@ -86,7 +87,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI ``` -## Register Syncfusion Blazor Service +## Register Syncfusion® Blazor Service Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. @@ -354,10 +355,10 @@ namespace OpenAIExample.Components.Pages ## How It Works -The example above demonstrates how to use OpenAI with Syncfusion Blazor components for intelligent data analysis: +The example above demonstrates how to use OpenAI with Syncfusion® Blazor components for intelligent data analysis: 1. **Setup**: Configuring the OpenAI service in `Program.cs` with appropriate credentials. -2. **Component Integration**: Using the `IChatInferenceService` to process data from Syncfusion Blazor Grid. +2. **Component Integration**: Using the `IChatInferenceService` to process data from Syncfusion® Blazor Grid. 3. **Prompt Engineering**: Creating appropriate prompts for the AI model to analyze data patterns. 4. **Response Processing**: Parsing and processing the AI response to update the UI components. @@ -366,5 +367,5 @@ The example above demonstrates how to use OpenAI with Syncfusion Blazor componen - **IChatInferenceService**: Injected to interact with the OpenAI models. - **ChatParameters**: Configures the AI request, including system prompt and user messages. - **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously. -- **UI Components**: Syncfusion Grid and Button components work together with the AI service. +- **UI Components**: Syncfusion® Grid and Button components work together with the AI service. diff --git a/blazor/appearance/themes.md b/blazor/appearance/themes.md index 26c50d4e70..10a262fdb4 100644 --- a/blazor/appearance/themes.md +++ b/blazor/appearance/themes.md @@ -40,7 +40,7 @@ The Syncfusion® Blazor Bootstrap Theme is d ## Optimized CSS Themes -Syncfusion Blazor themes are available in two variants to help optimize application's performance: +Syncfusion® Blazor themes are available in two variants to help optimize application's performance: **Standard Theme Files:** @@ -58,7 +58,7 @@ For improved performance, we offer optimized lite theme files (-lite * Choose the lite theme variant when your application doesn't require the bigger size mode. To implement a lite theme, simply reference the -lite.css version instead of the standard theme file in your application. -Comparison of the Syncfusion Blazor Button Component in **normal** and **bigger** size modes: +Comparison of the Syncfusion® Blazor Button Component in **normal** and **bigger** size modes: ![bigger-sized-button](./images/bigger-theme-button.png) diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index f56ec61746..8b72ada1a3 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -311,5 +311,5 @@ By default, suggestion list width automatically adjusts according to the AutoCom ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/autocomplete/getting-started.md b/blazor/autocomplete/getting-started.md index d804fd0931..18f2aafb77 100644 --- a/blazor/autocomplete/getting-started.md +++ b/blazor/autocomplete/getting-started.md @@ -240,5 +240,5 @@ By default, suggestion list width automatically adjusts according to the AutoCom ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index 3bb2efafc5..ae9f078467 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -187,5 +187,5 @@ N> You can also explore our [Blazor Barcode Generator example](https://blazor.sy ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md index 6d5db805f6..5a39572e75 100644 --- a/blazor/breadcrumb/getting-started-with-web-app.md +++ b/blazor/breadcrumb/getting-started-with-web-app.md @@ -257,6 +257,6 @@ Breadcrumb component enables or disables built-in URL navigation based on the [E ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md index 31d3599371..af1d497730 100644 --- a/blazor/button-group/getting-started-with-web-app.md +++ b/blazor/button-group/getting-started-with-web-app.md @@ -233,7 +233,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Button Group example](https://blazor.syncfusion.com/demos/buttons/button-group?theme=bootstrap5) that shows you how to render and configure the button group. \ No newline at end of file diff --git a/blazor/button-group/getting-started.md b/blazor/button-group/getting-started.md index 802c045972..1f9dd0f78e 100644 --- a/blazor/button-group/getting-started.md +++ b/blazor/button-group/getting-started.md @@ -161,7 +161,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Button Group example](https://blazor.syncfusion.com/demos/buttons/button-group?theme=bootstrap5) that shows you how to render and configure the button group. diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 7894708143..2bb14059a5 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -231,8 +231,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows you how to render and configure the button. diff --git a/blazor/button/getting-started.md b/blazor/button/getting-started.md index de9a347550..c248d45e52 100644 --- a/blazor/button/getting-started.md +++ b/blazor/button/getting-started.md @@ -162,7 +162,7 @@ N> You can also explore our [Blazor Button example](https://blazor.syncfusion.co ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=bootstrap5) that shows you how to render and configure the button. diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index 42c249c130..c3dacb843e 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -229,8 +229,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar. diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md index c3e7342d5f..503b99c247 100644 --- a/blazor/calendar/getting-started.md +++ b/blazor/calendar/getting-started.md @@ -180,7 +180,7 @@ Here, the Calendar allows you to select a date within the range from 5th to 27th ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar. diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md index b316b67887..250699d92d 100644 --- a/blazor/card/getting-started-with-web-app.md +++ b/blazor/card/getting-started-with-web-app.md @@ -250,6 +250,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md index e1b7dee6c3..0a328a65fa 100644 --- a/blazor/carousel/getting-started-with-web-app.md +++ b/blazor/carousel/getting-started-with-web-app.md @@ -288,6 +288,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/chart/adaptive-layout.md b/blazor/chart/adaptive-layout.md index 2c0275a4bf..81cacb2e48 100644 --- a/blazor/chart/adaptive-layout.md +++ b/blazor/chart/adaptive-layout.md @@ -9,7 +9,7 @@ documentation: ug # Adaptive Layout in Blazor Charts Component -When viewing the chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, axis titles, axis labels, data labels, chart title, and more. +When viewing the chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion® Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, axis titles, axis labels, data labels, chart title, and more. ```cshtml diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md index 2e89025345..8c0ab1767b 100644 --- a/blazor/chart/getting-started-with-web-app.md +++ b/blazor/chart/getting-started-with-web-app.md @@ -55,7 +55,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). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -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=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -110,21 +110,11 @@ dotnet --version ## 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). +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. -For a Blazor Web App with `WebAssembly` interactive render mode & `Per page/component` interactivity location, use the following commands +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). -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} - -dotnet new blazor -o BlazorApp -int WebAssembly -cd BlazorApp -cd BlazorApp.Client - -{% endhighlight %} -{% endtabs %} - -For a Blazor Web App with `Auto` interactive render mode & `Per page/component` interactivity location, use the following commands +For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -176,7 +166,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 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" %} @@ -228,7 +218,7 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen ## Add Syncfusion® Blazor Chart component -Add the Syncfusion® Blazor Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Chart 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: | Interactivity location | RenderMode | Code | | --- | --- | --- | diff --git a/blazor/chat-ui/accessibility.md b/blazor/chat-ui/accessibility.md index 95191b6dc6..0937f11a1f 100644 --- a/blazor/chat-ui/accessibility.md +++ b/blazor/chat-ui/accessibility.md @@ -66,7 +66,7 @@ The following keyboard shortcuts are supported by the Chat UI component. |Chat UI Toolbars||| | ← | ← | Focuses the previous toolbar element. | | → | → | Focuses the next toolbar element. | -| Enter / Soace | Enter / Space | Select the focused item or activate the selected option. | +| Enter / Space | Enter / Space | Select the focused item or activate the selected option. | | Home | Home | Moves focus to the first toolbar element. | | End | End | Moves focus to the last toolbar element. | @@ -76,4 +76,4 @@ The Chat UI component's accessibility levels are ensured through an [accessibili ## See also -* [Accessibility in Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 89472b40f9..6c5d5663eb 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -26,15 +26,15 @@ To get started quickly with Blazor Chat UI component, check on the following vid ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-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. -## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App +## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App To add **Blazor Chat UI** 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.InteractiveChat` 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 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. @@ -47,7 +47,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 %} @@ -121,7 +121,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace {% endhighlight %} {% endtabs %} -Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, 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. @@ -196,9 +196,9 @@ 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 Syncfusion Blazor Chat UI component +## Add Syncfusion® Blazor Chat UI component -Add the Syncfusion Blazor Chat UI 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 Chat UI 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: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -230,7 +230,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Chat UI component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. ![Blazor Chat UI Component](./images/chat-ui-component.png) diff --git a/blazor/chat-ui/getting-started.md b/blazor/chat-ui/getting-started.md index 47ecf1af9c..e5bd61fe58 100644 --- a/blazor/chat-ui/getting-started.md +++ b/blazor/chat-ui/getting-started.md @@ -21,9 +21,9 @@ This section briefly explains about how to include [Blazor Chat UI](https://www. ## 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-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-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-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App +## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App To add **Blazor Chat UI** 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.InteractiveChat` 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. @@ -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 %} @@ -87,7 +87,7 @@ N> Syncfusion® Blazor components are availa {% endtabcontents %} -## Register Syncfusion Blazor Service +## Register Syncfusion® Blazor Service Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. @@ -135,9 +135,9 @@ 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 Syncfusion Blazor Chat UI component +## Add Syncfusion® Blazor Chat UI component -Add the Syncfusion Blazor Chat UI component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Chat UI component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,11 +149,11 @@ Add the Syncfusion Blazor Chat UI component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Chat UI component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Chat UI component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. ![Blazor Chat UI Component.](images/chat-ui-component.png) diff --git a/blazor/chat-ui/globalization.md b/blazor/chat-ui/globalization.md index f9ddaa572a..c2b4f50346 100644 --- a/blazor/chat-ui/globalization.md +++ b/blazor/chat-ui/globalization.md @@ -11,8 +11,8 @@ documentation: ug ## Localization -`Blazor Chat UI` component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion Blazor components. +`Blazor Chat UI` component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. ## RTL -RTL provides an option to switch the text direction and layout of the Chat UI component from right to left. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion Blazor components. +RTL provides an option to switch the text direction and layout of the Chat UI component from right to left. Refer to [Blazor RTL](https://blazor.syncfusion.com/documentation/common/right-to-left) topic to provide RTL support for the Syncfusion® Blazor components. diff --git a/blazor/chat-ui/mention.md b/blazor/chat-ui/mention.md index dc918a08dc..1132f5adb5 100644 --- a/blazor/chat-ui/mention.md +++ b/blazor/chat-ui/mention.md @@ -9,7 +9,7 @@ documentation: ug # Mention Integration in Blazor Chat UI component -The Syncfusion ChatUI allows users to mention others in messages using the `@` character, with an dropdown for selecting users. The following sections explain how to configure mentions +The Syncfusion® ChatUI allows users to mention others in messages using the `@` character, with an dropdown for selecting users. The following sections explain how to configure mentions ## Configure Mention Users diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md index c7a300f7df..ce82c105f0 100644 --- a/blazor/chat-ui/messages.md +++ b/blazor/chat-ui/messages.md @@ -678,7 +678,7 @@ You can use the `itemClicked` event when the toolbar item is clicked in the `Mes ## Displaying the markdown content -The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich text capabilities such as bold, italic, links, and more. +The Syncfusion® ChatUI supports `Markdown` formatting for messages, enabling rich text capabilities such as bold, italic, links, and more. ### Prerequisites diff --git a/blazor/chip/getting-started.md b/blazor/chip/getting-started.md index 4fbbf38651..b71d238a13 100644 --- a/blazor/chip/getting-started.md +++ b/blazor/chip/getting-started.md @@ -221,7 +221,7 @@ You can render the chip items from collection using for loop in Blazor Chip comp ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Chips example](https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Chips. diff --git a/blazor/circular-gauge/getting-started.md b/blazor/circular-gauge/getting-started.md index 48863f2fc4..fe2f948b27 100644 --- a/blazor/circular-gauge/getting-started.md +++ b/blazor/circular-gauge/getting-started.md @@ -240,6 +240,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/common/accessibility.md b/blazor/common/accessibility.md index af0e6dfe0f..bfab210ac0 100644 --- a/blazor/common/accessibility.md +++ b/blazor/common/accessibility.md @@ -225,6 +225,41 @@ AppBar +AI AssistView + + +Yes + + +Yes + + +Yes + + +Yes + + +Yes + + +Yes + + +Yes + + +Yes + + +--- + + +Documentation + + + + AutoComplete diff --git a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md index 5807ce38f7..47383e55f2 100644 --- a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md +++ b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md @@ -9,7 +9,7 @@ documentation: ug # Optimize Performance in Blazor WebAssembly using AOT Compilation -This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion Blazor components**. +This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion® Blazor components**. ## AOT Compilation Overview @@ -62,7 +62,7 @@ bin/Release/net8.0/publish/wwwroot/ --- ## Size vs Performance Tradeoff -The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion Grid with paging enabled. +The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion® Grid with paging enabled. | Metric | Without AOT | With AOT | |----------------------------|----------------------|----------------------| diff --git a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md index 0f8f9ed049..06aed7ced6 100644 --- a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md +++ b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md @@ -54,11 +54,11 @@ Partial trimming is less aggressive and may be safer for applications that use r To control **Intermediate Language (IL)** trimming on a per-assembly basis by supplying an XML configuration file. This approach allows you to explicitly preserve assemblies, types, or members that may be trimmed, even if they are not directly referenced in your application code. -To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature. +To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion® Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature. -#### How to Enable Intermediate Language Trimming Safely for Syncfusion Blazor Grid +#### How to Enable Intermediate Language Trimming Safely for Syncfusion® Blazor Grid -1. Modify your project file (.csproj) to include trimmable assemblies and descriptors: +1. Modify your project file (.csproj) to include Trimmable assemblies and descriptors: ```xml @@ -117,7 +117,7 @@ To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dot ### Final Evaluation -To evaluate application size, a Blazor WebAssembly test application was configured with Syncfusion components, specifically featuring the Blazor Grid with paging enabled. +To evaluate application size, a Blazor WebAssembly test application was configured with Syncfusion® components, specifically featuring the Blazor Grid with paging enabled. | AOT Status | With Trim | Without Trim | |-----------------------|----------------------|----------------------| diff --git a/blazor/common/data-binding/bind-entity-framework.md b/blazor/common/data-binding/bind-entity-framework.md index 43031df831..4674df78e2 100644 --- a/blazor/common/data-binding/bind-entity-framework.md +++ b/blazor/common/data-binding/bind-entity-framework.md @@ -84,9 +84,9 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.SqlServer {% endhighlight %} {% endtabs %} @@ -305,9 +305,9 @@ Run the following commands in the Package Manager Console. {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.SqlServer {% endhighlight %} {% endtabs %} diff --git a/blazor/common/data-binding/dapper-databinding.md b/blazor/common/data-binding/dapper-databinding.md index 6c05126c7d..2547a4ab97 100644 --- a/blazor/common/data-binding/dapper-databinding.md +++ b/blazor/common/data-binding/dapper-databinding.md @@ -59,7 +59,7 @@ Run the following commands in the Package Manager Console. * The following command provide database access classes such as `SqlConnection`, `SqlCommand`, etc. Also provides data provider for MS SQL Server. ``` - Install-Package Microsoft.Data.SqlClient -Version 5.1.2 + Install-Package Microsoft.Data.SqlClient ``` Most of the ORMs provide scaffolding options to create model classes. Dapper doesn’t have any in-built scaffolding option. So, you need to create model class manually. Here, you are creating a class named `Bug.cs` in the `Data` folder as follows. diff --git a/blazor/common/data-binding/restful-service-binding.md b/blazor/common/data-binding/restful-service-binding.md index 4fdb661e70..9c6fba2f4d 100644 --- a/blazor/common/data-binding/restful-service-binding.md +++ b/blazor/common/data-binding/restful-service-binding.md @@ -56,7 +56,7 @@ Now, click on **Update Database**. Open Visual Studio 2022 and create an empty ASP.NET Core Web Application and name it as ODataServiceProject. After creating the application, install [Microsoft.AspNetCore.OData](https://www.nuget.org/packages/Microsoft.AspNetCore.OData/) package by running the following command in the Package Manager Console. ``` -Install-Package Microsoft.AspNetCore.OData -Version 8.2.3 +Install-Package Microsoft.AspNetCore.OData ``` This package contains everything you need to create OData v4.0 endpoints using ASP.NET Core MVC and to support OData query syntax for your web APIs. @@ -67,13 +67,13 @@ Now, you need to scaffold **DbContext** and **model classes** from the existing * [Microsoft.EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools) : This package creates database context and model classes from the database. -* [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/) :The database provider that allows Entity Framework Core to work with SQL Server. +* [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/) :The database provider that allows [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) to work with SQL Server. Run the following commands in the **Package Manager Console**. ``` -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools +Install-Package Microsoft.EntityFrameworkCore.SqlServer ``` @@ -165,7 +165,7 @@ builder.Services.AddDbContext(option => ### Creating ODataV4 service -The application is now configured to connect with the **OrdersDetails** database using Entity Framework. Now, it’s time to consume data from the OrdersDetails database. To do so, you need an OData controller to serve data from the DbContext to the Blazor application. +The application is now configured to connect with the **OrdersDetails** database using [Entity Framework](https://learn.microsoft.com/en-us/ef/core/). Now, it’s time to consume data from the OrdersDetails database. To do so, you need an OData controller to serve data from the DbContext to the Blazor application. To create OData controller, right-click **Controller** folder in ODataServiceProject and select **Add -> New Item -> API controller with read/write actions**. We are naming this controller as **OrdersController** as it returns Orders table records. diff --git a/blazor/common/data-binding/sql-server-data-binding.md b/blazor/common/data-binding/sql-server-data-binding.md index 18b7c5c727..07b258e197 100644 --- a/blazor/common/data-binding/sql-server-data-binding.md +++ b/blazor/common/data-binding/sql-server-data-binding.md @@ -77,9 +77,9 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.SqlServer {% endhighlight %} {% endtabs %} diff --git a/blazor/common/data-binding/webapi-service-binding.md b/blazor/common/data-binding/webapi-service-binding.md index f7a0bf318c..b7b4b18b4f 100644 --- a/blazor/common/data-binding/webapi-service-binding.md +++ b/blazor/common/data-binding/webapi-service-binding.md @@ -75,9 +75,9 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.SqlServer {% endhighlight %} {% endtabs %} @@ -244,9 +244,9 @@ Run the following commands in the Package Manager Console. {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Microsoft.EntityFrameworkCore.Tools -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.Tools -Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 7.0.11 +Install-Package Microsoft.EntityFrameworkCore.SqlServer {% endhighlight %} {% endtabs %} diff --git a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md index 8c4ee379f0..fb92846351 100644 --- a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md +++ b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md @@ -7,17 +7,17 @@ component: Common documentation: ug --- -# How to add Syncfusion Component to the toolbox in Blazor Application +# How to add Syncfusion® Component to the toolbox in Blazor Application This section provides step-by-step guidance on how to add Syncfusion® Blazor components to the Visual Studio Toolbox. By default, the Toolbox displays HTML elements and Bootstrap snippets. To customize it for Blazor development, open the Toolbox by pressing `Ctrl + Alt + X` or by navigating to **View → Toolbox** from the top menu. -To include Syncfusion components for Blazor in the Toolbox, follow these steps: +To include Syncfusion® components for Blazor in the Toolbox, follow these steps: -1. Right-click anywhere within the Visual Studio Toolbox window, select **Add Tab** from the context menu. Enter a name for the new tab such as Syncfusion Blazor Components and press Enter to create it. +1. Right-click anywhere within the Visual Studio Toolbox window, select **Add Tab** from the context menu. Enter a name for the new tab such as Syncfusion® Blazor Components and press Enter to create it. ![Add new tab in toolbox](images/new-tab-toolbox.png) -2. In the code editor, **write or paste a Blazor component snippet**, such as the Syncfusion SfCalendar. Once the code is in place, **select the entire code snippet**, then **drag and drop it** into the newly created tab in the Visual Studio Toolbox. +2. In the code editor, **write or paste a Blazor component snippet**, such as the Syncfusion® SfCalendar. Once the code is in place, **select the entire code snippet**, then **drag and drop it** into the newly created tab in the Visual Studio Toolbox. ![Add code snippet to toolbox](images/add-snippet.gif) diff --git a/blazor/context-menu/getting-started.md b/blazor/context-menu/getting-started.md index 89e853812c..adc995d6a8 100644 --- a/blazor/context-menu/getting-started.md +++ b/blazor/context-menu/getting-started.md @@ -177,7 +177,7 @@ Add the Syncfusion® Blazor ContextMenu comp ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Context Menu example](https://blazor.syncfusion.com/demos/context-menu/default-functionalities?theme=bootstrap5) that shows you how to render and configure the context menu. diff --git a/blazor/datagrid/accessibility.md b/blazor/datagrid/accessibility.md index f080eea9a8..019cc4e496 100644 --- a/blazor/datagrid/accessibility.md +++ b/blazor/datagrid/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor DataGrid -The Syncfusion Blazor DataGrid 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 DataGrid 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 accessibility compliance for the Grid is outlined below. @@ -38,7 +38,7 @@ The accessibility compliance for the Grid is outlined below. ## WAI-ARIA attributes -The Syncfusion Blazor DataGrid followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) patterns to meet the accessibility. The following ARIA attributes are used in the Grid: +The Syncfusion® Blazor DataGrid followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) patterns to meet the accessibility. The following ARIA attributes are used in the Grid: | Attributes | Purpose | | --- | --- | @@ -94,7 +94,7 @@ The accessibility checker tools highlights the following known issues: ## Keyboard interaction -The Syncfusion Blazor DataGrid followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Grid. +The Syncfusion® Blazor DataGrid followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Grid. Pager @@ -207,10 +207,10 @@ The Syncfusion Blazor DataGrid followed the [keyboard interaction](https://www.w ## Ensuring accessibility -The Syncfusion Blazor DataGrid's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Syncfusion® Blazor DataGrid's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. The accessibility compliance of the Grid is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datagrid) in a new window to evaluate the accessibility of the Grid with accessibility tools. ## See also -* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility) +* [Accessibility in Syncfusion® Blazor](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/datagrid/adaptive-layout.md b/blazor/datagrid/adaptive-layout.md index cec61481af..01cd55a1ca 100644 --- a/blazor/datagrid/adaptive-layout.md +++ b/blazor/datagrid/adaptive-layout.md @@ -9,7 +9,7 @@ documentation: ug # Adaptive UI Layout in Blazor DataGrid -The Syncfusion Blazor DataGrid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, column chooser, column menu(supports only when the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) as Horizontal) and edit dialogs adaptively and have an option to render the Grid row elements in the vertical direction. +The Syncfusion® Blazor DataGrid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, column chooser, column menu(supports only when the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) as Horizontal) and edit dialogs adaptively and have an option to render the Grid row elements in the vertical direction. To know about how to **Adaptive UI Layout** in Grid, you can check this video. @@ -17,7 +17,7 @@ To know about how to **Adaptive UI Layout** in Grid, you can check this video. ## Render adaptive dialogs -The Syncfusion Blazor DataGrid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature proves especially useful for optimizing the interface on devices with limited screen real estate. The functionality is achieved by enabling the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property, allowing the Grid to render filter, sort, and edit dialogs in full-screen mode. +The Syncfusion® Blazor DataGrid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature proves especially useful for optimizing the interface on devices with limited screen real estate. The functionality is achieved by enabling the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property, allowing the Grid to render filter, sort, and edit dialogs in full-screen mode. The following sample demonstrates how to enable and utilize adaptive dialogs in the Grid: @@ -239,7 +239,7 @@ public static List AdaptiveModels = new List() ## Vertical row rendering -The Syncfusion Blazor DataGrid introduces the feature of vertical row rendering, allowing you to display row elements in a vertical order. This is particularly useful for scenarios where a vertical presentation enhances data visibility. This is achieved by setting the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) property to the value **Vertical**. +The Syncfusion® Blazor DataGrid introduces the feature of vertical row rendering, allowing you to display row elements in a vertical order. This is particularly useful for scenarios where a vertical presentation enhances data visibility. This is achieved by setting the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) property to the value **Vertical**. >The default row rendering mode is **Horizontal**. diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md index 32693dce15..c299b7215d 100644 --- a/blazor/datagrid/adding-header-and-footer.md +++ b/blazor/datagrid/adding-header-and-footer.md @@ -9,11 +9,11 @@ documentation: ug # Adding header and footer in Blazor DataGrid -The Syncfusion Blazor DataGrid allows you to add customized header and footer sections in the exported PDF document. This feature enables you to include custom text, page numbers, lines, page size, and even change the orientation of the header and footer. +The Syncfusion® Blazor DataGrid allows you to add customized header and footer sections in the exported PDF document. This feature enables you to include custom text, page numbers, lines, page size, and even change the orientation of the header and footer. ## Adding text in header and footer -The Syncfusion Blazor DataGrid allows you to add custom text in the header and footer section in the exported PDF document. +The Syncfusion® Blazor DataGrid allows you to add custom text in the header and footer section in the exported PDF document. The header section of a PDF document is typically located at the top of each page. It provides space for including additional information or branding elements, such as a company logo, document title, date, or any other content you want to display consistently on every page of the PDF document. @@ -164,7 +164,7 @@ public class OrderData ## Draw a line in header and footer -When exporting data from the Syncfusion Blazor DataGrid to a PDF document, you have an option to draw lines in the header and footer sections. This feature allows you to enhance the visual appearance of the exported PDF document and create a clear separation between the header/footer and the content. +When exporting data from the Syncfusion® Blazor DataGrid to a PDF document, you have an option to draw lines in the header and footer sections. This feature allows you to enhance the visual appearance of the exported PDF document and create a clear separation between the header/footer and the content. You can achieve this by using the [PdfDashStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDashStyle.html) property, which defines the style of the line drawn. The supported [PdfDashStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDashStyle.html#fields) include: @@ -367,7 +367,7 @@ public class OrderData ## Add page number in header and footer -When exporting data from the Syncfusion Blazor DataGrid to a PDF document, you have an option to include page numbers in the header and footer section. This feature helps improve document navigation by providing consistent page references. +When exporting data from the Syncfusion® Blazor DataGrid to a PDF document, you have an option to include page numbers in the header and footer section. This feature helps improve document navigation by providing consistent page references. This can be achieved using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property, which allows customization of the header and footer content. Page numbers can be inserted using the [ContentType.PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType_PageNumber) setting in the [PdfHeaderFooterContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterContent.html). @@ -535,7 +535,7 @@ public class OrderData ## Insert an image in header and footer -The Syncfusion Blazor DataGrid have an option to include images in the header and footer section when exporting data from the Grid to PDF document. This feature allows you to add a custom logo, branding, or any relevant images to enhance the appearance of the exported PDF document. +The Syncfusion® Blazor DataGrid have an option to include images in the header and footer section when exporting data from the Grid to PDF document. This feature allows you to add a custom logo, branding, or any relevant images to enhance the appearance of the exported PDF document. Images can be inserted using a Base64-encoded string in the .jpeg format. This can be achieved using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property of the Grid. @@ -666,7 +666,7 @@ public class OrderData ## Repeat column header on every page -When exporting data from the Syncfusion Blazor DataGrid to a PDF document, you have an option to repeat the column headers on every page. This feature ensures that the column headers remains visible and easily identifiable, even when the data spans multiple pages in the exported PDF document. +When exporting data from the Syncfusion® Blazor DataGrid to a PDF document, you have an option to repeat the column headers on every page. This feature ensures that the column headers remains visible and easily identifiable, even when the data spans multiple pages in the exported PDF document. By default, the column headers is occurs only on the first page of the PDF document. However, you can enable the [IsRepeatHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IsRepeatHeader) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class to display the column headers on every page. This can be achieved using the [PdfHeaderQueryCellInfo](https://ej2.syncfusion.com/angular/documentation/api/grid/#pdfheaderquerycellinfo) event of the Grid. diff --git a/blazor/datagrid/aggregates.md b/blazor/datagrid/aggregates.md index 6969f4e1df..d73c25b175 100644 --- a/blazor/datagrid/aggregates.md +++ b/blazor/datagrid/aggregates.md @@ -9,7 +9,7 @@ documentation: ug # Aggregates in Blazor DataGrid -The Aggregates feature in the Syncfusion Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the Grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type). +The Aggregates feature in the Syncfusion® Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the Grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type). **Displaying aggregate values** @@ -132,7 +132,7 @@ By default, the aggregate values are displayed in the footer, group, and caption ## Built-in aggregate types -The Syncfusion Blazor DataGrid provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column. +The Syncfusion® Blazor DataGrid provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column. The available built-in aggregate types are : diff --git a/blazor/datagrid/batch-editing.md b/blazor/datagrid/batch-editing.md index 81342d73f2..e6d3e9e92a 100644 --- a/blazor/datagrid/batch-editing.md +++ b/blazor/datagrid/batch-editing.md @@ -9,7 +9,7 @@ documentation: ug # Batch editing in Blazor DataGrid -Batch editing is a powerful feature in the Syncfusion Blazor DataGrid that allows you to edit multiple cells simultaneously. It provides a convenient way to make changes to several cells and save them in a single request to the data source. This feature is particularly useful when working with large datasets or when you need to update multiple cells at once. +Batch editing is a powerful feature in the Syncfusion® Blazor DataGrid that allows you to edit multiple cells simultaneously. It provides a convenient way to make changes to several cells and save them in a single request to the data source. This feature is particularly useful when working with large datasets or when you need to update multiple cells at once. In batch edit mode, when you double-click a Grid cell, the target cell becomes editable. You can perform bulk updates of added, changed, and deleted data by either clicking the toolbar's **Update** button or by externally invoking the [ApplyBatchChangesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ApplyBatchChangesAsync_Syncfusion_Blazor_Grids_BatchChanges__0__) method. @@ -197,7 +197,7 @@ public class ProductDetails ## Cancel edit based on condition -The Syncfusion Blazor DataGrid allows you to cancel CRUD operations (Edit, Add, and Delete) for specific rows or cells in batch edit mode based on custom conditions. This feature gives you control over whether editing should be permitted or prevented for certain rows or cells in the Grid. +The Syncfusion® Blazor DataGrid allows you to cancel CRUD operations (Edit, Add, and Delete) for specific rows or cells in batch edit mode based on custom conditions. This feature gives you control over whether editing should be permitted or prevented for certain rows or cells in the Grid. To cancel the edit action, handle the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event. This event is triggered when a cell enters edit mode. In the event handler, add a condition to determine if the edit operation should be allowed. If the condition is met, set the `args.Cancel` property to **true** to cancel the edit operation. @@ -304,7 +304,7 @@ public class EmployeeDetails ## Adding a new row at the bottom of the Blazor DataGrid -The Syncfusion Blazor DataGrid allows you to add a new row at the bottom of the Grid, enabling you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without scrolling up or manually repositioning the newly added row. To achieve this, use the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property in the `GridEditSettings` configuration and set it to **Bottom**. +The Syncfusion® Blazor DataGrid allows you to add a new row at the bottom of the Grid, enabling you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without scrolling up or manually repositioning the newly added row. To achieve this, use the [NewRowPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_NewRowPosition) property in the `GridEditSettings` configuration and set it to **Bottom**. >* If you set `NewRowPosition` to **Bottom**, you can use the **TAB** key to easily move between cells or rows in edit mode. As you enter data in each cell and press **TAB**, the Grid will automatically create new rows below the current row, allowing you to conveniently add data for multiple rows without leaving edit mode. >* If you set `NewRowPosition` to **Top**, the Grid will display a blank row form at the top by default, allowing you to enter data for the new record. However, when the data is saved or updated, it will be inserted at the bottom of the Grid, ensuring the new record appears at the end of the existing data set. @@ -406,7 +406,7 @@ public class OrderDetails ## Confirmation dialog -Displaying a confirmation dialog provides an extra layer of safety when performing actions such as saving a record or canceling changes in the Syncfusion Blazor DataGrid. This dialog prompts users for confirmation before proceeding, helping to prevent accidental or undesired changes. The Grid includes a built-in confirmation dialog that can be used to confirm save, cancel, and other actions. +Displaying a confirmation dialog provides an extra layer of safety when performing actions such as saving a record or canceling changes in the Syncfusion® Blazor DataGrid. This dialog prompts users for confirmation before proceeding, helping to prevent accidental or undesired changes. The Grid includes a built-in confirmation dialog that can be used to confirm save, cancel, and other actions. To enable the confirmation dialog, set the [ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_ShowConfirmDialog) property of the `GridEditSettings` configuration to **true**. The default value is **true**. @@ -596,7 +596,7 @@ public class OrderDetails ## Disable editing for a particular cell -You can prevent editing of specific cells based on certain conditions in the Syncfusion Blazor DataGrid. This feature is useful when you want to restrict editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the Grid. +You can prevent editing of specific cells based on certain conditions in the Syncfusion® Blazor DataGrid. This feature is useful when you want to restrict editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the Grid. To disable editing for a particular cell in batch mode, use the [OnCellEdit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnCellEdit) event of the Grid. In the event handler, set the **args.Cancel** property to **true** to prevent editing for that cell. @@ -676,7 +676,7 @@ public class OrderDetails ## Save or update the changes immediately -The Syncfusion Blazor DataGrid provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method. +The Syncfusion® Blazor DataGrid provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSaved) event and the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method. By default, when you use the `EndEditAsync` method to save or update data, a confirmation dialog is displayed. This dialog prompts for confirmation before proceeding with the save or cancel action, helping to prevent accidental or undesired changes. @@ -850,7 +850,7 @@ public class OrderDetails ## Provide new item or edited item using events -The Syncfusion Blazor DataGrid uses `Activator.CreateInstance()` to create or clone new record instances during add and edit operations. Therefore, the model class and any referenced complex type classes must have parameterless constructors defined. +The Syncfusion® Blazor DataGrid uses `Activator.CreateInstance()` to create or clone new record instances during add and edit operations. Therefore, the model class and any referenced complex type classes must have parameterless constructors defined. However, there are scenarios where custom logic is required to create a new object, or a new object instance cannot be created using `Activator.CreateInstance()`. In such cases, you can manually provide the model object instance using events. @@ -1041,7 +1041,7 @@ public class OrderDetails ## Supported events for batch editing -Batch editing in the Syncfusion Blazor DataGrid offers a powerful way to edit multiple records simultaneously. Understanding the sequence and purpose of events triggered during this process enables users to customize or extend the data Grid's functionality. This section outlines the key events associated with batch editing, providing essential information to harness the full potential of this feature. +Batch editing in the Syncfusion® Blazor DataGrid offers a powerful way to edit multiple records simultaneously. Understanding the sequence and purpose of events triggered during this process enables users to customize or extend the data Grid's functionality. This section outlines the key events associated with batch editing, providing essential information to harness the full potential of this feature. | Event | Description | |-------|-------------| diff --git a/blazor/datagrid/caption-template.md b/blazor/datagrid/caption-template.md index 7f13ec8cce..dc20f20e4b 100644 --- a/blazor/datagrid/caption-template.md +++ b/blazor/datagrid/caption-template.md @@ -9,7 +9,7 @@ documentation: ug # Caption template in Blazor DataGrid -The caption template feature in the Syncfusion Blazor DataGrid allows you to customize and enhance the appearance of group caption row. It provides a flexible way to display additional information about grouped data, such as counts or grouped value, and enables you to incorporate custom content like images, icons, or other HTML elements. This feature empowers you to create visually appealing and informative group captions in the Grid. +The caption template feature in the Syncfusion® Blazor DataGrid allows you to customize and enhance the appearance of group caption row. It provides a flexible way to display additional information about grouped data, such as counts or grouped value, and enables you to incorporate custom content like images, icons, or other HTML elements. This feature empowers you to create visually appealing and informative group captions in the Grid. To achieve this customization, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property. You can type cast the context as [CaptionTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CaptionTemplateContext.html#properties) to get the data, which represents the currently displayed group, you can incorporate its properties such as `Field` (column's Field name), `HeaderText` (column's Header text), `Key`(grouped value) and `Count` (Count of the grouped records) into the Caption template. @@ -98,7 +98,7 @@ public class OrderData ## Adding custom text in group caption -The Syncfusion Blazor DataGrid allows you to enhance the group captions by adding custom text, providing a more meaningful and informative representation of the grouped data. By utilizing the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property, you can add specific text or information to the group caption, offering flexibility in customization. +The Syncfusion® Blazor DataGrid allows you to enhance the group captions by adding custom text, providing a more meaningful and informative representation of the grouped data. By utilizing the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property, you can add specific text or information to the group caption, offering flexibility in customization. The following example demonstrates how to add a custom text to the group caption using the `CaptionTemplate` property. You can type cast the context as [CaptionTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CaptionTemplateContext.html#properties) to get the data used to display the key, count and headerText of the grouped columns along with the custom text. @@ -184,7 +184,7 @@ public class OrderData ## Customize group caption text using locale -The Syncfusion Blazor DataGrid allows you to customize the group caption text based on the locale. This feature enables you to display localized text or translated content in the group captions according to different language or region settings. +The Syncfusion® Blazor DataGrid allows you to customize the group caption text based on the locale. This feature enables you to display localized text or translated content in the group captions according to different language or region settings. The following example demonstrates, how to customize group caption text based on **ar** locale: @@ -355,7 +355,7 @@ namespace LocalizationSample.Client ## Render custom component in group caption -The Syncfusion Blazor DataGrid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption. +The Syncfusion® Blazor DataGrid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption. To render custom component in the group caption, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property. This feature enables you to replace plain text with a custom component in the group caption, enhancing customization and interactivity. diff --git a/blazor/datagrid/cell-selection.md b/blazor/datagrid/cell-selection.md index bebcef28ff..45b18d0e29 100644 --- a/blazor/datagrid/cell-selection.md +++ b/blazor/datagrid/cell-selection.md @@ -9,13 +9,13 @@ documentation: ug # Cell Selection in Blazor DataGrid -Cell selection in the Syncfusion Blazor DataGrid allows you to interactively select specific cells or ranges of cells within the Grid. This selection can be done effortlessly through mouse clicks or arrow keys (up, down, left, and right). This feature is useful when you want to highlight, manipulate, or perform actions on specific cell within the Grid. +Cell selection in the Syncfusion® Blazor DataGrid allows you to interactively select specific cells or ranges of cells within the Grid. This selection can be done effortlessly through mouse clicks or arrow keys (up, down, left, and right). This feature is useful when you want to highlight, manipulate, or perform actions on specific cell within the Grid. > To enable cell selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to either **Cell** or **Both**. This property determines the selection mode of the Grid. ## Single cell selection -Single cell selection in the Syncfusion Blazor DataGrid allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the Grid. +Single cell selection in the Syncfusion® Blazor DataGrid allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the Grid. To enable single cell selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Cell** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Single**. This configuration allows you to select a single cell at a time within the Grid. @@ -100,7 +100,7 @@ public class OrderDetails ## Multiple cell selection -Multiple cell selection in the Syncfusion Blazor DataGrid allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data. +Multiple cell selection in the Syncfusion® Blazor DataGrid allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data. To enable multiple cell selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Cell** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**. This configuration allows you to select and interact with multiple cells within the Grid. @@ -185,7 +185,7 @@ public class OrderDetails ## Cell selection mode -The cell selection mode in the Syncfusion Blazor DataGrid allows you to interactively select specific cells or ranges of cells within the Grid. This feature is particularly useful when you want to perform actions on specific cells or obtain data from selected cells. +The cell selection mode in the Syncfusion® Blazor DataGrid allows you to interactively select specific cells or ranges of cells within the Grid. This feature is particularly useful when you want to perform actions on specific cells or obtain data from selected cells. The Grid supports three types of cell selection mode which can be set by using [GridSelectionSettings.CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode). These modes are: @@ -300,7 +300,7 @@ You can perform single cell selection, multiple cell selection, and range of cel ### Single cell selection -The Syncfusion Blazor DataGrid allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the Grid. +The Syncfusion® Blazor DataGrid allows you to select a single cell within a Grid. This feature is useful when you want to focus on a specific cell or perform actions on individual cells within the Grid. To achieve single cell selection, you can use the [SelectCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellAsync_System_ValueTuple_System_Int32_System_Int32__System_Nullable_System_Boolean__) method. This method selects a cell based on the given index. @@ -399,7 +399,7 @@ public class OrderDetails ### Multiple cell selection -Multiple cell selection in the Syncfusion Blazor DataGrid allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data. +Multiple cell selection in the Syncfusion® Blazor DataGrid allows you to select multiple cells within a Grid. This feature is beneficial when you need to perform actions on multiple cells simultaneously or focus on specific areas of your data. To achieve multiple cell selection, you can use the [SelectCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectCellsAsync_System_ValueTuple_System_Int32_System_Int32____) method. This method allows you to select a collection of cells based on their row and column indexes. @@ -503,7 +503,7 @@ public class OrderDetails ## How to get selected row cell indexes -The Syncfusion Blazor DataGrid allows you to retrieve the collection of selected row and cell indexes of the currently selected cells in the Grid. This is useful for performing various actions or manipulations on the selected cells within the Grid. To achieve this, you can use the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexesAsync) method. +The Syncfusion® Blazor DataGrid allows you to retrieve the collection of selected row and cell indexes of the currently selected cells in the Grid. This is useful for performing various actions or manipulations on the selected cells within the Grid. To achieve this, you can use the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexesAsync) method. The following example demonstrates how to obtain the selected row and cell indexes using the `GetSelectedRowCellIndexesAsync` method and display them in a dialog when a button is clicked: @@ -612,7 +612,7 @@ public class OrderDetails ## Clear cell selection programmatically -Clearing cell selection programmatically in the Syncfusion Blazor DataGrid is a useful feature when you want to remove any existing cell selections. To achieve this, you can use the [ClearCellSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearCellSelectionAsync) method. +Clearing cell selection programmatically in the Syncfusion® Blazor DataGrid is a useful feature when you want to remove any existing cell selections. To achieve this, you can use the [ClearCellSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearCellSelectionAsync) method. > The `ClearCellSelectionAsync` method is applicable when the selection [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) is set to **Multiple** or **Single**. @@ -701,7 +701,7 @@ public class OrderDetails ## Cell selection events -The Syncfusion Blazor DataGrid provides several events related to cell selection, allowing you to respond to and customize the behavior of cell selection. Here are the available cell selection events: +The Syncfusion® Blazor DataGrid provides several events related to cell selection, allowing you to respond to and customize the behavior of cell selection. Here are the available cell selection events: [CellSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CellSelecting): This event is triggered before any cell selection occurs. It provides an opportunity to implement custom logic or validation before a cell is selected, allowing you to control the selection process. diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md index 73c18fc6f5..45ea368d4d 100644 --- a/blazor/datagrid/cell.md +++ b/blazor/datagrid/cell.md @@ -9,7 +9,7 @@ documentation: ug # Cell in Blazor DataGrid -In the Syncfusion Blazor DataGrid, a cell refers to an individual data point or a unit within a Grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. +In the Syncfusion® Blazor DataGrid, a cell refers to an individual data point or a unit within a Grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. The Grid allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data Grids in your web applications. @@ -19,7 +19,7 @@ To know about how to customize cell in Grid, you can check this video. ## Displaying the HTML content -Displaying HTML content in a Syncfusion Blazor DataGrid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a Grid cell. +Displaying HTML content in a Syncfusion® Blazor DataGrid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a Grid cell. In the following example, the [Blazor Toggle Switch](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) Button is added to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Refresh) method is called to refresh the Grid and display the updated content. @@ -113,7 +113,7 @@ In the following example, the [Blazor Toggle Switch](https://www.syncfusion.com/ ## Autowrap the Grid content -The auto wrap feature allows the cell content in the Syncfusion Blazor DataGrid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. +The auto wrap feature allows the cell content in the Syncfusion® Blazor DataGrid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to **true**. You can configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) property. @@ -230,11 +230,11 @@ public class OrderData ## Customize cell styles -Customizing the Syncfusion Blazor DataGrid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the Grid, you can use Grid event, css or property support. +Customizing the Syncfusion® Blazor DataGrid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the Grid, you can use Grid event, css or property support. ### Using event -To customize the appearance of the Syncfusion Blazor DataGrid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event of the Grid. This event is triggered when each cell is rendered in the Grid, and provides an object that contains information about the cell. You can use this object to modify the styles of the cell. +To customize the appearance of the Syncfusion® Blazor DataGrid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event of the Grid. This event is triggered when each cell is rendered in the Grid, and provides an object that contains information about the cell. You can use this object to modify the styles of the cell. The following example demonstrates how to add a `QueryCellInfo` event handler to the Grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value. @@ -453,7 +453,7 @@ The following example demonstrates how to add a `QueryCellInfo` event handler to ### Using CSS -You can apply styles to the cells using CSS selectors. The Syncfusion Blazor DataGrid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row. +You can apply styles to the cells using CSS selectors. The Syncfusion® Blazor DataGrid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row. ```cshtml