From 0df18c5efd9819d1a71dd2f51c7d94492294c7bb Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 22 Oct 2025 15:18:46 +0530 Subject: [PATCH 1/4] Updated the Blazor common UG documentation --- blazor/browser-support.md | 18 ++-- blazor/common/accessibility.md | 42 ++++---- blazor/common/adding-script-references.md | 44 ++++----- blazor/common/animation.md | 22 ++--- blazor/common/custom-resource-generator.md | 70 +++++++------- blazor/common/globalization.md | 33 +++---- blazor/common/how-to/version-compatibility.md | 38 ++++---- blazor/common/html-attributes.md | 22 ++--- blazor/common/input-validation.md | 60 ++++++------ blazor/common/localization.md | 95 +++++++++---------- blazor/common/right-to-left.md | 28 +++--- blazor/common/state-persistance.md | 10 +- blazor/introduction.md | 44 +++++---- blazor/nuget-packages.md | 8 +- 14 files changed, 266 insertions(+), 268 deletions(-) diff --git a/blazor/browser-support.md b/blazor/browser-support.md index c2663fa38a..82ad1e3171 100644 --- a/blazor/browser-support.md +++ b/blazor/browser-support.md @@ -1,18 +1,20 @@ --- layout: post -title: Browser Compatibility in Blazor - Syncfusion -description: Check out and learn here all about browser compatibility of syncfusion blazor components and much more. +title: Browser support for Syncfusion Blazor +description: Supported browsers for Syncfusion Blazor components on Windows, Linux, and macOS for Blazor Server, Web App, and WebAssembly. platform: Blazor -component: Common +control: Common documentation: ug --- # Browser Compatibility in Blazor -Syncfusion® Blazor UI components are supported by all modern web browsers on both desktop and mobile devices running Windows, Linux, or MacOS. +Syncfusion® Blazor UI components are supported by modern web browsers on desktop and mobile devices running Windows, Linux, or macOS. ## Blazor Web App +All modern browsers listed are supported on their latest stable versions. + | Browser | Versions | |--------------|---------------| | Google Chrome, including Android & iOS | Latest Version | @@ -22,6 +24,8 @@ Syncfusion® Blazor UI components are suppor ## Blazor WebAssembly +All modern browsers listed are supported on their latest stable versions. + | Browser | Versions | |--------------|---------------| | Google Chrome, including Android & iOS | Latest Version | @@ -32,6 +36,8 @@ Syncfusion® Blazor UI components are suppor ## Blazor Server Side +All modern browsers listed are supported on their latest stable versions. + | Browser | Versions | |--------------|---------------| | Google Chrome, including Android & iOS | Latest Version | @@ -40,8 +46,6 @@ Syncfusion® Blazor UI components are suppor | Apple Safari, including iOS | Latest Version | | Microsoft Internet Explorer | 11 | -N> Blazor Server supports Microsoft Internet Explorer 11 with sufficient polyfills when using [.NET Core 3.1 / lower versions](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-3.1). Refer this [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie) to add the polyfills in Blazor server application. - ## See Also -* [ASP.NET Core Blazor supported platforms](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-7.0) +* [ASP.NET Core Blazor supported platforms](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms) diff --git a/blazor/common/accessibility.md b/blazor/common/accessibility.md index db37eb65d0..142794da62 100644 --- a/blazor/common/accessibility.md +++ b/blazor/common/accessibility.md @@ -1,63 +1,63 @@ --- layout: post -title: Accessibility with ADA compliance in Syncfusion Blazor components -description: The Syncfusion Blazor UI components are compliant with section 508, ADA, WAI-ARIA, WCAG, and keyboard accessibility standards. +title: Accessibility in Syncfusion Blazor components +description: Syncfusion Blazor components support WCAG 2.2, Section 508, WAI-ARIA, ADA, and keyboard accessibility standards. platform: Blazor -component: Common +control: Common documentation: ug --- -# Accessibility with ADA Compliance in Blazor Components +# Accessibility in Syncfusion® Blazor components -All the Syncfusion® Blazor components follow the WAI-ARIA accessibility standard by default. This enables you to build accessible web applications, which are fully navigable by users with disabilities. +All Syncfusion® Blazor components follow WAI-ARIA by default, enabling accessible web applications that are fully navigable with assistive technologies. ## Accessibility overview -Accessibility in components refers to the practice of designing and building user interface elements in a way that makes them accessible to users with disabilities. This can include a variety of things, such as making sure that text is high-contrast and easy to read, providing alternative text for images, and designing controls and interactions that can be used with a keyboard or assistive technology. +Accessibility in components refers to designing and building user interface elements so that users with disabilities can perceive, operate, and understand them. Examples include sufficient color contrast, alternative text for images, and keyboard-operable controls and interactions. ## Accessibility standards -The component is said to be accessible when it is constructed in accordance with certain standards that are required to make it accessible. +A component is accessible when it is implemented in accordance with recognized accessibility standards. The accessibility of the components consists of the following standards and aspects: [ADA](https://www.ada.gov/) - A law to ensure that people with disabilities have the same opportunities and access as people without disabilities. -[WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/) - The Web Content Accessibility Guidelines (WCAG) provide guidelines developed by the World Wide Web Consortium (W3C) to ensure web content is accessible to people with disabilities. WCAG 2.2 establishes a framework of accessibility principles and their associated success criteria. The level of accessibility conformance achieved by a web application is determined by the extent to which it meets these success criteria, categorized into three levels: A, AA, and AAA. +[WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/) - Guidelines from the W3C to ensure web content is accessible to people with disabilities, organized by success criteria at levels A, AA, and AAA. -[Section 508](https://www.section508.gov/) - It is a set of guidelines for making electronic and information technology (EIT) accessible to people with disabilities. These standards apply to federal agencies in the United States, and they are based on the Web Content Accessibility Guidelines (WCAG). +[Section 508](https://www.section508.gov/) - U.S. federal standards for making electronic and information technology accessible, aligned with WCAG. -[WAI-ARIA](https://www.w3.org/WAI/ARIA/) - WAI-ARIA stands for “Web Accessibility Initiative - Accessible Rich Internet Applications.” It is a set of technical specifications and guidelines developed by the World Wide Web Consortium (W3C) as part of the Web Accessibility Initiative (WAI). WAI-ARIA is designed to enhance the accessibility of dynamic web content, particularly web applications and rich internet applications (RIAs), for people with disabilities. WAI-ARIA provides a set of roles, states, and properties that can be added to HTML elements to provide additional context and information about the purpose and behavior of those elements. This can help assistive technologies better understand and interpret web content and interact with web applications. +[WAI-ARIA](https://www.w3.org/WAI/ARIA/) - Roles, states, and properties that enhance accessibility of dynamic web content and applications for assistive technologies. -[Keyboard navigation](https://www.w3.org/TR/WCAG22/#keyboard-accessible) - It refers to the ability to use a keyboard to interact with and navigate through a user interface. It is an important aspect of web accessibility, as it allows people who cannot use a mouse or other pointing device to access and use web content and applications. +[Keyboard navigation](https://www.w3.org/TR/WCAG22/#keyboard-accessible) - The ability to use a keyboard to interact with and navigate a user interface. Syncfusion® Blazor components adhere to these established standards. ## Accessibility compliance -The accessibility support provided by Syncfusion® Blazor components is based on a collection of methodologies for adhering to and [applying recognized standards and technical specifications](#accessibility-standards) to ensure an intuitive experience for people with disabilities. +Accessibility support in Syncfusion® Blazor components is based on adhering to and [applying recognized standards and technical specifications](#accessibility-standards) to ensure an intuitive experience for people with disabilities. There are several methodologies of accessibility validation that can be performed on the Syncfusion® Blazor components, such as: The [WAI-ARIA patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) are followed by the Syncfusion® Blazor components to enable appreciable accessibility. -Each Blazor component is subjected to manual testing with a screen reader and also automated test cases to ensure the component’s required attributes. +Each Blazor component is evaluated with manual screen reader testing and automated tests to ensure required attributes and behaviors are present. -Attributes are allocated and updated correctly during interaction as well. Each component has been assigned a distinct `Role` attribute and its own set of ARIA attributes defined by the [WCAG 2.2](https://www.w3.org/TR/WCAG22/) specification. +Attributes are assigned and updated correctly during interaction. Each component has an appropriate `role` and ARIA attributes defined by the [WCAG 2.2](https://www.w3.org/TR/WCAG22/) specification. In addition to the methodologies mentioned above, Syncfusion® Blazor components are constructed to support the following accessibility aspects. ### Screen reader support -A screen reader allows people who are blind or visually impaired to use a computer by reading aloud the text that is displayed on the screen. Syncfusion® Blazor components followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/) standards to work properly in the screen readers such as [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) for Windows and [Embedded VoiceOver](https://support.apple.com/en-in/guide/voiceover/vo2706/mac) for MAC. +Syncfusion® Blazor components follow [WAI-ARIA](https://www.w3.org/WAI/ARIA/) to work properly with screen readers such as [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) for Windows and [VoiceOver](https://support.apple.com/guide/voiceover/vo2706/mac) for macOS. -### Right-To-Left support +### Right-to-left support Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc. Syncfusion® Blazor components support the Right-to-Left feature. Refer to the [Right-to-Left documentation](https://blazor.syncfusion.com/documentation/common/right-to-left) to learn more about this support. ### Color contrast -Syncfusion® Blazor components come equipped with [predefined themes](https://blazor.syncfusion.com/documentation/appearance/themes) that guarantee the presence of satisfactory color contrast, benefiting individuals with visual impairments. +Syncfusion® Blazor components include [predefined themes](https://blazor.syncfusion.com/documentation/appearance/themes) that provide sufficient color contrast to benefit users with visual impairments. ### Mobile device support @@ -71,15 +71,15 @@ Syncfusion® Blazor components support keybo Ensuring the accessibility of Syncfusion® Blazor components is crucial for making the product inclusive and user-friendly for individuals with disabilities. This process involves various types of accessibility testing, including: -* **Automated testing**: The Syncfusion® Blazor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +* **Automated testing**: Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -* **Manual testing**: This type of testing involves manually evaluating the Syncfusion® Blazor components. During manual accessibility testing, testers will ensure accessibility using the screen readers such as [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) for Windows and [Embedded VoiceOver](https://support.apple.com/en-in/guide/voiceover/vo2706/mac) for MAC. +* **Manual testing**: Manual evaluation using screen readers such as [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) for Windows and [VoiceOver](https://support.apple.com/guide/voiceover/vo2706/mac) for macOS. -Syncfusion® Blazor components will keep improving when there is anything required. It also involves client feedback to make the component more accessible. +Syncfusion® Blazor components continually improve based on standards updates and user feedback to enhance accessibility. ## Accessibility support for specific components -Consult the component-specific documents below for detailed information about how Syncfusion® Blazor components ensure compliance with accessibility standards, encompassing Section 508, WAI-ARIA, WCAG 2.2, keyboard navigation, and more. +Consult the component-specific documents below for details on how Syncfusion® Blazor components ensure compliance with accessibility standards, including Section 508, WAI-ARIA, WCAG 2.2, keyboard navigation, and more. The table uses the legend shown below. diff --git a/blazor/common/adding-script-references.md b/blazor/common/adding-script-references.md index 4cba176501..891eaa5162 100644 --- a/blazor/common/adding-script-references.md +++ b/blazor/common/adding-script-references.md @@ -1,26 +1,26 @@ --- layout: post -title: Adding script references in Blazor - Syncfusion -description: Learn here about that how to add the script references manually in the Syncfusion Blazor Components. +title: Reference script files for Syncfusion Blazor +description: Add Syncfusion Blazor script references via CDN, static web assets, or the Custom Resource Generator (CRG). platform: Blazor -component: Common +control: Common documentation: ug --- -# Reference scripts in Blazor Application +# Reference scripts in Blazor applications -This section provides information about the script isolation process and how to reference scripts from CDN, Static Web Assets and Custom resource generator (CRG) for Syncfusion® Blazor Components. +This page explains script isolation and how to reference Syncfusion® Blazor scripts from the CDN, static web assets, and the Custom Resource Generator (CRG). -N> The javascript interop files needs to be added to support the features that can't be implemented in native blazor. +N> JavaScript interop files are required for features that cannot be implemented natively in Blazor. -## CDN Reference +## CDN reference -You can refer the Syncfusion® Blazor scripts through the CDN resources. +You can refer the Syncfusion® Blazor scripts using the CDN resources. -* For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference scripts in `~/Components/App.razor` file. -* For **Blazor WASM Standalone App**, reference scripts in `~/wwwroot/index.html` file. +* For **.NET 8 and .NET 9** Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in `~/Components/App.razor`. +* For a **Blazor WebAssembly (standalone) App**, add scripts in `~/wwwroot/index.html`. -Syncfusion® Blazor components are available in CDN for each version. Make sure that the version in the URLs matches the version of the Syncfusion® Blazor Package you are using . +Syncfusion® Blazor components are available on the CDN per version. Ensure the version in the URLs matches the NuGet package version used in the application.
@@ -103,7 +103,7 @@ If you are using `PDF Viewer (Classic)`,`PDF Viewer`, `Smart PDF Viewer` or `Doc ``` -In addition to above, Syncfusion® Blazor components provides latest scripts in CDN without versioning. You can use this in development environment if you want to always use the latest version of scripts. It is not recommended to use this in production environment. +Additionally, Syncfusion® Blazor components provides latest scripts in CDN without versioning. You can use this in development environment if you want to always use the latest version of scripts. It is not recommended to use this in production environment. | Component | CDN Script Reference | | --- | --- | @@ -120,17 +120,17 @@ N> To add custom Smart PDF Viewer script file in your application, refer [How to ## Static web assets -You can refer the Syncfusion® Blazor scripts through the NuGet package's static web assets. +You can refer the Syncfusion® Blazor scripts from NuGet packages using static web assets. ### Enable static web assets usage -To use static web assets, ensure [UseStaticFiles](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles?view=aspnetcore-8.0) method in the **~/Program.cs** file of your app. +To use static web assets, call [UseStaticFiles](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.staticfileextensions.usestaticfiles?view=aspnetcore-9.0) in the app's **~/Program.cs** file. -N> For **Blazor Web App with interaction mode as Auto & Blazor WASM App**, call `UseStaticFiles` method in **Server project**. +N> For a **Blazor Web App** (interaction mode: Auto) and **Blazor WebAssembly App**, call `UseStaticFiles` in the **Server** project. -### Refer script from static web assets +### Reference scripts from static web assets -* The combined scripts available in [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core/) package. To refer script from static web assets, use the code below. +* Combined scripts are available in the [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core/) package. To refer the script from static web assets, use the code below. ```html @@ -139,7 +139,7 @@ N> For **Blazor Web App with interaction mode as Auto & Blazor WASM App**, call ``` -* If you're using the PDF viewer (Classic), PDF Viewer, Smart PDF Viewer or Document Editor component, use the code below to refer to script from static web assets. +* If using the **PDF Viewer (Classic)**, **PDF Viewer**, **Smart PDF Viewer**, or **Document Editor** components, use the code below to reference scripts from static web assets. ```html @@ -151,9 +151,9 @@ N> For **Blazor Web App with interaction mode as Auto & Blazor WASM App**, call ``` - N> The PDF Viewer and Document Editor component scripts are available in static web assets from 19.3.* version. + N> The PDF Viewer and Document Editor component scripts are available in static web assets starting from version 19.3.*. -## Individual control script reference +## Individual component script references Syncfusion® Blazor components provides component-wise scripts which can be referenced externally in application. If you are using minimal components, then you can import the selected components scripts via CDN or Static web assets directly without using [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) instead of referencing single script with all components. @@ -196,7 +196,7 @@ You can add a component script reference in one of the following ways based on u
-The following table lists components and its script reference. +The following table lists components and their script file names. @@ -463,7 +463,7 @@ The following table lists components and its script reference. ## Custom Resource Generator -The Syncfusion® Blazor provides an option to generate a component's interop scripts using the [Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) tool for the Blazor components. Refer [here to generate the component-wise scripts externally using CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). +Syncfusion® Blazor provides an option to generate component interop scripts using the [Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) tool. Learn how to [generate component-wise scripts using CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). ## See also diff --git a/blazor/common/animation.md b/blazor/common/animation.md index 5a1a880e44..163657f585 100644 --- a/blazor/common/animation.md +++ b/blazor/common/animation.md @@ -1,25 +1,25 @@ --- layout: post -title: Animation in Blazor Components | Syncfusion -description: Checkout and learn here all about enable or disable animation globally for Syncfusion Blazor Components. +title: Animation in Blazor components | Syncfusion +description: Learn how to enable or disable animations globally for Syncfusion Blazor components using GlobalOptions.Animation in Program.cs. platform: Blazor -component: Common +control: Common documentation: ug --- -# Animation in Blazor Components +# Animation in Blazor components -This section provides information about the animation process and how to enable/disable it globally for Syncfusion® Blazor Components. +This section explains how to enable or disable animations globally for Syncfusion® Blazor components. Global animation settings apply app-wide and can override individual component animation settings. ## Enable or disable animation globally -You can enable or disable animation for all Syncfusion® Blazor Component's globally by setting [GlobalOptions.Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_Animation) property while registering the [Syncfusion® Blazor service](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SyncfusionBlazor.html#Syncfusion_Blazor_SyncfusionBlazor_AddSyncfusionBlazor_Microsoft_Extensions_DependencyInjection_IServiceCollection_System_Action_Syncfusion_Blazor_GlobalOptions__), with one of below options, +Enable or disable animations for all Syncfusion® Blazor components by setting the [GlobalOptions.Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_Animation) property when registering the [Syncfusion® Blazor service](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SyncfusionBlazor.html#Syncfusion_Blazor_SyncfusionBlazor_AddSyncfusionBlazor_Microsoft_Extensions_DependencyInjection_IServiceCollection_System_Action_Syncfusion_Blazor_GlobalOptions__). Use one of the following modes: -* Enable - Enables the animation for all components regardless of individual component's animation settings. -* Disable - Disables the animation for all components regardless of individual component's animation settings. -* Default - Animation is enabled or disabled based on component's animation settings. +* Enable: Enables the animation for all components, overriding individual component animation settings. +* Disable: Disables the animations for all components, overriding individual component animation settings. +* Default: Animation is enabled or disabled based on component's animation settings. -In the below code example animation is disabled. +The following example disables animations globally. {% tabs %} @@ -34,4 +34,4 @@ builder.Services.AddSyncfusionBlazor(options => { options.Animation = GlobalAnim {% endtabs %} -N> [GlobalOptions.Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_Animation) property controls script level animations only and it is not applicable for direct CSS level animations (Animation defined from CSSs classes/properties). +N> The [GlobalOptions.Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_Animation) property controls script level animations only. It does not affect pure CSS animations defined by CSS classes or properties. diff --git a/blazor/common/custom-resource-generator.md b/blazor/common/custom-resource-generator.md index 35b111b4e9..6f0725c34b 100644 --- a/blazor/common/custom-resource-generator.md +++ b/blazor/common/custom-resource-generator.md @@ -1,54 +1,54 @@ --- layout: post -title: Custom Resource Generator (CRG) in Blazor | Syncfusion -description: Learn here about that how to using the custom resource generator in the Syncfusion Blazor Components +title: Custom Resource Generator (CRG) for Syncfusion Blazor +description: Generate custom Syncfusion Blazor script and style bundles with CRG to optimize load time and include only required components. platform: Blazor -component: Common +control: Common documentation: ug --- # Custom Resource Generator -Syncfusion® provides an option to generate a component's interop script and styles using the [Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) web tool for Blazor components from v19.2.0.44. This tool empowers users by generating precise interop scripts and styles specifically for their components. By leveraging the CRG, you can optimize loading times and enhance responsiveness compared to loading overall script and style resources. +Syncfusion® provides the [Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) web tool to generate component-specific interop scripts and styles for Blazor. Using CRG reduces bundle size and improves load performance by including only the required resources instead of the full library. -![Custom resource generator preview for Blazor](images/custom-resource-generator-preview.png) +![CRG preview showing component and theme selection](images/custom-resource-generator-preview.png) ## Search and select the component list -Search and select the required Syncfusion® Blazor UI components from the CRG to generate a specific set of component resources. +Select the required Syncfusion® Blazor components in CRG to generate a specific set of resources. -Refer to the following steps to search and select the components in CRG: +Follow these steps to choose components in CRG: -1. Open [Syncfusion® Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) application. -2. Type the required component name in the search bar, and then select the checkbox. The dependency of the selected component is resolved in the application itself, so you do not need to choose each dependent component manually. -![Search and select Syncfusion Blazor UI components](images/search-non-injectable.png) -3. Select the required built-in themes from the **Select Themes** option. This provides an option to select more than one theme. -![Select the built-in themes in Blazor](images/select-inbuilt-themes.png) +1. Open the [Syncfusion® Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) app. +2. Type the component name in the search box, then select its checkbox. CRG automatically resolves dependencies; manual selection of dependent components is not required. +![CRG search with component selection](images/search-non-injectable.png) +3. Select one or more built-in themes from **Select Themes**. +![Theme selection options in CRG](images/select-inbuilt-themes.png) ## Download the selected component resources -After selecting the required component resources, download the custom interop script and styles from CRG. +After selecting the required components, download the custom interop script and styles from CRG. -Refer to the following steps to download the custom resources in CRG: +Follow these steps to download the custom resources: -1. Once components are selected, select the **Minified** option to generate the minified file output for production. Then Click the **DOWNLOAD** button. -![Download option in Blazor](images/download-option.png) -2. Change the file name as needed. After that, enter an valid email address and then click **GENERATE** button in the pop-up. -![Export popup for generation custom resources](images/export-popup.png) -3. Now, the export request has been initiated for the selected component(s). You will receive an email with a download link within a minute( Depending on the selected component counts and bundle type minified or unminified ). -![Blazor Bundle custom resources](images/mail-with-download-link.png) -4. The final output contains the custom interop script and styles for the selected components and an **import.json** file, which stores the current settings. +1. Select the **Minified** option to generate the minified file output for production, then click **DOWNLOAD**. +![CRG download options](images/download-option.png) +2. Rename the file if needed, enter a valid email address, and click **GENERATE** in the pop-up. +![CRG export pop-up for generating resources](images/export-popup.png) +3. The export request starts for the selected components. An email with a download link will arrive shortly (timing depends on the number of components and bundle type minified or unminified). +![Email with download link to the custom bundle](images/mail-with-download-link.png) +4. The output includes the custom interop script, styles, and an **import.json** file that stores the current settings. - ![Final output of customized resources in Blazor](images/customized-resources.png) + ![Example of downloaded custom scripts and styles](images/customized-resources.png) -N> When you download the resources of Material and Tailwind themes, either separately or with other themes, you will find a 'styles' folder that contains CSS files along with a 'customized' folder. The CSS files within the 'customized' folder do not include the online Google font dependencies associated with the Material and Tailwind themes. For more details, please refer to [this](https://blazor.syncfusion.com/documentation/appearance/themes#render-syncfusion-components-in-offline-with-material-and-tailwind-themes) resource. +N> When downloading Material or Tailwind themes (alone or with other themes), the package includes a 'styles' folder with CSS files and a 'customized' folder. The CSS files within the 'customized' folder do not include the online Google font dependencies associated with the Material and Tailwind themes. See [themes documentation](https://blazor.syncfusion.com/documentation/appearance/themes#render-syncfusion-components-in-offline-with-material-and-tailwind-themes) for details. ## How to use custom resources in the Blazor application -1. Copy and paste the downloaded custom resources in the Blazor application `~/wwwroot` folder. -2. Now, manually add the custom interop script and styles in the Blazor App. - * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference custom interop script in `~/Components/App.razor` file. - * For **Blazor WASM Standalone App**, reference custom interop script in `~/wwwroot/index.html` file. +1. Copy and paste the downloaded custom resources into the application's `~/wwwroot` folder. +2. Manually add the custom interop script and styles: + * For **.NET 8 and .NET 9** Blazor Web App (any render mode: Server, WebAssembly, or Auto), reference the custom interop script in `~/Components/App.razor` file. + * For a **Blazor WebAssembly (standalone) app**, reference the custom interop script in `~/wwwroot/index.html` file. ```html @@ -58,15 +58,17 @@ N> When you download the resources of Material and Tailwind themes, either separ ``` -3. Run the application and it will load the resources with application required components. +3. Run the application. The resources will load only the required components. + +N> Ensure the generated bundle version matches the installed Syncfusion Blazor NuGet package version. After upgrading packages, regenerate the CRG bundle. For reference on where to place script references, see [Reference script files for Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Import previously generated settings into CRG -To add more components or upgrade the latest Syncfusion® Blazor library resources, it is not necessary to generate from the scratch in the CRG. Just import the old **import.json** file, make the changes, and then download it again from the CRG application. +To add more components or update to the latest Syncfusion® Blazor resources, it is not necessary to start from scratch. Import the existing **import.json**, make changes, and download it again from the CRG application. -Refer to the following steps to import previous settings in CRG: +Follow these steps to import previous settings in CRG: -1. Click the **IMPORT SETTINGS** button at the bottom of the page. -![Import option in CRG](images/import-option.png) -2. Upload the **import.json** file, so that the previously stored data will be restored in the CRG application. Now, add more components and export the resources again. -![blazor Previous changes restored](images/previous-changes-restored.png) +1. Click **IMPORT SETTINGS** at the bottom of the page. +![CRG import settings action](images/import-option.png) +2. Upload the **import.json** file to restore the previous configuration. Add components as needed and export the resources again. +![CRG with previously restored selections](images/previous-changes-restored.png) diff --git a/blazor/common/globalization.md b/blazor/common/globalization.md index 9a10e9eaa5..207a55ae0c 100644 --- a/blazor/common/globalization.md +++ b/blazor/common/globalization.md @@ -1,40 +1,37 @@ --- layout: post title: Globalization in Blazor - Syncfusion -description: Learn here all about how globalization support in Syncfusion Blazor component, it's elements and more. +description: Learn how Syncfusion Blazor components handle globalization for numbers, dates, times, and currencies across cultures in Blazor Web App, WASM, and Server App. platform: Blazor -component: Common +control: Common documentation: ug --- # Globalization in Blazor Application -Globalization is the combination of adapting the control to various languages by parsing and formatting the dates, times, numbers or currencies (`Internationalization (L18N)`) and adding cultural-specific customizations and translating the text (`Localization (L10N)`). +Globalization combines internationalization (i18n)—parsing and formatting dates, times, numbers, and currencies—and localization (l10n)—adding culture-specific customizations and translating UI text. -The Syncfusion® Blazor UI components are specific to the `American English (en-US)` culture by default. It utilizes the `Blazor Internationalization` package to parse and format the number and date objects based on the chosen culture. +The Syncfusion® Blazor UI components use American English (`en-US`) by default. Blazor relies on .NET globalization to parse and format numbers and dates based on the active culture. In Blazor WebAssembly, ensure globalization data is available when using non‑en cultures. -Blazor uses the built-in .NET types from the `System.Globalization` namespace, such as the `CultureInfo` class and its `CurrentCulture` property. +Blazor uses built-in .NET types from the System.Globalization namespace, such as the CultureInfo class and its culture properties. -* Culture ([CultureInfo.CurrentCulture](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.currentculture?view=net-8.0#system-globalization-cultureinfo-currentculture)): Determines the formatting of numbers, dates, and times. It's mainly concerned with how data is presented and interpreted. -* UI Culture ([CultureInfo.CurrentUICulture](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.currentuiculture?view=net-8.0#system-globalization-cultureinfo-currentuiculture)): Determines the language of the user interface, including which resource files (like .resx files) are used for localizing the app’s UI. +* Culture ([CultureInfo.CurrentCulture](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.currentculture?view=net-8.0#system-globalization-cultureinfo-currentculture)): Determines the formatting of numbers, dates, and times. +* UI culture ([CultureInfo.CurrentUICulture](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.currentuiculture?view=net-8.0#system-globalization-cultureinfo-currentuiculture)): Determines the language of the user interface and which .resx resources are used. -When dealing with form fields in Blazor, it’s important to note that certain input types automatically respect the user's culture settings using [CultureInfo.InvariantCulture](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.cultureinfo.invariantculture?view=net-8.0#system-globalization-cultureinfo-invariantculture). - -For example, the following input types are culture-sensitive: +When working with HTML form fields, browser-native input types affect culture behavior: * `date` -* `number` +* `number` Blazor relies on the browser’s handling of these input types, which ensures that the user input is parsed and rendered according to their specific culture settings. -However, some form field types are not yet fully supported across all browsers, making them less reliable in Blazor applications. These include: +Input types are inconsistently supported across browsers and may be less reliable: * `datetime-local` * `month` * `week` - -The following code snippet serves as an example to demonstrate how globalization can be implemented in a Blazor application. It illustrates the process of localizing content, formatting dates and numbers. +The following example shows how globalization affects rendered values by formatting dates and numbers according to the current culture. {% tabs %} {% highlight razor %} @@ -62,11 +59,11 @@ The following code snippet serves as an example to demonstrate how globalization {% endhighlight %} {% endtabs %} -* Suppose, if you want to change any specific culture, then add the corresponding culture resource (`.resx`) file by using the below reference. +* To change any specific culture, add the corresponding `.resx` resource files and configure localization as described in the following article: -[Changing culture and Adding Resx file in the application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application) +[Enable localization and add .resx files in the application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application) ## See also * [ASP.NET Core Blazor globalization and localization](https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-8.0) -* [.NET Fundamentals: Globalization](https://learn.microsoft.com/en-us/dotnet/core/extensions/globalization) -* [.NET Fundamentals: Localization](https://learn.microsoft.com/en-us/dotnet/core/extensions/localization) +* [.NET fundamentals: Globalization](https://learn.microsoft.com/en-us/dotnet/core/extensions/globalization) +* [.NET fundamentals: Localization](https://learn.microsoft.com/en-us/dotnet/core/extensions/localization) diff --git a/blazor/common/how-to/version-compatibility.md b/blazor/common/how-to/version-compatibility.md index 6fca8ad81f..26638346bb 100644 --- a/blazor/common/how-to/version-compatibility.md +++ b/blazor/common/how-to/version-compatibility.md @@ -1,41 +1,37 @@ --- layout: post -title: Syncfusion Blazor Components Compatibility with .NET Versions -description: Learn here all about supported .NET and .NET Core versions by Syncfusion Blazor Components and much more. +title: Version compatibility for Syncfusion Blazor components +description: Supported .NET and .NET Core versions for Syncfusion Blazor components, with minimum package versions and compatibility guidance. platform: Blazor -component: Common +control: Common documentation: ug --- -# Version Compatibility of Syncfusion® Blazor Components +# Version compatibility for Syncfusion® Blazor components -The following table represents the supported .NET and .NET Core versions by different Syncfusion® Blazor components releases. +The following table shows the supported .NET and .NET Core versions for Syncfusion® Blazor component releases. | Version | Syncfusion® Blazor Components Version | | ------------- | ------------- | | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0) | 27.2.2 and above | | [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | 23.1.36 and above | -| [.NET 7.0](https://devblogs.microsoft.com/dotnet/announcing-dotnet-7/) | 20.4.0.38 to 28.2.12 | -| [.NET 6.0](https://devblogs.microsoft.com/dotnet/announcing-asp-net-core-in-net-6/) | 19.3.0.43 to 28.2.12 | -| [.NET 5.0](https://devblogs.microsoft.com/dotnet/announcing-asp-net-core-in-net-5/) | 18.4.0.30 to 20.1.0.61 | -| [.NET Core 3.1.3](https://devblogs.microsoft.com/dotnet/blazor-webassembly-3-2-0-release-candidate-now-available/) | 18.1.0.52 to 20.3.0.61 | -| [.NET Core 3.1.2](https://devblogs.microsoft.com/dotnet/net-core-february-2020/) | 18.1.0.42 to 20.3.0.61 | -| [.NET Core 3.1.1](https://devblogs.microsoft.com/dotnet/net-core-january-2020/) | 17.4.0.46 to 20.3.0.61 | -| [.NET Core 3.1](https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-core-3-1/) | 17.4.0.39 to 20.3.0.61 | +| [.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) | 20.4.0.38 to 28.2.12 | +| [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) | 19.3.0.43 to 28.2.12 | +| [.NET 5.0](https://dotnet.microsoft.com/en-us/download/dotnet/5.0) | 18.4.0.30 to 20.1.0.61 | +| [.NET Core 3.1](https://dotnet.microsoft.com/en-us/download/dotnet/3.1) | 17.4.0.39 to 20.3.0.61 | -## Syncfusion® Version Information +## Syncfusion® versioning -Syncfusion® follows a quarterly release schedule, introducing new volumes every three months. To track these releases and their associated changes, Syncfusion® Blazor components utilize a sequence-based identifier system, employing the format **Major.Minor.Revision**. This system enables developers to easily monitor modifications made in each release. +Syncfusion® follows a quarterly release cadence. Blazor component packages use a semantic-style version format: Major.Minor.Revision. -For example, if the release package version is `23.1.36`, the version number can be interpreted as follows: +Example: for version `31.1.23`: -* **23** represents the `major release` version. This number changes every three months and encompasses significant updates, new features, as well as bug fixes and breaking changes. - -* **1** corresponds to the `minor release` version. This number signifies releases primarily focused on new features and addressing bugs, without introducing breaking changes. - -* **36** denotes the `revision number`, also referred to as the `patch number`. This number increases for weekly patch releases, which predominantly consist of bug fixes and do not introduce new features or breaking changes. +* 31 — major release number; updated quarterly and may include new features and breaking changes. +* 1 — minor release number; adds features and fixes without breaking changes. +* 23 — revision (patch); weekly patches with bug fixes and no breaking changes. ## See also -* [Syncfusion® Product release lifecycle](https://www.syncfusion.com/support/product-lifecycle/estudio) +* [Syncfusion® product release lifecycle](https://www.syncfusion.com/support/product-lifecycle/estudio) * [.NET and .NET Core release lifecycle](https://dotnet.microsoft.com/en-us/platform/support/policy/dotnet-core) +* [System requirements](https://blazor.syncfusion.com/documentation/system-requirements) diff --git a/blazor/common/html-attributes.md b/blazor/common/html-attributes.md index 594c6c9bd9..96f6ded482 100644 --- a/blazor/common/html-attributes.md +++ b/blazor/common/html-attributes.md @@ -1,17 +1,17 @@ --- layout: post -title: HTML Attributes in Blazor - Syncfusion -description: Check out the documentation for HTML Attributes and supported Blazor components with equivalent properties +title: HTML attributes and DOM events in Blazor - Syncfusion +description: Learn how to use standard HTML attributes and DOM events with Syncfusion Blazor components on input and root elements, and see equivalent component APIs. platform: Blazor -component: Common +control: Common documentation: ug --- -# Default HTML Attributes and DOM Events +# Default HTML attributes and DOM events The Syncfusion® Blazor UI components provide the most useful [public API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.html) for component implementation and customization. Apart from this public API, the Syncfusion® Blazor UI components can support the use of default [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) and [DOM events](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-8.0) in the root element of its component. -## Using HTML attributes and DOM events in the input element +## Use HTML attributes and DOM events on input elements The following is a list of Syncfusion® Blazor UI components that use the standard HTML `input` element. You can apply the [HTML input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and DOM events directly to the input element used on these Syncfusion® Blazor components. @@ -30,7 +30,7 @@ The following is a list of Syncfusion® Blaz * [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started) * [SfUpload](https://blazor.syncfusion.com/documentation/file-upload/getting-started) -### Available Syncfusion® properties equivalent to HTML attributes +### Syncfusion® properties equivalent to HTML attributes The following table illustrates the HTML attributes and their equivalent Syncfusion® API. @@ -101,7 +101,7 @@ The following table illustrates the HTML attributes and their equivalent Syncfus - +
minmin Min
    @@ -180,7 +180,7 @@ The following table illustrates the HTML attributes and their equivalent Syncfus
-N> If you specify both HTML attribute and Syncfusion® API in the component, then the Syncfusion® API will get higher priority and will be applied to the DOM element. +N> If both an HTML attribute and a Syncfusion® API are specified, the Syncfusion API takes precedence and is applied to the DOM element. ```cshtml @@ -194,7 +194,7 @@ The textbox will be rendered with the following output. ``` -In some cases, you may need to add HTML attributes to the root/container element of the above input-based components. For this, you can use [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_HtmlAttributes) Syncfusion® API to add HTML attributes to the root/container element. +In some cases, HTML attributes must be added to the root/container element instead of the input. Use the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_HtmlAttributes) API to set attributes on the root/container element. ```cshtml @@ -210,7 +210,7 @@ The textbox will be rendered with the following output. ### Input DOM events -The Syncfusion® Blazor UI component supports binding the native [DOM events](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-8.0) on the input element. +Syncfusion® Blazor components support binding native [DOM events](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling) on input elements. ```cshtml
@@ -237,7 +237,7 @@ The Syncfusion® Blazor UI component support } ``` -## Using HTML attributes and DOM events in the root element +## Use HTML attributes and DOM events on the root element The HTML attributes and DOM events can be applied directly to the component's root element. diff --git a/blazor/common/input-validation.md b/blazor/common/input-validation.md index df80cec15d..3c91e6e5a9 100644 --- a/blazor/common/input-validation.md +++ b/blazor/common/input-validation.md @@ -1,9 +1,9 @@ --- layout: post -title: Input Form Validation in Blazor - Syncfusion -description: Check out the documentation for Input Form Validation using data annotation attributes with supported Blazor component list. +title: Input form validation in Blazor - Syncfusion +description: Learn how to validate Syncfusion Blazor input components using data annotations with EditForm, DataAnnotationsValidator, ValidationMessage, ValidationSummary. platform: Blazor -component: Common +control: Common documentation: ug --- @@ -13,7 +13,7 @@ The Syncfusion® Blazor UI input and editor ## How to validate Syncfusion® Blazor UI components -1. Create a model class and set [DataAnnotation attributes](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-8.0) to its properties. +1. Create a model class and apply [data annotation attributes](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-8.0) to its properties. ```cshtml @using System.ComponentModel.DataAnnotations; @@ -35,7 +35,7 @@ The Syncfusion® Blazor UI input and editor } ``` -2. Add the `EditForm` component in the view page and assign the model object to its `Model` property. Also, declare the `DataAnnotationsValidator` and `ValidationSummary` components inside the `EditForm` component. +2. Add the `EditForm` component to the page and assign the model object to its `Model` property. Include the `DataAnnotationsValidator` and `ValidationSummary` components inside `EditForm`. ```cshtml @@ -44,10 +44,10 @@ The Syncfusion® Blazor UI input and editor ``` - N> [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-8.0) - Attaches validation support to an `EditContext` using data annotations. -
[ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0) - Used to display a summarized list of all validation messages. +N> [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-8.0): Attaches validation support to the `EditContext` using data annotations. +
[ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0): Displays a summarized list of all validation messages. -3. Add any desired [Syncfusion® components](#blazor-form-validation-supported-components) inside the `EditForm` and provide the values through `@bind-` property. +3. Add any desired [Syncfusion® components](#blazor-form-validation-supported-components) inside the `EditForm` and provide values via the appropriate `@bind-` parameter. ```cshtml @@ -65,9 +65,9 @@ The Syncfusion® Blazor UI input and editor ``` - N> Refer to [this table](#blazor-form-validation-supported-components) for the Syncfusion® Blazor components which supports the form validation and its `@bind` property details. +N> Refer to [this table](#blazor-form-validation-supported-components) for Blazor components that support form validation and their corresponding `@bind` parameter details. -4. The `EditForm` validates the input values based on its edit context and displays the validation message on the `ValidationSummary` component when submitting the form. +4. The `EditForm` validates input values based on its `EditContext` and displays validation messages in the `ValidationSummary` component when the form is submitted. **Validation Failure:** @@ -100,7 +100,7 @@ The Syncfusion® Blazor UI input and editor ![Validation message for individual input component in Blazor](images/validation-message.png) -6. The `EditForm`'s submit events [OnValidSubmit](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.onvalidsubmit?view=aspnetcore-8.0) and [OnInvalidSubmit](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.oninvalidsubmit?view=aspnetcore-8.0) can be used to get the validation success and failure `EditContext` details. +6. The `EditForm` submit events [OnValidSubmit](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.onvalidsubmit?view=aspnetcore-8.0) and [OnInvalidSubmit](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.oninvalidsubmit?view=aspnetcore-8.0) provide the `EditContext` on validation success or failure. ```cshtml @@ -145,11 +145,11 @@ The Syncfusion® Blazor UI input and editor } ``` - W> You shouldn't use the `OnSubmit` handler along with `OnValidSubmit` and `OnInvalidSubmit` event handlers in the `EditForm` component. It will throw a runtime error. +W> Do not use the `OnSubmit` handler together with `OnValidSubmit` and `OnInvalidSubmit` in the same `EditForm`. This causes a runtime error. ## Blazor form validation supported components -The following section provides the details about the Syncfusion® Blazor UI components that are supported with form validation, corresponding `@bind` properties, and validation examples. +The following section lists the Syncfusion® Blazor UI components that support form validation, the corresponding `@bind` parameters, and validation examples. @@ -283,11 +283,11 @@ The following section provides the details about the Syncfusion Razor Component`. Specify the component name and create it. -2. Add Syncfusion® Blazor component in the new component and assign the `Value`, `ValueChanged`, and `ValueExpression` properties. Refer [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-8.0#binding-with-component-parameters), to know more about data binding in component parameters. +2. Add a Syncfusion® Blazor component in the new component and assign the `Value`, `ValueChanged`, and `ValueExpression` parameters. Refer to the [data binding with component parameters](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-8.0#binding-with-component-parameters) documentation for details. ```cshtml @using System.Linq.Expressions; diff --git a/blazor/common/localization.md b/blazor/common/localization.md index 167f0661aa..e0af46a0ab 100644 --- a/blazor/common/localization.md +++ b/blazor/common/localization.md @@ -1,43 +1,43 @@ --- layout: post title: Localization (Multi-Language) in Blazor components | Syncfusion -description: Localization of Syncfusion Blazor UI components in Blazor Server and WebAssembly (WASM) apps and much more. +description: Learn how to localize Syncfusion Blazor UI components in Blazor Web App, WASM, Server, and .NET MAUI apps using resource files and dynamic culture switching. platform: Blazor -component: Common +control: Common documentation: ug --- # Localization of Blazor Components -[Localization](https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-8.0) is the process of translating the application resources into different languages for specific cultures. You can localize the Syncfusion® Blazor components by adding a resource file for each language. +[Localization](https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-8.0) is the process of translating application resources into different languages for specific cultures. Syncfusion® Blazor components can be localized by adding a resource file for each language. ## Localization of Syncfusion® Blazor Components -The following two steps can be used to localize Syncfusion® Blazor components based on culture. You can find the example codes in the below repository, +Use the following steps to localize Syncfusion® Blazor components based on culture. Example code is available in the repository below. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-localization) +N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-localization) -### Adding culture based resx files +### Adding culture-based .resx files -Syncfusion® components can be localized using the Resource `.resx` files. You can find the default and culture based localization files in the following GitHub repository. +Syncfusion® components can be localized using Resource `.resx` files. Default and culture-specific localization files are available in the following GitHub repository. -N> You can get default and culture based resource files from [GitHub](https://github.com/syncfusion/blazor-locale). +N> Download default and culture-based resource files from [GitHub](https://github.com/syncfusion/blazor-locale). -Copy the default resx file (`SfResources.resx`) and the other required resx files based on the culture to be localized and add them to the **Resources** folder. If you are implementing in a .NET MAUI Blazor app, create a **LocalizationResources** folder and add them into it. +Copy the default `.resx` file (`SfResources.resx`) and any required culture-specific `.resx` files to the **Resources** folder. For a .NET MAUI Blazor app, create a **LocalizationResources** folder and add them there. ![Adding Resource Files in Blazor](images/localization-resource.png) -N> Update the localization files whenever you upgrade the Syncfusion® NuGet packages in the application to avoid the issues occur due to localization strings. +N> Update the localization files whenever upgrading Syncfusion® NuGet packages to prevent mismatches in localization strings. -After adding the resource file in the application, double click default resx (`SfResources.resx`) file and open **Resource Editor**. In the Resource Editor, change **Access Modifier** option as **Public** . +After adding the resource files, open the default resource file (`SfResources.resx`) in the **Resource Editor** and set **Access Modifier** to **Public**. ![Changing Access Modifier](images/localization-resource-file.png) ### Create and register localization service -[ISyncfusionStringLocalizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html) which acts as a middleware to connect the Syncfusion® Blazor UI components and resource files, uses [ResourceManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_ResourceManager) to provide culture specific resources at runtime. Create a class implementing `ISyncfusionStringLocalizer`. In the newly created class, return the `ResourceManager` created in the above step for [ResourceManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_ResourceManager) property and change [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_GetText_System_String_) method to return localized string using resource manager. +[ISyncfusionStringLocalizer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html) acts as middleware between Syncfusion® Blazor UI components and resource files and uses the [ResourceManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_ResourceManager) to provide culture-specific resources at runtime. Create a class that implements `ISyncfusionStringLocalizer`. In the class, return the `ResourceManager` created in the previous step for the [ResourceManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_ResourceManager) property and update [GetText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ISyncfusionStringLocalizer.html#Syncfusion_Blazor_ISyncfusionStringLocalizer_GetText_System_String_) to return the localized string. -In the following code, `SyncfusionLocalizer` class implements `ISyncfusionStringLocalizer` interface and `ResourceManager` configured to return the cached ResourceManager instance of default resource file created in **Adding culture based resx files** step. +In the following code, the `SyncfusionLocalizer` class implements the `ISyncfusionStringLocalizer` interface, and the `ResourceManager` is configured to return the cached `ResourceManager` instance of the default resource file created in the “Adding culture-based .resx files” step. {% tabs %} @@ -70,11 +70,10 @@ public class SyncfusionLocalizer : ISyncfusionStringLocalizer {% endtabs %} -Register the `ISyncfusionStringLocalizer` and `Syncfusion® Blazor Service` in the **~/Program.cs** file of your app. +Register `ISyncfusionStringLocalizer` and the Syncfusion® Blazor service in the **~/Program.cs** file of your app. -* If you create a Blazor Web App with an **Interactive render mode** such as `WebAssembly or Auto`, you need to ensure the registration of the `SyncfusionLocalizer` and Syncfusion® Blazor services in both **~/Program.cs** files. - -* For **MAUI Blazor App**, register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. +* For a Blazor Web App using an **Interactive render mode** (WebAssembly or Auto), register `SyncfusionLocalizer` and the Syncfusion® Blazor services in both **Server** and **Client** `~/Program.cs` files. +* For a **.NET MAUI Blazor** app, register the Syncfusion® Blazor service in **~/MauiProgram.cs**. {% tabs %} @@ -93,19 +92,18 @@ builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(Syncfus ## Statically set the culture -If you don't want to change culture dynamically, you can set it statically by following the procedures below. +If culture changes are not required at runtime, set the culture statically using the options below. ### Blazor Web App and Blazor WASM App -In Blazor Web App and Blazor WASM app, you can set culture statically in Blazor's start option or in C# code. - -#### Setting the culture Blazor's start option +In Blazor Web App and Blazor WebAssembly (WASM) apps, set culture either in Blazor’s start options or in C# code. -The app's culture can be set in JavaScript by setting `applicationCulture` in Blazor's start option by following the steps below, +#### Setting the culture in Blazor’s start option -* For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), prevent Blazor autostart by adding `autostart="false"` attribute to the Blazor `