diff --git a/blazor/datagrid/global-local.md b/blazor/datagrid/global-local.md index b2567fc0cf..32591d8d94 100644 --- a/blazor/datagrid/global-local.md +++ b/blazor/datagrid/global-local.md @@ -1,55 +1,613 @@ --- layout: post -title: Globalization in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Globalization in Syncfusion Blazor DataGrid component and much more. +title: Globalization in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about globalization in Syncfusion Blazor DataGrid and much more. platform: Blazor control: DataGrid documentation: ug --- -# Globalization in Blazor DataGrid Component +# Globalization in Blazor DataGrid + +The Syncfusion Blazor DataGrid provides a feature known as Globalization (global and local), which makes the application more accessible and useful for individuals from different regions and language backgrounds. You have the ability to view data in your preferred language and format, resulting in an enhanced overall experience. ## Localization -[Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The Syncfusion Blazor DataGrid supports localization, allowing you to customize the text used in the Grid to suit different languages or cultural preferences. You can change static text on various elements, such as **group drop area text** and pager **information text**, to different cultures, such as **Arabic**, **Deutsch**, **French**, and more. For detailed instructions, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion Blazor components. + +**Data Rendering** + +Locale key words |Text | Example +-----|-----|----- +Grid_EmptyRecord | No records to display |  +Grid_EmptyDataSourceError | DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid + +**Columns** + +Locale key words |Text | Example +-----|-----|----- +Grid_True | true |  +Grid_False | false |  + +**ColumnChooser** + +Locale key words |Text | Example +-----|-----|----- +Grid_Columnchooser | Columns |  +Grid_ChooseColumns | Choose Column |  + +**Editing** + +Locale key words |Text | Example +-----|-----|----- +Grid_Add | Add |  +Grid_Edit| Edit |  +Grid_Cancel| Cancel |  +Grid_Update| Update |  +Grid_Delete | Delete |  +Grid_Save | Save |  +Grid_EditOperationAlert | No records selected for edit operation |  +Grid_DeleteOperationAlert | No records selected for delete operation |  +Grid_SaveButton | Save |  +Grid_OKButton | OK |  +Grid_CancelButton | Cancel |  +Grid_EditFormTitle | Details of |  +Grid_AddFormTitle | Add New Record |  +Grid_BatchSaveConfirm | Are you sure you want to save changes? |  +Grid_BatchSaveLostChanges | Unsaved changes will be lost. Are you sure you want to continue? |  +Grid_ConfirmDelete | Are you sure you want to Delete Record? |  +Grid_CancelEdit | Are you sure you want to Cancel the changes? |  + +**Grouping** + +Locale key words |Text | Example +-----|-----|----- +Grid_GroupDropArea | Drag a column header here to group its column |  +Grid_UnGroup | Click here to ungroup |  +Grid_GroupDisable | Grouping is disabled for this column |  +Grid_Item | item |  +Grid_Items | items |  +Grid_UnGroupButton | Click here to ungroup | +Grid_GroupDescription | Press Ctrl space to group |  + +**Filtering** + +Locale key words |Text | Example +-----|-----|----- +Grid_InvalidFilterMessage | Invalid Filter Data +Grid_FilterbarTitle | \s filter bar cell |  +Grid_Matchs | No Matches Found |  +Grid_FilterButton | Filter |  +Grid_ClearButton | Clear |  +Grid_StartsWith | Starts With |  +Grid_EndsWith | Ends With |  +Grid_Contains | Contains |  +Grid_Equal | Equal |  +Grid_NotEqual | Not Equal |  +Grid_LessThan | Less Than |  +Grid_LessThanOrEqual | Less Than Or Equal |  +Grid_GreaterThan | Greater Than |  +Grid_GreaterThanOrEqual | Greater Than Or Equal |  +Grid_ChooseDate | Choose a Date |  +Grid_EnterValue | Enter the value |  +Grid_SelectAll | Select All |  +Grid_Blanks | Blanks |  +Grid_FilterTrue | True |  +Grid_FilterFalse | False |  +Grid_NoResult | No Matches Found |  +Grid_ClearFilter | Clear Filter |  +Grid_NumberFilter | Number Filters |  +Grid_TextFilter | Text Filters |  +Grid_DateFilter | Date Filters |  +Grid_DateTimeFilter | DateTime Filters |  +Grid_MatchCase | Match Case |  +Grid_Between | Between |  +Grid_CustomFilter | Custom Filter |  +Grid_CustomFilterPlaceHolder | Enter the value |  +Grid_CustomFilterDatePlaceHolder | Choose a date |  +Grid_AND | AND |  +Grid_OR | OR |  +Grid_ShowRowsWhere | Show rows where: |  + +**Searching** + +Locale key words |Text | Example +-----|-----|----- +Grid_Search | Search |  +Grid_SearchColumns | search columns + +**Toolbar** -## Right to left (RTL) +Locale key words |Text | Example +-----|-----|----- +Grid_Print | Print |  +Grid_Pdfexport | PDF Export |  +Grid_Excelexport | Excel Export |  +Grid_Csvexport | CSV Export |  -RTL provides an option to switch the text direction and layout of the DataGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). In the following sample, **EnableRtl** property is used to enable RTL in the DataGrid. +**ColumnMenu** -```cshtml +Locale key words |Text | Example +-----|-----|----- +Grid_FilterMenu | Filter |  +Grid_AutoFitAll | Autofit all columns | +Grid_AutoFit | Autofit this column | + +**ContextMenu** + +Locale key words |Text | Example +-----|-----|----- +Grid_Copy | Copy |  +Grid_Group | Group by this column |  +Grid_Ungroup | Ungroup by this column |  +Grid_autoFitAll | Auto Fit all columns |  +Grid_autoFit | Auto Fit this column |  +Grid_Export | Export |  +Grid_FirstPage | First Page |  +Grid_LastPage | Last Page |  +Grid_PreviousPage | Previous Page |  +Grid_NextPage | Next Page |  +Grid_SortAscending | Sort Ascending |  +Grid_SortDescending | Sort Descending |  +Grid_EditRecord | Edit Record |  +Grid_DeleteRecord | Delete Record |  + +### Switch the different localization + +The Syncfusion Blazor DataGrid allows you to switch the localization from one culture to another culture. This will be useful when you want to change the localization based on your requirements. For more details, you can refer to the official documentation on [dynamically setting the culture](https://blazor.syncfusion.com/documentation/common/localization?cs-save-lang=1&cs-lang=razor#dynamically-set-the-culture). + +To switch to a different localization, follow these steps: + +**Step 1: Create a Blazor web app** + +You can create a **Blazor Web App** named **LocalizationSample** using Visual Studio 2022, either 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). Make sure to 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). + +**Step 2: Install Syncfusion Blazor DataGrid and Themes NuGet packages** + +To add the Syncfusion Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). + +If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install the Syncfusion Blazor NuGet packages in the client project. + +Alternatively, use the following Package Manager commands: + +```powershell +Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} +``` + +> 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 a complete list of available packages. + +**Step 3: Register Syncfusion Blazor service** + +- Open the **~/_Imports.razor** file and import the required namespaces. + +```razor +@using Syncfusion.Blazor @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +``` + +**Step 4: Add stylesheet and script resources** + +Include the theme stylesheet and script references in the **~/Components/App.razor** file. + +```html +
+ .... + + +.... + + .... + + +``` + +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). +> * Set the `rendermode` to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. + +**Step 5: Create and register localization service** + +Create a **SyncfusionLocalizer.cs** file and add the following code. For detailed steps on creating and registering a localization service, refer to the [Blazor Localization documentation](https://blazor.syncfusion.com/documentation/common/localization?cs-save-lang=1&cs-lang=csharp#create-and-register-localization-service). + +{% tabs %} +{% highlight cs tabtitle="SyncfusionLocalizer.cs" %} + +using Syncfusion.Blazor; + +namespace LocalizationSample.Client +{ + public class SyncfusionLocalizer : ISyncfusionStringLocalizer + { + // To get the locale key from mapped resources file + public string GetText(string key) + { + return this.ResourceManager.GetString(key); + } + + // To access the resource file and get the exact value for locale key + + public System.Resources.ResourceManager ResourceManager + { + get + { + // Replace the ApplicationNamespace with your application name. + return LocalizationSample.Client.Resources.SfResources.ResourceManager; + } + } + } +} + +{% endhighlight %} +{% endtabs %} + +**Step 6: Configure ~/Program.cs file** + +* **Set the Culture of the Application:** In the client-side **~/Program.cs** , use JavaScript Interop to retrieve the user's culture setting from local storage. If none is found, set the default to **en-US**. + +* **Register Services:** Register the `SyncfusionLocalizer` and Syncfusion Blazor services in both **~/Program.cs** files. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +using LocalizationSample.Client; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.JSInterop; +using Syncfusion.Blazor; +using System.Globalization; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); + +// Register the Syncfusion Blazor services. +builder.Services.AddSyncfusionBlazor(); + +//Register the Syncfusion locale service to localize Syncfusion Blazor components. +builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer)); +Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); +var host = builder.Build(); + +//Setting culture of the application. +var jsInterop = host.Services.GetRequiredService