diff --git a/blazor/progress-button/accessibility.md b/blazor/progress-button/accessibility.md index dec8ff1ccc..06cee4b716 100644 --- a/blazor/progress-button/accessibility.md +++ b/blazor/progress-button/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor ProgressButton Component -The Blazor ProgressButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor ProgressButton component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor ProgressButton component is outlined below. @@ -38,16 +38,16 @@ The accessibility compliance for the Blazor ProgressButton component is outlined ## WAI-ARIA attributes -The Blazor ProgressButton component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ProgressButton component: +The Blazor ProgressButton component follows the [WAI-ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor ProgressButton component: | Attributes | Purpose | | --- | --- | -| `aria-label` | Provides an accessible name for the icon only ProgressButton. | +| `aria-label` | Provides an accessible name for the icon-only ProgressButton. | | `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | ## Keyboard interaction -The Blazor ProgressButton component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ProgressButton component. +The Blazor ProgressButton component follows keyboard interaction guidelines, making it usable for people who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts are supported by the Blazor ProgressButton component. Use Tab/Shift+Tab to move focus to the button, then activate it with Enter or Space. | Windows | Mac | Actions | | --- | --- | --- | @@ -55,9 +55,9 @@ The Blazor ProgressButton component followed the keyboard interaction guideline, ## Ensuring accessibility -The Blazor ProgressButton component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor ProgressButton component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor ProgressButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/progress-button) in a new window to evaluate the accessibility of the Blazor ProgressButton component with accessibility tools. +The accessibility compliance of the Blazor ProgressButton component is shown in the following sample. Open the [sample site for ProgressButton accessibility](https://blazor.syncfusion.com/accessibility/progress-button) in a new window to evaluate the component with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/progress-button.html" %} diff --git a/blazor/progress-button/getting-started-webapp.md b/blazor/progress-button/getting-started-webapp.md index e884bc7235..e484d8a134 100644 --- a/blazor/progress-button/getting-started-webapp.md +++ b/blazor/progress-button/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor ProgressButton in Blazor Web App -This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -17,21 +17,21 @@ This section briefly explains about how to include [Blazor ProgressButton](https ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio -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) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the app. -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the app -To add **Blazor ProgressButton** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the ProgressButton component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -50,15 +50,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code -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). +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). -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](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) when creating the app. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, run the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a Blazor Web App with different interactive modes and locations, see the [render interactive modes guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).. -## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the app -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor component NuGet packages in the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project directory that contains the `.csproj` file. +- Run the following commands to install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full package list and component details. {% endtabcontent %} @@ -100,12 +100,12 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -| Interactive Render Mode | Description | +| Interactive render mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** in the client project. | +| Server | Open **~/_Imports.razor** in the `Components` folder. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` 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(s) of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is `WebAssembly` or `Auto`, register the service in both **~/Program.cs** files (server and client) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Theme stylesheets and scripts are served via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from the installed NuGet packages. Add the stylesheet reference in the `` and the script at the end of `` in **~/Components/App.razor**: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> For theme reference options, see [Blazor Themes](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 script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor ProgressButton component -Add the Syncfusion® Blazor ProgressButton 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 ProgressButton component to a page in the **~Pages/.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the page as shown: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor ProgressButton c | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -225,12 +225,12 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %} -N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton/BlazorWebApp) +N> [View the sample on GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton/BlazorWebApp) ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +- [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +- [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +- [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button. \ No newline at end of file +N> Explore the [Blazor ProgressButton example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) to learn how to render and configure the ProgressButton. \ No newline at end of file diff --git a/blazor/progress-button/getting-started.md b/blazor/progress-button/getting-started.md index 65458c6c8d..764af1ed7a 100644 --- a/blazor/progress-button/getting-started.md +++ b/blazor/progress-button/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor ProgressButton Component -This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with ProgressButton Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton) sample. +To get started quickly with the ProgressButton component in Blazor, refer to this video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton). {% youtube "youtube:https://www.youtube.com/watch?v=ps2hvSBqPX0"%} @@ -28,11 +28,11 @@ To get start quickly with ProgressButton Component using Blazor, you can check o ## 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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -To add **Blazor ProgressButton** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor ProgressButton** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -55,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -88,7 +88,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -96,7 +96,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -140,7 +140,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see the [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references. ## Add Blazor ProgressButton component @@ -154,14 +154,14 @@ Add the Syncfusion® Blazor ProgressButton c {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ProgressButton component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor ProgressButton component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button. +N> Explore the [Blazor ProgressButton example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows how to render and configure the ProgressButton. diff --git a/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md b/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md index 57f8f37724..5aef08c9c1 100644 --- a/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md +++ b/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md @@ -9,7 +9,7 @@ documentation: ug # Change text content and styles of the Blazor ProgressButton Component -You can change the text content and styles of the Progress Button during progress state by changing the text content and the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property at the [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin) and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd) events. +Change the button text and styles during the progress state by updating the Content and the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) parameters in the [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin) and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd) event handlers. ```cshtml diff --git a/blazor/progress-button/how-to/customize-progress-using-cssclass.md b/blazor/progress-button/how-to/customize-progress-using-cssclass.md index 582ae51d30..3bf0a22013 100644 --- a/blazor/progress-button/how-to/customize-progress-using-cssclass.md +++ b/blazor/progress-button/how-to/customize-progress-using-cssclass.md @@ -9,12 +9,12 @@ documentation: ug # Customize progress using cssClass in Blazor ProgressButton Component -You can customize the background filler UI using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property. +Customize the progress indicator (filler) by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property. -* Adding `e-vertical` to `CssClass` shows vertical progress. -* Adding `e-progress-top` to `CssClass` shows progress at the top. +* Adding `e-vertical` to `CssClass` displays vertical progress. +* Adding `e-progress-top` to `CssClass` places the progress at the top of the button. -You can also show reverse progress by adding custom class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property. +Reverse progress can also be shown by adding a custom class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property. ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/progress-button/how-to/hide-spinner.md b/blazor/progress-button/how-to/hide-spinner.md index 3bfa9ce9fa..4c62cd04b5 100644 --- a/blazor/progress-button/how-to/hide-spinner.md +++ b/blazor/progress-button/how-to/hide-spinner.md @@ -9,7 +9,7 @@ documentation: ug # Hide Spinner in Blazor ProgressButton Component -You can hide spinner in the Progress Button by setting the `e-hide-spinner` property to [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass). +Hide the spinner in the ProgressButton by applying the built-in e-hide-spinner CSS class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) parameter. This hides only the spinner while keeping the progress fill visible. Multiple CSS classes can be combined in CssClass as needed. ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/progress-button/how-to/stop-progress-indicator.md b/blazor/progress-button/how-to/stop-progress-indicator.md index 1c31e37242..eb0150766f 100644 --- a/blazor/progress-button/how-to/stop-progress-indicator.md +++ b/blazor/progress-button/how-to/stop-progress-indicator.md @@ -9,7 +9,7 @@ documentation: ug # Stop Progress Indicator in Blazor ProgressButton Component -You can stop the progress indicator using [EndProgressAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_EndProgressAsync) method. In the following sample, the progress is stopped by clicking the `STOP` button. +Stop the active progress programmatically by calling the [EndProgressAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_EndProgressAsync) method on the ProgressButton instance obtained via @ref. In the following example, clicking the Stop button invokes the handler that awaits EndProgressAsync to halt the current progress. ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/progress-button/how-to/trace-events.md b/blazor/progress-button/how-to/trace-events.md index e907370de2..66b6cb2e67 100644 --- a/blazor/progress-button/how-to/trace-events.md +++ b/blazor/progress-button/how-to/trace-events.md @@ -9,9 +9,11 @@ documentation: ug # Trace Events in Blazor ProgressButton Component -The Progress Button component triggers events based on its actions. The events can be used as extension points to perform custom operations. +The ProgressButton component triggers lifecycle events that can be used as extension points to perform custom logic and update the UI. -The events available in Progress Button are [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnFailure), [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin), [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_Progressing), and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd). +The events available in ProgressButton are [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnFailure), [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin), [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_Progressing), and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd). OnBegin fires when progress starts, Progressing fires while the progress updates, OnEnd fires when progress completes, and OnFailure fires if the operation fails. + +The following example wires the OnBegin, Progressing, and OnEnd events and displays the most recently triggered event in the UI. OnFailure is available but not shown in this sample. ```cshtml diff --git a/blazor/progress-button/native-event.md b/blazor/progress-button/native-event.md index 4d49e90062..a7c676e45d 100644 --- a/blazor/progress-button/native-event.md +++ b/blazor/progress-button/native-event.md @@ -9,9 +9,9 @@ documentation: ug # Native Events in Blazor ProgressButton Component -You can define the native event using an `event` attribute in the component. The value of attribute is treated as an event handler. The event specific data will be available in the event arguments. +Define native DOM events on the component by using Blazor’s @on{event} attributes. The attribute value is an event handler method, and event-specific data is provided through strongly typed event argument objects. -The different event argument types for each event are, +The different event argument types for each event are: * Focus Events - UIFocusEventArgs * Mouse Events - UIMouseEventArgs diff --git a/blazor/progress-button/spinner-and-progress.md b/blazor/progress-button/spinner-and-progress.md index 5a2548bb37..cc3758ff16 100644 --- a/blazor/progress-button/spinner-and-progress.md +++ b/blazor/progress-button/spinner-and-progress.md @@ -10,7 +10,7 @@ documentation: ug # Spinner and Progress in Blazor ProgressButton Component -This section explains the Spinner and Progress of Progress Button. +This section describes how to customize the spinner and configure progress behavior in the ProgressButton, including positioning and sizing the spinner, using a custom spinner template, animating content, changing step increments, updating progress dynamically, pausing/resuming, and completing progress programmatically. ## Spinner @@ -24,7 +24,7 @@ Spinner size can be changed by modifying the [Width](https://help.syncfusion.com ### Spinner template -You can use custom spinner by specifying the [SpinTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#Syncfusion_Blazor_SplitButtons_ProgressButtonSpinSettings_SpinTemplate) property of [SpinSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#properties) with custom styles. +Use a custom spinner by specifying the [SpinTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#Syncfusion_Blazor_SplitButtons_ProgressButtonSpinSettings_SpinTemplate) property of [SpinSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#properties) with custom styles. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -234,4 +234,4 @@ You can complete the progress by using the [EndProgressAsync](https://help.syncf } } -``` +``` \ No newline at end of file diff --git a/blazor/progress-button/style-and-appearance.md b/blazor/progress-button/style-and-appearance.md index 203c2e2a09..4c7206a2aa 100644 --- a/blazor/progress-button/style-and-appearance.md +++ b/blazor/progress-button/style-and-appearance.md @@ -9,11 +9,11 @@ documentation: ug # Styles and Appearances in Blazor ProgressButton Component -To modify the ProgressButton appearance, you need to override the default CSS of ProgressButton component. Find the list of CSS classes and its corresponding section in ProgressButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +Customize the appearance of the ProgressButton by overriding the built-in CSS selectors of the component. Use scoped styles (for example, by adding a custom class via the CssClass parameter) to limit changes to specific instances. To create a consistent look-and-feel across the application, consider using built-in themes or generating a custom theme with the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). | CSS Class | Purpose of Class | | ----- | ----- | -| .e-progress-btn | To customize the progress button. | -| .e-progress-btn:hover | To customize the progress button on hover. | -| .e-progress-btn:focus | To customize the progress button on focus. | -| .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle | To customize the progress button spinner. | \ No newline at end of file +| .e-progress-btn | Customize the ProgressButton root element. | +| .e-progress-btn:hover | Customize the ProgressButton on hover. | +| .e-progress-btn:focus | Customize the ProgressButton when focused (keyboard or programmatic focus). | +| .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle | Customize the spinner visuals within the ProgressButton. | \ No newline at end of file diff --git a/blazor/progress-button/types-icons.md b/blazor/progress-button/types-icons.md index 50cfdd201a..c8ba903de3 100644 --- a/blazor/progress-button/types-icons.md +++ b/blazor/progress-button/types-icons.md @@ -9,7 +9,7 @@ documentation: ug # Types and Icons in Blazor ProgressButton Component -This section explains the different types and icons of Progress Button. +This section describes the available ProgressButton types and how to configure icons for the component. ## Types @@ -21,7 +21,7 @@ The types of Blazor Progress Button are as follows: ### Outline Progress Button -An outline Progress Button has a border with transparent background. To create an outline Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-outline`. +An outline ProgressButton has a border with transparent background. To create an outline Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-outline`. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -33,7 +33,7 @@ An outline Progress Button has a border with transparent background. To create a ### Round Progress Button -A round Progress Button is shaped like a circle. Usually, it contains an icon representing its action. To create a round Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-round`. +A round ProgressButton is circular and typically displays an icon representing its action. To create a round ProgressButton, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-round`. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -51,7 +51,7 @@ A round Progress Button is shaped like a circle. Usually, it contains an icon re ### Primary Progress Button -The primary progress button is styled with background color and it is used to represent a primary action. To create a Primary Progress Button, set the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IsPrimary) property to `true`. +A primary ProgressButton uses a solid background to emphasize a primary action. To create a primary ProgressButton, set the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IsPrimary) property to `true`. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -65,7 +65,7 @@ The primary progress button is styled with background color and it is used to re ### Progress Button with font icons -The Progress Button can have an icon to provide the visual representation of the action. To place the icon on a Progress Button, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Progress Button. You can customize the icon's position by using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconPosition) property. +The ProgressButton can display an icon to visually represent the action. Assign the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconCss) property to `e-icons` plus the desired icon class. By default, the icon is positioned on the left. Use [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconPosition) to change the icon placement. ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/query-builder/accessibility.md b/blazor/query-builder/accessibility.md index b368de6afe..b7baefad72 100644 --- a/blazor/query-builder/accessibility.md +++ b/blazor/query-builder/accessibility.md @@ -3,15 +3,15 @@ layout: post title: Accessibility in Blazor Query Builder component | Syncfusion description: Checkout and learn here all about Accessibility in Syncfusion Blazor ContextMenu component and more. platform: Blazor -control: Context Menu +control: QueryBuilder documentation: ug --- # Accessibility in Blazor Query Builder component -The Blazor Query Builder component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Query Builder follows widely accepted accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Blazor Query Builder component is outlined below. +The accessibility compliance for the Blazor Query Builder is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -38,27 +38,27 @@ The accessibility compliance for the Blazor Query Builder component is outlined ## WAI-ARIA attributes -WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. +WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components. ARIA provides additional semantics to describe role, state, and functionality. The following list of ARIA attributes is used in Blazor Query Builder. | Attributes | Purpose | | --- | --- | -| `role` | Indicates the query builder component. | +| `role` | Identifies the Query Builder region and roles on interactive controls to assist screen readers. | ## Keyboard interaction -The Blazor Query Builder component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Query Builder component. +The Blazor Query Builder follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported. | Windows | Mac | Actions | | --- | --- | --- | -| Tab / Shift + Tab | Tab / ⇧ + Tab | To focus the next item in the rule. | +| Tab / Shift + Tab | Tab / ⇧ + Tab | Move focus between fields, operators, values, and action buttons within a rule. | ## Ensuring accessibility -The Blazor Query Builder component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Query Builder’s accessibility levels are verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Query Builder component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder component with accessibility tools. +The accessibility compliance of the Blazor Query Builder is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder with accessibility tools. {% previewsample "https://ej2.syncfusion.com/accessibility/query-builder.html" %} diff --git a/blazor/query-builder/clone-group-rule.md b/blazor/query-builder/clone-group-rule.md index a8875923ee..b45cf21051 100644 --- a/blazor/query-builder/clone-group-rule.md +++ b/blazor/query-builder/clone-group-rule.md @@ -9,12 +9,13 @@ documentation: ug # Clone Group/ Rule in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) functionality extends to cloning both individual rules and entire groups. Utilizing the Clone options will generate an exact duplicate of a rule or group adjacent to the original one. This feature enables users to replicate complex query structures effortlessly. The [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) function offers users the ability to toggle the visibility of these cloning buttons, providing convenient control over the cloning process within the Query Builder interface. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports cloning both individual rules and entire groups. Cloning creates an exact duplicate of the selected rule or group adjacent to the original, making it quick to replicate complex query structures. The [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) configuration controls the visibility of cloning buttons in the user interface for convenient, on-demand access. -You can `clone` groups and rules by interacting through the user interface and methods. +Cloning is available via the user interface and programmatically: + +* Use the [`CloneGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone a group. The first parameter is the existing group’s ID, and the second is the insert index within its parent. +* Use the [`CloneRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone a rule. -* Use the [CloneGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone group. -* Use [CloneRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone rule. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -98,6 +99,6 @@ You can `clone` groups and rules by interacting through the user interface and m ``` -![Clone Group/Rule in Blazor QueryBuilder](./images/clone-group-rule.png) +![Cloning a group and rule in Blazor Query Builder](./images/clone-group-rule.png) -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder. \ No newline at end of file +N> Ensure that the IDs passed to `CloneGroup` and `CloneRule` refer to existing items in the current model. The cloning buttons can be shown or hidden via `QueryBuilderShowButtons`. You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to learn how to render and configure the Query Builder. \ No newline at end of file diff --git a/blazor/query-builder/columns-binding.md b/blazor/query-builder/columns-binding.md index 79641666d9..84e08cc941 100644 --- a/blazor/query-builder/columns-binding.md +++ b/blazor/query-builder/columns-binding.md @@ -9,15 +9,15 @@ documentation: ug # Columns in Blazor QueryBuilder Component -The column definitions are used as the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource) schema in the Query Builder. This plays a vital role in rendering column values. The Query Builder operations such as create or delete conditions and create or delete groups are performed based on the column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is necessary to map the data source values in the query builder columns. +Column definitions provide the schema used by the Query Builder’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource). They determine how field values are rendered and how users create or delete conditions and groups. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is required to map data source fields to Query Builder columns. -N> If the column field is not specified in the data source, the column values will be empty. +N> If the column field is not present in the data source, the column renders with empty values. ## Auto generation -The [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the datasource when the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) declaration is empty or undefined while initializing the query builder. All the columns in the `DataSource` are bound as the query builder columns. +[Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the data source when the `Columns` declaration is empty or not provided at initialization. In this case, all fields in the `DataSource` are bound as Query Builder columns. -N> When columns are auto-generated, the column type will be determined from the first record of the data source. +N> When columns are auto-generated, the column type is inferred from the first record of the data source. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -49,13 +49,13 @@ N> When columns are auto-generated, the column type will be determined from the ## Labels -By default, the column label is displayed from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default label, you have to define the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) value. +By default, the column label is derived from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default, set the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) property to a display-friendly name (for example, a localized string). -N> If both the field and label are not defined in the column, the column renders with `empty` text. +N> If both the field and label are not defined for a column, it renders with `empty` text. ## Operators -The operator for a column can be defined in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) property. You can directly set the custom operators using [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html) in columns `Operator` property. The available operators and its supported data types are: +Define the allowed operators for a column in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) collection. Custom operator sets can be configured using the column’s [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html). The following built-in operators and their supported data types are available: | Operators | Description | Supported Types | | ------------ | ----------------------- | ------------------ | @@ -65,16 +65,16 @@ The operator for a column can be defined in the [Columns](https://help.syncfusio | notendswith | Checks whether the value does not end with the specified value. | String | | contains | Checks whether the value contains the specified value. | String | | notcontains | Checks whether the value does not include the specified value. | String | -| equal | Checks whether the value is equal to the specified value. | String, Number ,Date, Boolean | +| equal | Checks whether the value is equal to the specified value. | String, Number, Date, Boolean | | notequal | Checks for values not equal to the specified value. | String, Number, Date, Boolean | | greaterthan | Checks whether the value is greater than the specified value. | Date, Number | | greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date, Number | -| lessthan | Checks whether the value is lesser than the specified value.| Date, Number | -| lessthanorequal | Checks whether the value is lesser than or equal to the specified value. | Date, Number | -| between | Checks whether the value is between the two-specific value. | Date, Number | -| notbetween | Checks whether the value is not between the two-specific value. | Date, Number | -| in | Checks whether the value is one of the specific values. | String, Number | -| notin | Checks whether the value is not in the specific values. | String, Number | +| lessthan | Checks whether the value is less than the specified value. | Date, Number | +| lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date, Number | +| between | Checks whether the value is between two specific values. | Date, Number | +| notbetween | Checks whether the value is not between two specific values. | Date, Number | +| in | Checks whether the value is one of the specified values. | String, Number | +| notin | Checks whether the value is not one of the specified values. | String, Number | | isempty | Checks whether the value is empty. | String | | isnotempty | Checks whether the value is not empty. | String | | isnull | Checks whether the value is null. | String, Number | @@ -82,9 +82,9 @@ The operator for a column can be defined in the [Columns](https://help.syncfusio ## Step -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows to set the step values to the number fields. It allows to increase or decrease the numeric value with the predefined Step value using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows setting step values for number fields. Use the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property to control the increment/decrement applied by the numeric input. -N> By default the Step value is 1. +N> By default, the `Step` value is 1. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -112,15 +112,15 @@ N> By default the Step value is 1. ``` -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. +N> You can also explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder. ## Format -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) formats date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property, to format date and number values. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports formatting of date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property to apply date and number formats. -N> From the standard numeric format, you can use the numeric related format specifiers such as n,p, and c in the format property. By using these format specifiers, you can achieve the percentage and currency textbox behavior. +N> Standard numeric format specifiers such as `n`, `p`, and `c` can be used in the `Format` property to display number, percentage, and currency inputs respectively. Formatting is culture-aware. -In the following sample, the date field is formatted as MM/yyyy/dd and the number field is formatted as currency type. +In the following sample, the date field is formatted as `MM-yyyy-dd` and the number field is formatted as currency. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -161,9 +161,9 @@ N> You can also explore our [Blazor Query Builder example](https://blazor.syncfu ## Validations -Validation allows to validate the conditions and it display errors for invalid fields. To enable validation in the Query Builder, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to true. Column fields are validated after setting the [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) property to true. +Validation enables checking of rule inputs and displays errors for invalid fields. To enable validation, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to `true`. After enabling, fields are validated based on the configured rules and column settings. -N> You can set `Min` and `Max` values for number values. +N> You can set `Min` and `Max` values for numeric fields using `QueryBuilderColumnValidation`. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -197,4 +197,4 @@ N> You can set `Min` and `Max` values for number values. ``` -![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png) +![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png) \ No newline at end of file diff --git a/blazor/query-builder/data-binding.md b/blazor/query-builder/data-binding.md index 127206d181..40d70420b7 100644 --- a/blazor/query-builder/data-binding.md +++ b/blazor/query-builder/data-binding.md @@ -9,16 +9,16 @@ documentation: ug # Data Binding in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) uses `SfDataManager` to bind the dataSource which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property can be assigned either with the instance of `SfDataManager` or list of objects. It supports the following kinds of data binding method: +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) uses `SfDataManager` to bind the data source and supports both RESTful JSON data services and `IEnumerable` collections. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property accepts either an instance of `SfDataManager` or a list of objects. It supports the following data binding methods: * List Binding * Remote data -N> When using DataSource as `IEnumerable` component type, (TValue) will be inferred from its value. While using SfDataManager for data binding then the TValue must be provided explicitly in the query builder component. +N> When using `DataSource` as `IEnumerable`, the component type (`TValue`) is inferred from the data. When using `SfDataManager`, set `TValue` explicitly on the Query Builder component. ## List Binding -To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), you can assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property with a list of data. +To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property to a list of objects. Define columns to control field display names, types, and formatting. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -65,13 +65,13 @@ To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazo ## Remote Data -To bind remote data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component, assign service data as an instance of `SfDataManager` to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. To interact with remote data source, provide the endpoint `Url`. +To bind remote data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), use `SfDataManager` with the appropriate adaptor and set the service endpoint `Url`. Define columns to control field labels, types, and formatting when binding to remote data. Ensure the endpoint is accessible from the client (CORS/HTTPS as applicable). -Refer to the following code example for remote Data binding using `OData` service. +Refer to the following code examples for remote data binding with OData, OData v4, and Web API services. ### Binding with OData services -[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the SfDataManager. Refer to the following code example for remote Data binding using OData service. +[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. Use `ODataAdaptor` with `SfDataManager` to retrieve data from OData services. ```cshtml @@ -103,7 +103,7 @@ Refer to the following code example for remote Data binding using `OData` servic ### Binding with OData v4 services -The ODataV4 is an improved version of OData protocols, and the `SfDataManager` can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData v4 service, use the `ODataV4Adaptor`. +OData v4 is an improved version of the OData protocol. Use `ODataV4Adaptor` with `SfDataManager` to consume OData v4 services. For more details, see the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). ```cshtml @@ -135,7 +135,7 @@ The ODataV4 is an improved version of OData protocols, and the `SfDataManager` c ### Web API -The WebApiAdaptor can be used to bind query builder with Web API created using OData endpoint. +Use `WebApiAdaptor` to bind the Query Builder to RESTful Web API endpoints that return JSON data. ```cshtml @@ -167,7 +167,7 @@ The WebApiAdaptor can be used to bind query builder with Web API created using O ## Complex Data Binding -Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and Separator must be given in query builder. +Complex data binding allows you to work with nested objects and subfields. Bind complex data using nested columns or by specifying a complex data source with a `Separator` that defines the path delimiter used in field names. ```cshtml @@ -251,4 +251,4 @@ Complex Data Binding allows you to create subfield for columns. To implement com ![Complex Data Binding in Blazor QueryBuilder](./images/blazor-query-builder-complex-db.png) -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the Query Builder. \ No newline at end of file diff --git a/blazor/query-builder/drag-and-drop.md b/blazor/query-builder/drag-and-drop.md index 4b953cdcf5..85eec4221d 100644 --- a/blazor/query-builder/drag-and-drop.md +++ b/blazor/query-builder/drag-and-drop.md @@ -9,7 +9,14 @@ documentation: ug # Drag and drop in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to reposition rules or groups within the component effortlessly. This enhancement provides a more intuitive and flexible way to construct and modify queries. You can use [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderAllowDragAndDrop.html) to perform drag and drop functionality. And we have events support for drag and drop features that, indicates the [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDragStart.html), [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrag.html) and [Drop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrop.html) actions. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports drag-and-drop reordering of rules and groups for a more intuitive query-building experience. Enable this per instance by setting the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AllowDragAndDrop) property to `true` (default is `false`). Rules and groups can be dragged within the same group or across groups; items retain their type (a rule cannot be dropped as a group and vice versa). + +Drag-and-drop events provide hooks to monitor and customize behavior: +- [`DragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDragStart.html): Fires when a drag begins (access the source item and cancel if needed). +- [`Drag`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrag.html): Fires during dragging (track current target and position). +- [`Drop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrop.html): Fires when the item is dropped (determine target group and insert index, or cancel to enforce business rules). + +Touch input is supported on mobile and tablet devices. For accessibility, consider offering parallel UI actions (such as add/remove buttons) for users who rely on keyboard navigation. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -61,6 +68,6 @@ The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-q ``` -![Drag and Drop in Blazor QueryBuilder](./images/drag-and-drop.png) +![Dragging a rule to reorder within a group in the Blazor Query Builder](./images/drag-and-drop.png) N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/filtering.md b/blazor/query-builder/filtering.md index d7092fd2e0..67059082d4 100644 --- a/blazor/query-builder/filtering.md +++ b/blazor/query-builder/filtering.md @@ -9,12 +9,12 @@ documentation: ug # Filtering in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows to create or delete conditions and groups. You can use [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) to enable/disable these buttons. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) enables creating and deleting rules (conditions) and groups. Use [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) to control the visibility of these action buttons in the user interface. -You can `create` or `delete` conditions by interacting through the user interface and methods. +Creation and deletion can be done through the UI or programmatically. -* Use the [AddRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddRule_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_System_Boolean_), and [DeleteRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteRule_System_String_) methods to create/delete conditions. -* Use [AddGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddGroup_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_), and [DeleteGroup](hhttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteGroup_System_String_) methods to create/delete groups. +* Use [`AddRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddRule_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_System_Boolean_) and [`DeleteRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteRule_System_String_) to create or delete conditions (rules). Parameters include the rule to add and target group ID (for `AddRule`) or the rule ID to remove (for `DeleteRule`). +* Use [`AddGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddGroup_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_) and [`DeleteGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteGroup_System_String_) to create or delete groups. Parameters include the group to add and parent group ID (for `AddGroup`) or the group ID to remove (for `DeleteGroup`). ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -100,6 +100,6 @@ You can `create` or `delete` conditions by interacting through the user interfac ``` -![Filtering in Blazor QueryBuilder](./images/blazor-querybuilder-filtering.png) +![Filtering in Blazor Query Builder](./images/blazor-querybuilder-filtering.png) -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/getting-started-webapp.md b/blazor/query-builder/getting-started-webapp.md index 3a3405837b..a1f2e104c3 100644 --- a/blazor/query-builder/getting-started-webapp.md +++ b/blazor/query-builder/getting-started-webapp.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor QueryBuilder in Blazor Web App -This section briefly explains about how to include [Blazor QueryBuilder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor Query Builder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. -N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder. {% tabcontents %} @@ -23,17 +23,17 @@ N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfus ## 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). +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. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App -To add **Blazor QueryBuilder** 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Query Builder** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a list of packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -56,11 +56,11 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -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). +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). -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](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) when creating the app. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, in a Blazor Web App with the `Auto` interactive render mode, run:. {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -72,15 +72,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with different interactive modes and locations, see the [getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using `WebAssembly` or `Auto` render modes, install Syncfusion® Blazor component NuGet packages in the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project directory that contains the `.csproj` file. +- Run the following commands to install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/): {% tabs %} @@ -94,7 +94,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a list of packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -104,10 +104,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** in the client project. | +| Server | Open **Components/_Imports.razor** in the server project. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace. +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -118,9 +118,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` 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 **~/Program.cs** for your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the interactive render mode is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client). {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,7 +154,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -177,7 +177,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` and the script at the end of `` in **~/Components/App.razor** as shown below: ```html @@ -191,11 +191,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [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 QueryBuilder component -Add the Syncfusion® Blazor QueryBuilder 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 Query Builder component in the **~Pages/.razor** file. If the interactivity location is set to `Per page/component`, specify a render mode at the top of the page as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -204,7 +204,7 @@ Add the Syncfusion® Blazor QueryBuilder com | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in `App.razor` by default. {% tabs %} {% highlight razor %} @@ -249,9 +249,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in your default web browser. -![Blazor QueryBuilder Component](./images/blazor-querybuilder-component.png) +![Blazor Query Builder Component](./images/blazor-querybuilder-component.png) -N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder/BlazorWebApp) +N> [View sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder/BlazorWebApp) ## See also diff --git a/blazor/query-builder/getting-started.md b/blazor/query-builder/getting-started.md index 20bca96195..aba8b8618f 100644 --- a/blazor/query-builder/getting-started.md +++ b/blazor/query-builder/getting-started.md @@ -9,14 +9,14 @@ documentation: ug # Getting Started with Blazor QueryBuilder Component -This section briefly explains about how to include [Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code. -To get started quickly with Blazor QueryBuilder, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder) sample: +To get started quickly with Blazor Query Builder, check out the following video or the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder) sample: {% youtube "youtube:https://www.youtube.com/watch?v=jyWU7XSg3WI"%} -N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder. {% tabcontents %} @@ -28,11 +28,11 @@ N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfus ## 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). +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 QueryBuilder and Themes NuGet in the App -To add **Blazor QueryBuilder** 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Query Builder** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full package list and component details. {% endtabcontent %} @@ -55,9 +55,10 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). + +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -72,9 +73,9 @@ cd BlazorApp ## Install Syncfusion® Blazor QueryBuilder and Themes NuGet in the App -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +- Press Ctrl+` to open the integrated terminal in Visual Studio Code. +- Ensure you are in the project root directory where the `.csproj` file is located. +- Run the following commands to install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore packages. {% tabs %} @@ -88,7 +89,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full package list and component details. {% endtabcontent %} @@ -96,7 +97,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +108,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now register the Syncfusion® Blazor service in **~/Program.cs** for your Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +132,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` of **~/index.html**. ```html @@ -140,11 +141,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Blazor QueryBuilder component -Add the Syncfusion® Blazor QueryBuilder component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Query Builder component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -178,11 +179,11 @@ Add the Syncfusion® Blazor QueryBuilder com {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Query Builder component in the default web browser. -![Blazor QueryBuilder Component](./images/blazor-querybuilder-component.png) +![Blazor Query Builder component](./images/blazor-querybuilder-component.png) ## 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 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/query-builder/how-to/change-display-mode.md b/blazor/query-builder/how-to/change-display-mode.md index b7f0ad2ff3..b8cf64914b 100644 --- a/blazor/query-builder/how-to/change-display-mode.md +++ b/blazor/query-builder/how-to/change-display-mode.md @@ -9,7 +9,7 @@ documentation: ug # Change Display Mode in Blazor QueryBuilder Component -The QueryBuilder allows to view Vertically or Horizontally. To enable this feature, you can set the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DisplayMode) property. +Query Builder can render in a horizontal or vertical layout. Configure the layout by setting the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DisplayMode) property. ```cshtml @using Syncfusion.Blazor.QueryBuilder diff --git a/blazor/query-builder/how-to/enable-not.md b/blazor/query-builder/how-to/enable-not.md index 3acc3bcc8b..6082385c5d 100644 --- a/blazor/query-builder/how-to/enable-not.md +++ b/blazor/query-builder/how-to/enable-not.md @@ -9,9 +9,9 @@ documentation: ug # Show Not Operator in Blazor QueryBuilder Component -The QueryBuilder provides `Not` operator along with AND, OR operators to filter records based on more than one condition. You can enable this feature by setting the [EnableNotCondition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableNotCondition) property to `true`. +Query Builder supports the logical NOT operator alongside AND and OR to negate a group’s combined condition. Enable the NOT operator by setting the [EnableNotCondition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableNotCondition) property to `true`. -N> By default `EnableNotCondition` set as false. +N> The `EnableNotCondition` property is false by default. ```cshtml diff --git a/blazor/query-builder/how-to/gets-filtered-records.md b/blazor/query-builder/how-to/gets-filtered-records.md index 9a34680e47..0b36ab6ad7 100644 --- a/blazor/query-builder/how-to/gets-filtered-records.md +++ b/blazor/query-builder/how-to/gets-filtered-records.md @@ -9,7 +9,7 @@ documentation: ug # Gets the Filtered Records in Blazor QueryBuilder Component -Gets the filtered datasource based on the defined condition in Query builder through the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetFilteredRecordsAsync) method. +Retrieve the filtered data source based on the currently defined rules in the Query Builder by using the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetFilteredRecordsAsync) method. ```cshtml @using Syncfusion.Blazor.QueryBuilder diff --git a/blazor/query-builder/how-to/getting-started-web-assembly.md b/blazor/query-builder/how-to/getting-started-web-assembly.md index 21990f1666..44e577ee14 100644 --- a/blazor/query-builder/how-to/getting-started-web-assembly.md +++ b/blazor/query-builder/how-to/getting-started-web-assembly.md @@ -9,19 +9,20 @@ documentation: ug # Blazor QueryBuilder Component in WebAssembly App using Visual Studio -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor QueryBuilder component using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building a Blazor WebAssembly app with the Blazor Query Builder component using Visual Studio. ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Blazor WebAssembly 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). +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 QueryBuilder and Themes NuGet in the App -To add `Blazor QueryBuilder` 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.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Query Builder component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -33,11 +34,10 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - +N> Syncfusion® Blazor components are available on NuGet. See the [Syncfusion Blazor packages on NuGet](https://www.nuget.org/packages?q=syncfusion.blazor) and the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of packages and component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -48,7 +48,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor services in **~/Program.cs** of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -72,7 +72,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: +The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: * For Blazor WebAssembly app, include it in the **~/index.html** file. @@ -83,7 +83,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Choose one theme stylesheet (Bootstrap, Fluent, Material, or Tailwind). See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme options and delivery 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 script options, refer to [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). Only one script reference is required. ## Add Blazor QueryBuilder component @@ -122,6 +122,6 @@ Add the Syncfusion® Blazor QueryBuilder com {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor QueryBuilder component in the default web browser. -![Blazor QueryBuilder](../images/blazor-querybuilder.gif) +![Blazor Query Builder](../images/blazor-querybuilder.gif) diff --git a/blazor/query-builder/how-to/maintain-state-persistence.md b/blazor/query-builder/how-to/maintain-state-persistence.md index a787abc09a..6e93e90fe2 100644 --- a/blazor/query-builder/how-to/maintain-state-persistence.md +++ b/blazor/query-builder/how-to/maintain-state-persistence.md @@ -9,9 +9,10 @@ documentation: ug # Maintain the State Persistence in Blazor QueryBuilder Component -State persistence allows the QueryBuilder to retain the current QueryBuilder state in the browser local storage for state maintenance. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnablePersistence) property which is set to false by default. When it is set to true, the QueryBuilder `Rules` will be retained even after refreshing the page. +State persistence enables the QueryBuilder to retain its current state in the browser’s local storage. This behavior is controlled by the[EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnablePersistence) property which is set to false by default. When it is set to true, the QueryBuilder `Rules` will be retained even after refreshing the page. -N> The state will be persisted based on ID property. So, it is recommended to explicitly set the ID property for QueryBuilder. + +N> State is persisted based on the component ID. It is recommended to explicitly set a unique ID for the QueryBuilder. ```cshtml @using Syncfusion.Blazor.QueryBuilder diff --git a/blazor/query-builder/how-to/read-only.md b/blazor/query-builder/how-to/read-only.md index f75fc68af1..be248f6a65 100644 --- a/blazor/query-builder/how-to/read-only.md +++ b/blazor/query-builder/how-to/read-only.md @@ -7,9 +7,9 @@ control: QueryBuilder documentation: ug --- -# Readonly in Blazor QueryBuilder Component +# Read-only in Blazor QueryBuilder component -The readonly property in the query builder disables the user interactions on the component. You can enable this feature by setting the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Readonly) property to `true`. +The Readonly property disables user interactions in the QueryBuilder, preventing actions such as adding or removing groups and rules, and editing fields, operators, and values. Set the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_Readonly) property to `true`. ```cshtml @@ -43,4 +43,4 @@ The readonly property in the query builder disables the user interactions on the ``` -![Readonly in Blazor QueryBuilder](./../images/blazor-querybuilder-readonly.png) \ No newline at end of file +![Readonly mode in Blazor QueryBuilder](./../images/blazor-querybuilder-readonly.png) \ No newline at end of file diff --git a/blazor/query-builder/how-to/restrict-group.md b/blazor/query-builder/how-to/restrict-group.md index b2bc40f4f8..32fb8481f1 100644 --- a/blazor/query-builder/how-to/restrict-group.md +++ b/blazor/query-builder/how-to/restrict-group.md @@ -9,9 +9,9 @@ documentation: ug # Restrict the Groups in Blazor QueryBuilder Component -The QueryBuilder allows to restrict the groups from creation based on group count. You can enable this feature by setting the [MaxGroupCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_MaxGroupCount) property. +Limit how many condition groups users can create in the Query Builder by setting the [`MaxGroupCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_MaxGroupCount) property. -N> By default, MaxGroupCount is set as 5. +N> By default, `MaxGroupCount` is set to 5. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -54,4 +54,4 @@ N> By default, MaxGroupCount is set as 5. ``` -N> You can use this property in the mobile mode to restrict the nested group creation. \ No newline at end of file +N> This property can also be used in mobile mode to restrict nested group creation. \ No newline at end of file diff --git a/blazor/query-builder/how-to/right-to-left.md b/blazor/query-builder/how-to/right-to-left.md index 53e445b0bc..7c5169a371 100644 --- a/blazor/query-builder/how-to/right-to-left.md +++ b/blazor/query-builder/how-to/right-to-left.md @@ -9,7 +9,7 @@ documentation: ug # Right to Left in Blazor QueryBuilder Component -RTL provides an option to switch the text direction and layout of the Query Builder component from right-to-left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable this feature, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_EnableRtl) to true. +Right-to-left (RTL) support mirrors the text direction and layout of the Query Builder for languages that read right to left, improving usability and accessibility for Arabic, Persian (Farsi), Urdu, Hebrew, and similar locales. To enable RTL for a Query Builder instance, set the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_EnableRtl) property to `true`. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -52,4 +52,4 @@ RTL provides an option to switch the text direction and layout of the Query Buil ``` -![Right to Left in Blazor QueryBuilder](./../images/blazor-querybuilder-right-to-left.png) \ No newline at end of file +![Right to left in Blazor Query Builder](./../images/blazor-querybuilder-right-to-left.png) \ No newline at end of file diff --git a/blazor/query-builder/how-to/sort-the-columns.md b/blazor/query-builder/how-to/sort-the-columns.md index 9f30bbdc10..bf87d94542 100644 --- a/blazor/query-builder/how-to/sort-the-columns.md +++ b/blazor/query-builder/how-to/sort-the-columns.md @@ -9,8 +9,7 @@ documentation: ug # Sort the Columns in Blazor QueryBuilder Component -The QueryBuilder has options to sort the column fields by `ascending` or `descending` order. To sort the columns, you need to set [SortDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_SortDirection) property. - +Sort the field list shown in the Query Builder’s field (column) dropdown to improve in large schemas. Set the [`SortDirection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_SortDirection) property to `SortDirection.Ascending` or `SortDirection.Descending` to control the order. Sorting is applied per component instance and is based on the displayed field labels. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -56,4 +55,4 @@ The QueryBuilder has options to sort the column fields by `ascending` or `descen ``` -![Sorting in Blazor QueryBuilder](./../images/blazor-querybuilder-sorting.png) \ No newline at end of file +![Sorting in Blazor Query Builder](./../images/blazor-querybuilder-sorting.png) \ No newline at end of file diff --git a/blazor/query-builder/import-export.md b/blazor/query-builder/import-export.md index 1035af7e42..279220aa3f 100644 --- a/blazor/query-builder/import-export.md +++ b/blazor/query-builder/import-export.md @@ -9,19 +9,19 @@ documentation: ug # Importing and Exporting in Blazor QueryBuilder Component -Importing facilitates the viewing or editing of predefined conditions available in JSON, SQL, and MongoDB query formats, while exporting enables obtaining the created rules in the query builder as JSON, SQL, and MongoDB queries. +Import rules to view or edit predefined conditions from JSON, SQL, or MongoDB query formats, and export the rules built in the Query Builder back to JSON, SQL, or MongoDB queries. These operations map to the Query Builder’s rule model and require that fields and operators used in the imported content exist in the configured columns. ## Importing -Importing enables users to bring predefined conditions into the system for viewing or editing, available in formats such as JSON, SQL, and MongoDB query. It facilitates the quick incorporation of pre-defined rules or parameters into workflows, streamlining the setup process by importing directly from external sources or saved configurations. +Import predefined conditions for display or editing from JSON, SQL, or MongoDB queries. Ensure that imported fields, types, and operators align with the columns and configuration in the Query Builder. ### Importing from JSON Object -Importing from JSON enables users to bring predefined conditions encoded in JSON format into the system. This feature streamlines the process by providing a standardized format for importing data, ensuring compatibility, and ease of use. +Import JSON to populate the rule model. This provides a consistent way to initialize or update conditions. #### Initial rendering -To initially apply conditions, you can establish the rules in **QueryBuilderRule** by importing a structured JSON object and defining its properties. +To apply conditions during initial render, define rules in `QueryBuilderRule` using a structured JSON object (mapped to the rule model) and set its properties. ```cshtml @@ -68,19 +68,19 @@ To initially apply conditions, you can establish the rules in **QueryBuilderRule } ``` -![Blazor QueryBuilder with Data Binding](./images/blazor-querybuilder-binding-data.png) +![Blazor Query Builder with a data Binding](./images/blazor-querybuilder-binding-data.png) #### Post rendering -You can set the conditions from structured JSON object through the [SetRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRules_System_Collections_Generic_List_Syncfusion_Blazor_QueryBuilder_RuleModel__System_String_System_Nullable_System_Boolean__System_Boolean_) method. +Set or replace conditions programmatically from a structured JSON object using the [`SetRules`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRules_System_Collections_Generic_List_Syncfusion_Blazor_QueryBuilder_RuleModel__System_String_System_Nullable_System_Boolean__System_Boolean_) method. ### Importing from SQL Query -Importing from SQL involves integrating predefined conditions or data stored in a SQL database into the Query Builder. This enables the direct integration of SQL queries, thereby improving workflow efficiency and data accuracy within the application. SQL importing supports various types, including Inline SQL, Parameter SQL, and Named Parameter SQL. +Import conditions expressed as SQL. Supported forms include inline SQL, parameter SQL (positional), and named-parameter SQL. Imported expressions are parsed into the rule model; operators and fields must be supported by the configured columns. #### Importing from Inline SQL Query -Importing from Inline SQL involves integrating SQL queries directly into the Query Builder. This method streamlines the process by enabling users to input SQL statements directly into the application for analysis, manipulation, or further processing within the Query Builder. Conditions can be set from Inline SQL queries using the [SetRulesFromSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRulesFromSql_System_String_) method. +Provide an inline SQL string and parse it into rules using the [`SetRulesFromSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRulesFromSql_System_String_) method. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -127,7 +127,7 @@ Importing from Inline SQL involves integrating SQL queries directly into the Que } ``` -![Importing from Inline SQL in Blazor QueryBuilder](./images/blazor-querybuilder-import-from-sql.png) +![Importing from Inline SQL in Blazor Query Builder](./images/blazor-querybuilder-import-from-sql.png) #### Importing from Parameter SQL Query @@ -183,7 +183,7 @@ Importing from Parameter SQL involves integrating SQL queries with parameters di } ``` -![Importing from Parameter SQL in Blazor QueryBuilder](./images/import-parameter.png) +![Importing from Parameter SQL in Blazor Query Builder](./images/import-parameter.png) #### Importing from Named Parameter SQL Query @@ -239,11 +239,11 @@ Importing from Named Parameter SQL involves integrating SQL queries with named p } ``` -![Importing from Named Parameter SQL in Blazor QueryBuilder](./images/import-named-parameter.png) +![Importing from Named Parameter SQL in Blazor Query Builder](./images/import-named-parameter.png) ### Importing from MongoDB Query -Importing from MongoDB Query involves integrating MongoDB queries directly into the Query Builder. This enables users to input MongoDB query statements directly into the application, allowing for seamless integration and manipulation of MongoDB data within the Query Builder environment. It streamlines the process by facilitating direct access to MongoDB data for analysis, filtering, and further processing within the application. Conditions can be set from Named Parameter SQL queries using the [SetMongoQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetMongoQuery_System_String_) method. +Import MongoDB queries directly and parse them into the rule model using the [`SetMongoQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetMongoQuery_System_String_) method. Ensure field names and date/number formats match those defined in columns and the current culture. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -291,15 +291,15 @@ Importing from MongoDB Query involves integrating MongoDB queries directly into } ``` -![Importing from MongoDB in Blazor QueryBuilder](./images/import-mongo.png) +![Importing from MongoDB in Blazor Query Builder](./images/import-mongo.png) ## Exporting -Exporting from the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows users to preserve or store the created conditions. The defined conditions can be exported using various methods, including: +Export the current rules from the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) to persist or share them. Choose JSON, SQL (inline, parameter, named), or MongoDB depending on the target system. Validate and sanitize any exported strings before executing them against a database. ### Exporting to JSON Object -You can extract the established conditions in the Query Builder and convert them into a structured JSON object format using the [GetRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetRules) method. This process enables users to save or transfer the conditions for further use or analysis in other applications or systems that support JSON data. +Convert the current rules to a structured JSON object using the [`GetRules`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetRules) method. The result can be saved or reapplied later (e.g., via `SetRules`). ```cshtml @using Syncfusion.Blazor.Buttons @@ -407,7 +407,7 @@ Exporting to Inline SQL Query entails embedding the defined conditions from the #### Exporting to Parameter SQL Query -Exporting to Parameter SQL involves incorporating the defined conditions from the Query Builder into SQL queries with parameters. This method allows for dynamic value assignment during execution, enhancing flexibility and adaptability in query processing within SQL database. This can be accomplished using the [GetParameterSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_) method for exporting to Parameter SQL query. +Generate SQL with positional parameters using [`GetParameterSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_). This is useful for parameterized queries with ordered parameters. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -461,7 +461,7 @@ Exporting to Parameter SQL involves incorporating the defined conditions from th #### Exporting to Named Parameter SQL Query -Exporting to Named Parameter SQL entails integrating the defined conditions from the Query Builder into SQL queries with named parameters. This method offers enhanced readability and flexibility during execution by using named placeholders for parameter values. Named Parameter SQL facilitates easier maintenance and modification of queries, making it convenient for dynamic parameter assignment within SQL database. This can be accomplished using the method [GetNamedParameterSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetNamedParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_) for exporting to Named Parameter SQL query. +Generate SQL with named parameters using [`GetNamedParameterSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetNamedParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_). This enhances readability and allows mapping values by name. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -515,7 +515,7 @@ Exporting to Named Parameter SQL entails integrating the defined conditions from ### Exporting to MongoDB Query -Exporting to MongoDB Query involves converting the defined conditions within the Query Builder into MongoDB query syntax. This process allows users to generate MongoDB queries representing the conditions set in the Query Builder, which can then be executed directly on a MongoDB database or used for further analysis and processing. This can be accomplished using the [GetMongoQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetMongoQuery_Syncfusion_Blazor_QueryBuilder_RuleModel_) method for exporting to MongoDB query. +Convert the current rules to MongoDB query syntax using [`GetMongoQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetMongoQuery_Syncfusion_Blazor_QueryBuilder_RuleModel_). Ensure date and number formats match expectations of the target database. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -567,4 +567,4 @@ Exporting to MongoDB Query involves converting the defined conditions within the ``` -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/localization.md b/blazor/query-builder/localization.md index 794c0bd8da..6df09b87b3 100644 --- a/blazor/query-builder/localization.md +++ b/blazor/query-builder/localization.md @@ -9,6 +9,6 @@ documentation: ug # Localization in Blazor QueryBuilder Component -[Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +[Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports localization for UI text (such as button labels, operator names, and messages) and honors the application’s culture for date and number formatting. See the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for end-to-end guidance on configuring languages, providing translations, and switching cultures in Blazor apps. N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/lock-group-rule.md b/blazor/query-builder/lock-group-rule.md index c5efb07689..4e11ec4584 100644 --- a/blazor/query-builder/lock-group-rule.md +++ b/blazor/query-builder/lock-group-rule.md @@ -9,9 +9,9 @@ documentation: ug # Lock Group/ Rule in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to lock individual rules or entire groups. When a rule is locked, it prevents users from modifying its field, operator, and value, effectively disabling these components. Similarly, locking a group disables all elements contained within it. This feature offers users greater control over their query configurations, ensuring that specific rules or groups remain unchanged. Additionally, users can manage the visibility of locking buttons through the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) function, allowing for seamless control over the locking mechanism. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports locking individual rules or entire groups. When a rule is locked, its field, operator, and value editors are disabled and cannot be changed. Locking a group disables all editors and actions within that group. Locked items still participate in evaluation; only editing is restricted. The visibility of lock buttons in the UI can be configured through the [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) configuration. -You can `lock` groups and rules by interacting through the user interface and methods. +Locking can be done through the user interface or programmatically. * Use the [LockGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_LockGroup_System_String_System_Boolean_) method to lock group. * Use [LockRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_LockRule_System_String_System_Boolean_) method to lock rule. @@ -94,6 +94,6 @@ You can `lock` groups and rules by interacting through the user interface and me ``` -![Lock Group/Rule in Blazor QueryBuilder](./images/lock-group-rule.png) +![Lock Group/Rule in Blazor Query Builder](./images/lock-group-rule.png) N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/separate-connector.md b/blazor/query-builder/separate-connector.md index a4b89a8edb..154f41e5b1 100644 --- a/blazor/query-builder/separate-connector.md +++ b/blazor/query-builder/separate-connector.md @@ -9,7 +9,9 @@ documentation: ug # Separate Connector in Blazor QueryBuilder Component -The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. You can use [EnableIndividualConditions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderEnableIndividualConditions.html) to perform separate connector functionality. +The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports separate connectors between rules or groups within the same parent group. When enabled, each rule (or nested group) can specify its own connector (AND/OR), allowing more precise control over complex logic than using a single group-level connector. + +Use the [`EnableIndividualConditions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableIndividualConditions) property to enable separate connectors. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -61,6 +63,6 @@ The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-q ``` -![EnableIndividualConditions in Blazor QueryBuilder](./images/separate-connector.png) +![EnableIndividualConditions in Blazor Query Builder](./images/separate-connector.png) N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/query-builder/style-and-appearance.md b/blazor/query-builder/style-and-appearance.md index 0b14062791..5d4381bf62 100644 --- a/blazor/query-builder/style-and-appearance.md +++ b/blazor/query-builder/style-and-appearance.md @@ -9,14 +9,14 @@ documentation: ug # Styles and Appearances in Blazor QueryBuilder Component -To modify the QueryBuilder appearance, you need to override the default CSS of QueryBuilder component. Find the list of CSS classes and its corresponding section in QueryBuilder component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +Customize the appearance of the Query Builder by overriding the component’s default CSS. The following table lists commonly used CSS selectors and the corresponding UI areas they affect. For consistent theming across applications, consider generating a custom theme with [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). | CSS Class | Purpose of Class | | ----- | ----- | -| .e-query-builder .e-btn-group input + label.e-btn | To customize the condition button in querybuilder. | -| .e-query-builder .e-btn-group input:checked + label.e-btn | To customize the selected condition button in querybuilder. | -| .e-query-builder .e-group-body .e-rule-container | To customize the querybuilder rule container. | -| .e-query-builder .e-group-action .e-btn | To customize the querybuilder add group/condition button. | -| .e-query-builder .e-removerule.e-btn.e-round | To customize the querybuilder Delete button. | -| .e-query-builder .e-rule-list > ::after,.e-query-builder .e-rule-list > ::before | To customize the querybuilder group joining line. | -| .e-query-builder .e-rule-container.e-joined-rule | To customize the querybuilder condition joining line. | \ No newline at end of file +| .e-query-builder .e-btn-group input + label.e-btn | Customize the condition button in the Query Builder. | +| .e-query-builder .e-btn-group input:checked + label.e-btn | Customize the selected condition button in the Query Builder. | +| .e-query-builder .e-group-body .e-rule-container | Customize the Query Builder rule container. | +| .e-query-builder .e-group-action .e-btn | Customize the Query Builder Add Group/Add Condition buttons. | +| .e-query-builder .e-removerule.e-btn.e-round | Customize the Query Builder delete button. | +| .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before | Customize the Query Builder group joining line. | +| .e-query-builder .e-rule-container.e-joined-rule | Customize the Query Builder condition joining line. | \ No newline at end of file diff --git a/blazor/query-builder/templates.md b/blazor/query-builder/templates.md index 400f399c0b..f59a8ae548 100644 --- a/blazor/query-builder/templates.md +++ b/blazor/query-builder/templates.md @@ -9,11 +9,11 @@ documentation: ug # Templates in Blazor QueryBuilder Component -This section explains the list of templates available in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder). +This section describes the template options available in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) to customize editors and layout. ## Value Template -The template allows to define our own widgets for column values. Use the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ValueTemplate), property to define templates. +Use a value template to render a custom editor for a column’s value field. Define the template with the [`ValueTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ValueTemplate) property. ```cshtml @using Syncfusion.Blazor.QueryBuilder @@ -86,13 +86,13 @@ The template allows to define our own widgets for column values. Use the [ValueT ``` -![Blazor QueryBuilder with Value Template](./images/blazor-querybuilder-value-template.png) +![Blazor Query Builder with a value template](./images/blazor-querybuilder-value-template.png) ## Column Template -Column Template allows to define our own widgets for entire column. Use the [ColumnTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ColumnTemplate) property to define templates. +A column template allows customizing the entire editor area for a column, including the field and value UI. Define the template with the [`ColumnTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ColumnTemplate) property. -In the following sample, the SFDropDownList component is used as the custom components for field and value in the `PaymentMode` column. +In the following sample, the DropDownList component is used as a custom editor for both the field and value in the PaymentMode column. ```cshtml @@ -240,13 +240,13 @@ In the following sample, the SFDropDownList component is used as the custom comp ``` -![Blazor QueryBuilder with Column Template](./images/blazor-querybuilder-column-template.png) +![Blazor Query Builder with a column template](./images/blazor-querybuilder-column-template.png) ## Header Template -Header Template allows to define our own widgets for group header. Customize the AND/OR/NOT operators and add rules/groups buttons. Use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_HeaderTemplate) property to define templates. +A header template customizes the group header area, including the AND/OR operators and the Add Rule/Add Group actions. Define the template with the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_HeaderTemplate) property. -In the following sample, the SFDropDownList component is used as the custom components for AND/OR operators and customized SfButtons for add rules and add groups button. +In the following sample, the DropDownList is used to switch the group condition (AND/OR), and buttons are used to add or delete groups and add conditions. ```cshtml @@ -361,6 +361,6 @@ In the following sample, the SFDropDownList component is used as the custom comp ``` -![Blazor QueryBuilder with Header Template](./images/blazor-querybuilder-header-template.png) +![Blazor Query Builder with a header template](./images/blazor-querybuilder-header-template.png) -N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file +N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder. \ No newline at end of file diff --git a/blazor/radio-button/accessibility.md b/blazor/radio-button/accessibility.md index 597679da9a..9d81b3824c 100644 --- a/blazor/radio-button/accessibility.md +++ b/blazor/radio-button/accessibility.md @@ -9,7 +9,7 @@ documentation: ug # Accessibility in Blazor RadioButton component -The Blazor RadioButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor RadioButton component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also adheres to applicable [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) used to evaluate accessibility. The accessibility compliance for the Blazor RadioButton component is outlined below. @@ -46,16 +46,16 @@ The Blazor RadioButton component followed the [WAI-ARIA](https://www.w3.org/WAI/ ## Keyboard interaction -The Blazor RadioButton component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor RadioButton component. +The Blazor RadioButton component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, supporting users of assistive technologies and keyboard-only navigation. The following keyboard shortcuts are supported: | Windows | Mac | Actions | | --- | --- | --- | -| ↑ or ← | ↑ or ← | Move and select the previous options. | -| ↓ or → | ↓ or → | Move and select the next options. | +| ↑ or ← | ↑ or ← | Move focus to and select the previous option. | +| ↓ or → | ↓ or → | Move focus to and select the next option. | ## Ensuring accessibility -The Blazor RadioButton component component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor RadioButton component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. The accessibility compliance of the Blazor RadioButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/radio-button) in a new window to evaluate the accessibility of the Blazor RadioButton component with accessibility tools. diff --git a/blazor/radio-button/getting-started-webapp.md b/blazor/radio-button/getting-started-webapp.md index a94fe8826e..04a0e5e955 100644 --- a/blazor/radio-button/getting-started-webapp.md +++ b/blazor/radio-button/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor RadioButton Component in Blazor Web App -This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor RadioButton](https:// ## 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) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App. For WebAssembly or Auto render modes, actions typically apply to the Client project; for Server render mode, actions apply to the Server app. ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor RadioButton** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor RadioButton** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) 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 use `WebAssembly` or `Auto` render modes in the Blazor Web App, install the Syncfusion® Blazor NuGet packages in the Client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -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). +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). -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](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) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +Use `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages. {% tabs %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -102,10 +102,10 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the Client project. | +| Server | Open **~/Components/_Imports.razor** from the Server project. | -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` 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. +If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client) of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,7 +175,7 @@ var app = builder.Build(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in **~/Components/App.razor** as shown: ```html @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Also see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include scripts used by components via JavaScript interop. ## Add Syncfusion® Blazor RadioButton component -Add the Syncfusion® Blazor RadioButton 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 RadioButton component in a **~Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor RadioButton comp | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -226,7 +226,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor RadioButton component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor RadioButton component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} @@ -238,4 +238,4 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button. +N> Explore the [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that that shows how to render and configure the Radio Button. diff --git a/blazor/radio-button/getting-started.md b/blazor/radio-button/getting-started.md index 782c63b96b..955173bcde 100644 --- a/blazor/radio-button/getting-started.md +++ b/blazor/radio-button/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor RadioButton Component -This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Radio Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton) sample. +To get started quickly with the RadioButton component in Blazor, watch the following video or explore the RadioButton getting-started sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton). {% youtube "youtube:https://www.youtube.com/watch?v=a6HR1QGAvLo"%} @@ -28,11 +28,11 @@ To get start quickly with Radio Button Component using Blazor, you can check on ## 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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +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&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App -To add **Blazor RadioButton** 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor RadioButton** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -55,9 +55,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly 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). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -73,8 +73,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Buttons and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore packages. {% tabs %} @@ -88,7 +88,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -96,7 +96,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor service in **~/Program.cs** of the Blazor WebAssembly app. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -131,7 +131,7 @@ await builder.Build().RunAsync(); ## Add stylesheet -The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the **~/index.html** file. +The theme stylesheet is provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of **~/index.html**. ```html @@ -140,11 +140,11 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http ``` -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. +N> Review [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Ensure the theme stylesheet is loaded before any custom styles. ## Add Blazor RadioButton component -Add the Syncfusion® Blazor RadioButton component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor RadioButton component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -159,7 +159,7 @@ Add the Syncfusion® Blazor RadioButton comp {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor RadioButton component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor RadioButton component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} @@ -169,4 +169,4 @@ Add the Syncfusion® Blazor RadioButton comp * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button. +N> Explore the [Blazor Radio Button example](https://blazor.syncfusion.com/demos/buttons/radio-button) that demonstrates rendering and configuration of the Radio Button. \ No newline at end of file diff --git a/blazor/radio-button/how-to/customize-radiobutton-appearance.md b/blazor/radio-button/how-to/customize-radiobutton-appearance.md index f1e13b42d2..895250a160 100644 --- a/blazor/radio-button/how-to/customize-radiobutton-appearance.md +++ b/blazor/radio-button/how-to/customize-radiobutton-appearance.md @@ -9,9 +9,9 @@ documentation: ug # Customize Blazor RadioButton Appearance -The appearance of the Radio Button component can be customized by using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property. +Customize the appearance of the RadioButton component by applying custom CSS rules and assigning a CSS class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property. -The background and border color of the Radio Button is customized through the custom classes to create the primary, success, info, warning, and danger type of Radio Button. +The background and border color of the radio button can be customized using custom classes to create primary, success, info, warning, and danger variants. ```cshtml @using Syncfusion.Blazor.Buttons diff --git a/blazor/radio-button/how-to/radio-button-model-binding.md b/blazor/radio-button/how-to/radio-button-model-binding.md index 8c63c41e63..2b2c9c5fac 100644 --- a/blazor/radio-button/how-to/radio-button-model-binding.md +++ b/blazor/radio-button/how-to/radio-button-model-binding.md @@ -9,14 +9,14 @@ documentation: ug # Radio Button Model Binding in Blazor RadioButton Component -To get start quickly with Model Binding in Blazor RadioButton Component, you can check on this video: +To get started quickly with model binding in the Blazor RadioButton component, watch the following video: {% youtube "youtube:https://www.youtube.com/watch?v=4vMuReo0Hz4"%} -This section demonstrates the strongly typed extension support in Radio Button. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render the component. +This section demonstrates strongly typed view support with the RadioButton component. A strongly typed view binds to a model class, allowing access to its properties and rendering the component based on that data. In this example, the component is placed inside an EditForm and uses DataAnnotationsValidator for validation. The Name property groups the radio buttons so only one option can be selected, and @bind-Checked binds the model property to the selected Value. -In this sample, first check the male value and click the submit button to post the selected value in the Radio Button. When female value is checked, validation error message will be shown below the Radio Button. +In this sample, selecting Female triggers a validation error message below the radio button group because the Range attribute is configured to allow only the value "male". This demonstrates how validation rules on the model control the allowed selection and display validation feedback. ```cshtml diff --git a/blazor/radio-button/how-to/right-to-left.md b/blazor/radio-button/how-to/right-to-left.md index 11979e0f94..937a8d8d83 100644 --- a/blazor/radio-button/how-to/right-to-left.md +++ b/blazor/radio-button/how-to/right-to-left.md @@ -9,9 +9,9 @@ documentation: ug # Right-To-Left in Blazor RadioButton Component -Radio Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`. +The RadioButton component supports right-to-left (RTL) layout, Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`. -The following example illustrates how to enable right-to-left support in Radio Button component. +The following example illustrates enabling right-to-left support in the RadioButton component. RTL can also be configured globally for all Syncfusion components during service registration. ```cshtml @using Syncfusion.Blazor.Buttons @@ -24,4 +24,4 @@ The following example illustrates how to enable right-to-left support in Radio B ``` -![RIght to Left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png) \ No newline at end of file +![Right to left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png) \ No newline at end of file diff --git a/blazor/radio-button/how-to/set-the-disabled-state.md b/blazor/radio-button/how-to/set-the-disabled-state.md index b63a1d3730..7ee01389b8 100644 --- a/blazor/radio-button/how-to/set-the-disabled-state.md +++ b/blazor/radio-button/how-to/set-the-disabled-state.md @@ -9,7 +9,7 @@ documentation: ug # Set the disabled state in Blazor RadioButton Component -Radio Button component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`. +The RadioButton component can be enabled/disabled by setting [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -24,4 +24,4 @@ Radio Button component can be enabled/disabled by giving [Disabled](https://help ``` -![Blazor RadioButton in Disable State](./../images/blazor-radiobutton-disable-state.png) \ No newline at end of file +![Blazor RadioButton in disabled state](./../images/blazor-radiobutton-disable-state.png) \ No newline at end of file diff --git a/blazor/radio-button/label-and-size.md b/blazor/radio-button/label-and-size.md index 3ca96b60c2..10832f3870 100644 --- a/blazor/radio-button/label-and-size.md +++ b/blazor/radio-button/label-and-size.md @@ -9,11 +9,11 @@ documentation: ug # Label and Size in Blazor RadioButton Component -This section explains the different sizes and labels. +This section explains how to configure labels and sizes for the RadioButton component. ## Label -Radio Button caption can be defined by using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_Label) property. This reduces the manual addition of label for Radio Button. You can customize the label position before or after the Radio Button through the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_LabelPosition) property. +Define the RadioButton caption using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_Label) property to automatically render an associated label element, improving accessibility and click/tap targets. Control where the label appears with the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_LabelPosition) property (before or after the radio button). When multiple radio buttons share the same Name value, they form a group that allows only one selection. ```cshtml @using Syncfusion.Blazor.Buttons @@ -27,11 +27,11 @@ Radio Button caption can be defined by using the [Label](https://help.syncfusion ``` -![Blazor RadioButton with Label](./images/blazor-radiobutton-label.png) +![Blazor RadioButton with label](./images/blazor-radiobutton-label.png) ## Size -The different Radio Button sizes available are default and small. To reduce the size of the default Radio Button to small, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property to `e-small`. +RadioButton supports two sizes: default and small. To render the small size, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property to`e-small`. ```cshtml @using Syncfusion.Blazor.Buttons @@ -45,7 +45,7 @@ The different Radio Button sizes available are default and small. To reduce the ``` -![Blazor RadioButton with Different Size](./images/blazor-radiobutton-different-size.png) +![Blazor RadioButton with different size](./images/blazor-radiobutton-different-size.png) ## See Also diff --git a/blazor/radio-button/native-event.md b/blazor/radio-button/native-event.md index 04d573f1a0..8b6f799016 100644 --- a/blazor/radio-button/native-event.md +++ b/blazor/radio-button/native-event.md @@ -9,7 +9,7 @@ documentation: ug # Native Events in Blazor RadioButton Component -You can define the native event using on `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments. +Attach native DOM events to the RadioButton component using the @on{event} attribute (for example, @onchange, @onclick). The attribute value is an event handler method, and the event-specific data is provided via the event argument parameter. The different event argument types for each event are, @@ -20,16 +20,16 @@ The different event argument types for each event are, ## List of Native events supported -The following native event support have been provided to the Radio Button component: +The following native event support has been provided to the RadioButton component: -| List of Native events | | | | | +| List of native events | | | | | | --- | --- | --- | --- | --- | | onchange | oninput | onblur | onfocus | onfocusout | -|onfocusin|onclick|onkeydown|onkeyup|onkeypress | +| onfocusin | onclick | onkeydown | onkeyup | onkeypress | ## How to bind onchange event to Radio Button -The `onchange` attribute is used to bind the onchange event for Radio Button. Here, we have explained about the sample code snippets of Radio Button. +Use the `onchange` attribute to bind the change event for a radio button. The following example shows how to access the event arguments in the handler. ```cshtml @using Syncfusion.Blazor.Buttons @@ -48,4 +48,4 @@ The `onchange` attribute is used to bind the onchange event for Radio Button. He ``` -![Blazor RadioButton with Native Event](./images/blazor-radiobutton-native-event.png) +![Blazor RadioButton with Native Event](./images/blazor-radiobutton-native-event.png) \ No newline at end of file diff --git a/blazor/radio-button/style-and-appearance.md b/blazor/radio-button/style-and-appearance.md index a5f2f15042..0f8bffd1bd 100644 --- a/blazor/radio-button/style-and-appearance.md +++ b/blazor/radio-button/style-and-appearance.md @@ -9,7 +9,7 @@ documentation: ug # Styles and Appearances in Blazor RadioButton Component -To modify the RadioButton appearance, you need to override the default CSS of RadioButton component. Find the list of CSS classes and its corresponding section in RadioButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). +To modify the RadioButton appearance, override the component’s default CSS. The following table lists common CSS selectors and their purposes within the RadioButton. Ensure custom CSS is loaded after the Syncfusion theme so overrides take effect. A custom theme for all controls can also be created using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). | CSS Class | Purpose of Class | | ----- | ----- |