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 | ![Locale empty record](images/globalization/locale-empty-record.png) +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 | ![Locale true](images/globalization/locale-true.png) +Grid_False | false | ![Locale false](images/globalization/locale-false.png) + +**ColumnChooser** + +Locale key words |Text | Example +-----|-----|----- +Grid_Columnchooser | Columns | ![Locale columnchooser](images/globalization/locale-column-chooser.png) +Grid_ChooseColumns | Choose Column | ![Locale choose columns](images/globalization/locale-choose-columns.png) + +**Editing** + +Locale key words |Text | Example +-----|-----|----- +Grid_Add | Add | ![Locale add](images/globalization/locale-add.png) +Grid_Edit| Edit | ![Locale edit](images/globalization/locale-edit.png) +Grid_Cancel| Cancel | ![Locale cancel](images/globalization/locale-cancel.png) +Grid_Update| Update | ![Locale update](images/globalization/locale-update.png) +Grid_Delete | Delete | ![Locale delete](images/globalization/locale-delete.png) +Grid_Save | Save | ![Locale save](images/globalization/locale-save.png) +Grid_EditOperationAlert | No records selected for edit operation | ![Locale edit operation alert](images/globalization/locale-edit-operation-alert.png) +Grid_DeleteOperationAlert | No records selected for delete operation | ![Locale delete operation alert](images/globalization/locale-delete-operation-alert.png) +Grid_SaveButton | Save | ![Locale save button](images/globalization/locale-save-button.png) +Grid_OKButton | OK | ![Locale ok button](images/globalization/locale-ok-button.png) +Grid_CancelButton | Cancel | ![Locale cancel button](images/globalization/locale-cancel-button.png) +Grid_EditFormTitle | Details of | ![Locale edit form title](images/globalization/locale-edit-form-title.png) +Grid_AddFormTitle | Add New Record | ![Locale add form title](images/globalization/locale-add-form-title.png) +Grid_BatchSaveConfirm | Are you sure you want to save changes? | ![Locale batch save confirm](images/globalization/locale-batch-save-confirm.png) +Grid_BatchSaveLostChanges | Unsaved changes will be lost. Are you sure you want to continue? | ![Locale batch save lost changes](images/globalization/locale-batch-save-lost-changes.png) +Grid_ConfirmDelete | Are you sure you want to Delete Record? | ![Locale confirm delete](images/globalization/locale-confirm-delete.png) +Grid_CancelEdit | Are you sure you want to Cancel the changes? | ![Locale cancel edit](images/globalization/locale-cancel-edit.png) + +**Grouping** + +Locale key words |Text | Example +-----|-----|----- +Grid_GroupDropArea | Drag a column header here to group its column | ![Locale group drop area](images/globalization/locale-group-drop-area.png) +Grid_UnGroup | Click here to ungroup | ![Locale un group](images/globalization/locale-un-group.png) +Grid_GroupDisable | Grouping is disabled for this column | ![Locale group disable](images/globalization/locale-group-disable.png) +Grid_Item | item | ![Locale Item](images/globalization/locale-item.png) +Grid_Items | items | ![Locale Items](images/globalization/locale-items.png) +Grid_UnGroupButton | Click here to ungroup | +Grid_GroupDescription | Press Ctrl space to group | ![Locale group description](images/globalization/locale-group-description.png) + +**Filtering** + +Locale key words |Text | Example +-----|-----|----- +Grid_InvalidFilterMessage | Invalid Filter Data +Grid_FilterbarTitle | \s filter bar cell | ![Locale filterbar title](images/globalization/locale-filterbar-title.png) +Grid_Matchs | No Matches Found | ![Locale matchs](images/globalization/locale-matchs.png) +Grid_FilterButton | Filter | ![Locale filter button](images/globalization/locale-filter-button.png) +Grid_ClearButton | Clear | ![Locale clear button](images/globalization/locale-clear-button.png) +Grid_StartsWith | Starts With | ![Locale starts with](images/globalization/locale-starts-with.png) +Grid_EndsWith | Ends With | ![Locale ends with](images/globalization/locale-ends-with.png) +Grid_Contains | Contains | ![Locale contains](images/globalization/locale-contains.png) +Grid_Equal | Equal | ![Locale equal](images/globalization/locale-equal.png) +Grid_NotEqual | Not Equal | ![Locale not equal](images/globalization/locale-not-equal.png) +Grid_LessThan | Less Than | ![Locale less than](images/globalization/locale-less-than.png) +Grid_LessThanOrEqual | Less Than Or Equal | ![Locale less than or equal](images/globalization/locale-less-than-or-equal.png) +Grid_GreaterThan | Greater Than | ![Locale greater than](images/globalization/locale-greater-than.png) +Grid_GreaterThanOrEqual | Greater Than Or Equal | ![Locale greater than or equal](images/globalization/locale-greater-than-or-equal.png) +Grid_ChooseDate | Choose a Date | ![Locale choose date](images/globalization/locale-choose-date.png) +Grid_EnterValue | Enter the value | ![Locale enter value](images/globalization/locale-enter-value.png) +Grid_SelectAll | Select All | ![Locale select all](images/globalization/locale-select-all.png) +Grid_Blanks | Blanks | ![Locale blanks](images/globalization/locale-blanks.png) +Grid_FilterTrue | True | ![Locale filter true](images/globalization/locale-filter-true.png) +Grid_FilterFalse | False | ![Locale filter false](images/globalization/locale-filter-false.png) +Grid_NoResult | No Matches Found | ![Locale no result](images/globalization/locale-no-result.png) +Grid_ClearFilter | Clear Filter | ![Locale clear filter](images/globalization/locale-clear-filter.png) +Grid_NumberFilter | Number Filters | ![Locale number filter](images/globalization/locale-number-filter.png) +Grid_TextFilter | Text Filters | ![Locale text filter](images/globalization/locale-text-filter.png) +Grid_DateFilter | Date Filters | ![Locale date filter](images/globalization/locale-date-filter.png) +Grid_DateTimeFilter | DateTime Filters | ![Locale date time filter](images/globalization/locale-date-time-filter.png) +Grid_MatchCase | Match Case | ![Locale match case](images/globalization/locale-match-case.png) +Grid_Between | Between | ![Locale between](images/globalization/locale-between.png) +Grid_CustomFilter | Custom Filter | ![Locale custom filter](images/globalization/locale-custom-filter.png) +Grid_CustomFilterPlaceHolder | Enter the value | ![Locale custom filter placeholder](images/globalization/locale-custom-filter-placeholder.png) +Grid_CustomFilterDatePlaceHolder | Choose a date | ![Locale custom filter date placeholder](images/globalization/locale-custom-filter-date-placeholder.png) +Grid_AND | AND | ![Locale AND](images/globalization/locale-AND.png) +Grid_OR | OR | ![Locale OR](images/globalization/locale-OR.png) +Grid_ShowRowsWhere | Show rows where: | ![Locale show rows where](images/globalization/locale-show-rows-where.png) + +**Searching** + +Locale key words |Text | Example +-----|-----|----- +Grid_Search | Search | ![Locale search](images/globalization/locale-search.png) +Grid_SearchColumns | search columns + +**Toolbar** -## Right to left (RTL) +Locale key words |Text | Example +-----|-----|----- +Grid_Print | Print | ![Locale print](images/globalization/locale-print.png) +Grid_Pdfexport | PDF Export | ![Locale pdfexport](images/globalization/locale-pdfexport.png) +Grid_Excelexport | Excel Export | ![Locale excelexport](images/globalization/locale-excelexport.png) +Grid_Csvexport | CSV Export | ![Locale csvexport](images/globalization/locale-csvexport.png) -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 | ![Locale filter menu](images/globalization/locale-filter-menu.png) +Grid_AutoFitAll | Autofit all columns | +Grid_AutoFit | Autofit this column | + +**ContextMenu** + +Locale key words |Text | Example +-----|-----|----- +Grid_Copy | Copy | ![Locale copy](images/globalization/locale-copy.png) +Grid_Group | Group by this column | ![Locale group](images/globalization/locale-group.png) +Grid_Ungroup | Ungroup by this column | ![Locale ungroup](images/globalization/locale-ungroup.png) +Grid_autoFitAll | Auto Fit all columns | ![Locale autofit all](images/globalization/locale-autofit-all.png) +Grid_autoFit | Auto Fit this column | ![Locale autofit](images/globalization/locale-autofit.png) +Grid_Export | Export | ![Locale export](images/globalization/locale-export.png) +Grid_FirstPage | First Page | ![Locale first page](images/globalization/locale-first-page.png) +Grid_LastPage | Last Page | ![Locale last page](images/globalization/locale-last-page.png) +Grid_PreviousPage | Previous Page | ![Locale previous page](images/globalization/locale-previous-page.png) +Grid_NextPage | Next Page | ![Locale next page](images/globalization/locale-next-page.png) +Grid_SortAscending | Sort Ascending | ![Locale sort ascending](images/globalization/locale-sort-ascending.png) +Grid_SortDescending | Sort Descending | ![Locale sort descending](images/globalization/locale-sort-descending.png) +Grid_EditRecord | Edit Record | ![Locale edit record](images/globalization/locale-edit-record.png) +Grid_DeleteRecord | Delete Record | ![Locale delete record](images/globalization/locale-delete-record.png) + +### 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(); +var result = await jsInterop.InvokeAsync("cultureInfo.get"); +CultureInfo culture; +if (result != null) +{ + culture = new CultureInfo(result); +} +else +{ + culture = new CultureInfo("en-US"); + await jsInterop.InvokeVoidAsync("cultureInfo.set", "en-US"); +} +CultureInfo.DefaultThreadCurrentCulture = culture; +CultureInfo.DefaultThreadCurrentUICulture = culture; +await builder.Build().RunAsync(); + +{% endhighlight %} +{% endtabs %} + +**Step 7: In the project file, add the following code:** + +``` + + true + + +``` + +**Step 8: Add javaScript function for culture management** + +For a Blazor Web App, add the following JavaScript function to the **~/Components/App.razor** file (after the Blazor ` + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 9: Configure culture switching with Syncfusion Blazor DataGrid** + +In the **Counter.razor** file, add the following code to change the culture and display a Grid with a Button to switch between English (en-US) and French (fr-FR): + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/counter" +@rendermode InteractiveAuto +@using System.Globalization +@inject IJSRuntime JSRuntime +@inject NavigationManager NavigationManager +@using LocalizationSample.Client.Data + +
+ + +
- + + - - - + + + + + -@code{ - public List Orders { get; set; } +@code { + public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + Orders = OrderData.GetAllRecords(); + } + + private async Task ChangeCulture(string culture) + { + await JSRuntime.InvokeVoidAsync("cultureInfo.set", culture); + NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true); + } +} + +{% endhighlight %} +{% endtabs %} + + +**Step 11: Create a model class** + +Create a new folder named **Data**. Then, add a model class named **OrderData.cs** in the **Data** folder to represent the order data. + +{% tabs %} +{% highlight cs tabtitle="OrderData.cs" %} + +namespace LocalizationSample.Client.Data +{ + public class OrderData + { + public OrderData(int orderID, string customerID, double freight, string shipCity, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + return new List + { + new OrderData(10248, "VINET", 32.38, "Reims", "France"), + new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany"), + new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil"), + new OrderData(10251, "VICTE", 41.34, "Lyon", "France"), + new OrderData(10252, "SUPRD", 51.30, "Charleroi", "Belgium"), + new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil"), + new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland"), + new OrderData(10255, "RICSU", 148.33, "Genève", "France"), + new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil"), + new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Mexico"), + new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria"), + new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico"), + new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany"), + new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil"), + new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA") + }; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } } +} + +{% endhighlight %} +{% endtabs %} + +**Step 12: Run the application** + +When you run the application, the Grid will display data fetched from the API. + +![Switch the different localization](images/globalization/switch.png) + +## Right to Left - RTL + +The Right to Left (RTL) feature in the Syncfusion Blazor DataGrid allows you to switch the text direction and layout from left-to-right to right-to-left. This feature is especially beneficial for interacting with the Grid in languages that are written and read from right to left, such as **Arabic**, **Farsi,** **Urdu**, and others. Enabling RTL significantly improves the experience and accessibility for such languages. + +To enable RTL in the Grid, you can use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) property. This property switches the text direction and layout from left-to-right to right-to-left. + +To achieve this, follow the steps below: + +**Step 1:** Follow the steps from Step 1 to Step 5 in the following [link](https://blazor.syncfusion.com/documentation/datagrid/global-local#switch-the-different-localization), then continue with the steps below. + +**Step 2: Configure ~/Program.cs file** + +Register the `SyncfusionLocalizer` and Syncfusion Blazor services in both **~/Program.cs** files. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +using LocalizationSample.Client; +using Syncfusion.Blazor; + +builder.Services.AddSyncfusionBlazor(); +builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer)); + +{% endhighlight %} +{% endtabs %} + +**Step 3: Setting the culture in Blazor start option** + +* Add the **autostart="false"** attribute to the Blazor + + + + +{% endhighlight %} +{% endtabs %} + +**Step 4: Enable or disable RTL mode using toggle Switch** + +The [EJ2 Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button) is added to enable or disable the Right-to-Left (RTL) feature for the Arabic (ar-AE) locale. When the switch is toggled, the [ValueChange](http://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered, and the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) property of the Grid is updated accordingly. + +{% tabs %} +{% highlight razor tabtitle="Counter.razor" %} + +@page "/counter" +@rendermode InteractiveAuto + +@using LocalizationSample.Client.Models + +
+ + +
+ + + + + + + + + + + + + + +@code { + private SfGrid Grid; + + public List Orders { get; set; } + public bool isRTLEnabled { get; set; } = false; + + protected override void OnInitialized() { - public int? OrderID { get; set; } + Orders = OrderData.GetAllRecords(); + } + + private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + isRTLEnabled = args.Checked; + Grid.Refresh(); + } +} + +{% endhighlight %} +{% endtabs %} + +**Step 5: Create a model class** + +Create a new folder named **Models**. Then, add a model class named **OrderData.cs** in the **Models** folder to represent the order data. + +{% tabs %} +{% highlight cs tabtitle="OrderData.cs" %} + +namespace LocalizationSample.Client.Models +{ + public class OrderData + { + public OrderData(int orderID, string customerID, double freight, string shipCity, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + return new List + { + new OrderData(10248, "VINET", 32.38, "Reims", "France"), + new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany"), + new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil"), + new OrderData(10251, "VICTE", 41.34, "Lyon", "France"), + new OrderData(10252, "SUPRD", 51.30, "Charleroi", "Belgium"), + new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil"), + new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland"), + new OrderData(10255, "RICSU", 148.33, "Genève", "France"), + new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil"), + new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Mexico"), + new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria"), + new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico"), + new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany"), + new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil"), + new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA") + }; + } + public int OrderID { get; set; } public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } } } -``` -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +{% endhighlight %} +{% endtabs %} + +**Step 6: Run the application** + +When you run the application, the Grid will display data fetched from the API. + +![Right to Left - RTL](images/globalization/enable-rtl.png) \ No newline at end of file diff --git a/blazor/datagrid/images/globalization/enable-rtl.png b/blazor/datagrid/images/globalization/enable-rtl.png new file mode 100644 index 0000000000..bc801dfd5f Binary files /dev/null and b/blazor/datagrid/images/globalization/enable-rtl.png differ diff --git a/blazor/datagrid/images/globalization/internalization.png b/blazor/datagrid/images/globalization/internalization.png new file mode 100644 index 0000000000..2cdff0a2f5 Binary files /dev/null and b/blazor/datagrid/images/globalization/internalization.png differ diff --git a/blazor/datagrid/images/globalization/locale-AND.png b/blazor/datagrid/images/globalization/locale-AND.png new file mode 100644 index 0000000000..7d733a8a5d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-AND.png differ diff --git a/blazor/datagrid/images/globalization/locale-OR.png b/blazor/datagrid/images/globalization/locale-OR.png new file mode 100644 index 0000000000..f35fdfa4b6 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-OR.png differ diff --git a/blazor/datagrid/images/globalization/locale-add-current-selection.png b/blazor/datagrid/images/globalization/locale-add-current-selection.png new file mode 100644 index 0000000000..3c6192da74 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-add-current-selection.png differ diff --git a/blazor/datagrid/images/globalization/locale-add-form-title.png b/blazor/datagrid/images/globalization/locale-add-form-title.png new file mode 100644 index 0000000000..948572235f Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-add-form-title.png differ diff --git a/blazor/datagrid/images/globalization/locale-add.png b/blazor/datagrid/images/globalization/locale-add.png new file mode 100644 index 0000000000..4c356e9b48 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-add.png differ diff --git a/blazor/datagrid/images/globalization/locale-all.png b/blazor/datagrid/images/globalization/locale-all.png new file mode 100644 index 0000000000..414536ee0d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-all.png differ diff --git a/blazor/datagrid/images/globalization/locale-autofit-all.png b/blazor/datagrid/images/globalization/locale-autofit-all.png new file mode 100644 index 0000000000..7d096b9d04 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-autofit-all.png differ diff --git a/blazor/datagrid/images/globalization/locale-autofit.png b/blazor/datagrid/images/globalization/locale-autofit.png new file mode 100644 index 0000000000..79c37bd3d0 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-autofit.png differ diff --git a/blazor/datagrid/images/globalization/locale-batch-save-confirm.png b/blazor/datagrid/images/globalization/locale-batch-save-confirm.png new file mode 100644 index 0000000000..39916c33ea Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-batch-save-confirm.png differ diff --git a/blazor/datagrid/images/globalization/locale-batch-save-lost-changes.png b/blazor/datagrid/images/globalization/locale-batch-save-lost-changes.png new file mode 100644 index 0000000000..fc1c09f73e Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-batch-save-lost-changes.png differ diff --git a/blazor/datagrid/images/globalization/locale-between.png b/blazor/datagrid/images/globalization/locale-between.png new file mode 100644 index 0000000000..668d40a823 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-between.png differ diff --git a/blazor/datagrid/images/globalization/locale-blanks.png b/blazor/datagrid/images/globalization/locale-blanks.png new file mode 100644 index 0000000000..693cc09ca9 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-blanks.png differ diff --git a/blazor/datagrid/images/globalization/locale-cancel-button.png b/blazor/datagrid/images/globalization/locale-cancel-button.png new file mode 100644 index 0000000000..222321dcba Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-cancel-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-cancel-edit.png b/blazor/datagrid/images/globalization/locale-cancel-edit.png new file mode 100644 index 0000000000..ea4435781c Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-cancel-edit.png differ diff --git a/blazor/datagrid/images/globalization/locale-cancel.png b/blazor/datagrid/images/globalization/locale-cancel.png new file mode 100644 index 0000000000..76693ac0e8 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-cancel.png differ diff --git a/blazor/datagrid/images/globalization/locale-checkbox-label.png b/blazor/datagrid/images/globalization/locale-checkbox-label.png new file mode 100644 index 0000000000..1438f71a26 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-checkbox-label.png differ diff --git a/blazor/datagrid/images/globalization/locale-choose-columns.png b/blazor/datagrid/images/globalization/locale-choose-columns.png new file mode 100644 index 0000000000..e50f6e8ce7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-choose-columns.png differ diff --git a/blazor/datagrid/images/globalization/locale-choose-date.png b/blazor/datagrid/images/globalization/locale-choose-date.png new file mode 100644 index 0000000000..fc611e64b8 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-choose-date.png differ diff --git a/blazor/datagrid/images/globalization/locale-clear-button.png b/blazor/datagrid/images/globalization/locale-clear-button.png new file mode 100644 index 0000000000..8a4b354d68 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-clear-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-clear-filter.png b/blazor/datagrid/images/globalization/locale-clear-filter.png new file mode 100644 index 0000000000..e457638180 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-clear-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-clear.png b/blazor/datagrid/images/globalization/locale-clear.png new file mode 100644 index 0000000000..62878e7fe8 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-clear.png differ diff --git a/blazor/datagrid/images/globalization/locale-clipboard.png b/blazor/datagrid/images/globalization/locale-clipboard.png new file mode 100644 index 0000000000..7c3aa9346d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-clipboard.png differ diff --git a/blazor/datagrid/images/globalization/locale-collapsed.png b/blazor/datagrid/images/globalization/locale-collapsed.png new file mode 100644 index 0000000000..1b53363328 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-collapsed.png differ diff --git a/blazor/datagrid/images/globalization/locale-column-chooser.png b/blazor/datagrid/images/globalization/locale-column-chooser.png new file mode 100644 index 0000000000..f2dada33c7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-column-chooser.png differ diff --git a/blazor/datagrid/images/globalization/locale-column-header.png b/blazor/datagrid/images/globalization/locale-column-header.png new file mode 100644 index 0000000000..237fdad3c3 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-column-header.png differ diff --git a/blazor/datagrid/images/globalization/locale-columnchooser-dialog-ARIA.png b/blazor/datagrid/images/globalization/locale-columnchooser-dialog-ARIA.png new file mode 100644 index 0000000000..495db11222 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-columnchooser-dialog-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-columnmenu-description.png b/blazor/datagrid/images/globalization/locale-columnmenu-description.png new file mode 100644 index 0000000000..2da17657fc Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-columnmenu-description.png differ diff --git a/blazor/datagrid/images/globalization/locale-columnmenu-dialog-ARIA.png b/blazor/datagrid/images/globalization/locale-columnmenu-dialog-ARIA.png new file mode 100644 index 0000000000..ed14b926f4 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-columnmenu-dialog-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-command-column-aria.png b/blazor/datagrid/images/globalization/locale-command-column-aria.png new file mode 100644 index 0000000000..21865ae3af Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-command-column-aria.png differ diff --git a/blazor/datagrid/images/globalization/locale-confirm-delete.png b/blazor/datagrid/images/globalization/locale-confirm-delete.png new file mode 100644 index 0000000000..9a0e3cf676 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-confirm-delete.png differ diff --git a/blazor/datagrid/images/globalization/locale-contains.png b/blazor/datagrid/images/globalization/locale-contains.png new file mode 100644 index 0000000000..5d270614af Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-contains.png differ diff --git a/blazor/datagrid/images/globalization/locale-copy.png b/blazor/datagrid/images/globalization/locale-copy.png new file mode 100644 index 0000000000..e1df722833 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-copy.png differ diff --git a/blazor/datagrid/images/globalization/locale-csvexport.png b/blazor/datagrid/images/globalization/locale-csvexport.png new file mode 100644 index 0000000000..f476de0c29 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-csvexport.png differ diff --git a/blazor/datagrid/images/globalization/locale-current-page-info.png b/blazor/datagrid/images/globalization/locale-current-page-info.png new file mode 100644 index 0000000000..aaf0eed142 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-current-page-info.png differ diff --git a/blazor/datagrid/images/globalization/locale-custom-filter-date-placeholder.png b/blazor/datagrid/images/globalization/locale-custom-filter-date-placeholder.png new file mode 100644 index 0000000000..c91831ecb4 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-custom-filter-date-placeholder.png differ diff --git a/blazor/datagrid/images/globalization/locale-custom-filter-dialog-ARIA.png b/blazor/datagrid/images/globalization/locale-custom-filter-dialog-ARIA.png new file mode 100644 index 0000000000..f4cbe0e15f Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-custom-filter-dialog-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-custom-filter-placeholder.png b/blazor/datagrid/images/globalization/locale-custom-filter-placeholder.png new file mode 100644 index 0000000000..954ac224db Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-custom-filter-placeholder.png differ diff --git a/blazor/datagrid/images/globalization/locale-custom-filter.png b/blazor/datagrid/images/globalization/locale-custom-filter.png new file mode 100644 index 0000000000..d87c11839f Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-custom-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-date-filter.png b/blazor/datagrid/images/globalization/locale-date-filter.png new file mode 100644 index 0000000000..6e45a28348 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-date-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-date-time-filter.png b/blazor/datagrid/images/globalization/locale-date-time-filter.png new file mode 100644 index 0000000000..a891ac5f36 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-date-time-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-delete-operation-alert.png b/blazor/datagrid/images/globalization/locale-delete-operation-alert.png new file mode 100644 index 0000000000..8a0a92d8e9 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-delete-operation-alert.png differ diff --git a/blazor/datagrid/images/globalization/locale-delete-record.png b/blazor/datagrid/images/globalization/locale-delete-record.png new file mode 100644 index 0000000000..e1e8cdcb70 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-delete-record.png differ diff --git a/blazor/datagrid/images/globalization/locale-delete.png b/blazor/datagrid/images/globalization/locale-delete.png new file mode 100644 index 0000000000..b6bc1fc390 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-delete.png differ diff --git a/blazor/datagrid/images/globalization/locale-dialog-edit-ARIA.png b/blazor/datagrid/images/globalization/locale-dialog-edit-ARIA.png new file mode 100644 index 0000000000..1d207fc627 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-dialog-edit-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-dialog-edit.png b/blazor/datagrid/images/globalization/locale-dialog-edit.png new file mode 100644 index 0000000000..4a6a2fde97 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-dialog-edit.png differ diff --git a/blazor/datagrid/images/globalization/locale-edit-form-title.png b/blazor/datagrid/images/globalization/locale-edit-form-title.png new file mode 100644 index 0000000000..d42526db5b Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-edit-form-title.png differ diff --git a/blazor/datagrid/images/globalization/locale-edit-operation-alert.png b/blazor/datagrid/images/globalization/locale-edit-operation-alert.png new file mode 100644 index 0000000000..8211fabfbc Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-edit-operation-alert.png differ diff --git a/blazor/datagrid/images/globalization/locale-edit-record.png b/blazor/datagrid/images/globalization/locale-edit-record.png new file mode 100644 index 0000000000..7fb91a8cce Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-edit-record.png differ diff --git a/blazor/datagrid/images/globalization/locale-edit.png b/blazor/datagrid/images/globalization/locale-edit.png new file mode 100644 index 0000000000..dc4765fa8c Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-edit.png differ diff --git a/blazor/datagrid/images/globalization/locale-empty-record.png b/blazor/datagrid/images/globalization/locale-empty-record.png new file mode 100644 index 0000000000..7231c850d4 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-empty-record.png differ diff --git a/blazor/datagrid/images/globalization/locale-ends-with.png b/blazor/datagrid/images/globalization/locale-ends-with.png new file mode 100644 index 0000000000..1fb288bee6 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-ends-with.png differ diff --git a/blazor/datagrid/images/globalization/locale-enter-value.png b/blazor/datagrid/images/globalization/locale-enter-value.png new file mode 100644 index 0000000000..3624da9823 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-enter-value.png differ diff --git a/blazor/datagrid/images/globalization/locale-equal.png b/blazor/datagrid/images/globalization/locale-equal.png new file mode 100644 index 0000000000..f185d759cc Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-equal.png differ diff --git a/blazor/datagrid/images/globalization/locale-excel-menu-dialog-ARIA.png b/blazor/datagrid/images/globalization/locale-excel-menu-dialog-ARIA.png new file mode 100644 index 0000000000..65d774df29 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-excel-menu-dialog-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-excelexport.png b/blazor/datagrid/images/globalization/locale-excelexport.png new file mode 100644 index 0000000000..5f6a469147 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-excelexport.png differ diff --git a/blazor/datagrid/images/globalization/locale-expanded.png b/blazor/datagrid/images/globalization/locale-expanded.png new file mode 100644 index 0000000000..7ce936a835 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-expanded.png differ diff --git a/blazor/datagrid/images/globalization/locale-export.png b/blazor/datagrid/images/globalization/locale-export.png new file mode 100644 index 0000000000..196f7c9cec Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-export.png differ diff --git a/blazor/datagrid/images/globalization/locale-false.png b/blazor/datagrid/images/globalization/locale-false.png new file mode 100644 index 0000000000..fd9be78773 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-false.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-button.png b/blazor/datagrid/images/globalization/locale-filter-button.png new file mode 100644 index 0000000000..c133061cc3 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-description.png b/blazor/datagrid/images/globalization/locale-filter-description.png new file mode 100644 index 0000000000..ad0d1bfb89 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-description.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-false.png b/blazor/datagrid/images/globalization/locale-filter-false.png new file mode 100644 index 0000000000..5b4239c68d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-false.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-menu-dialog-ARIA.png b/blazor/datagrid/images/globalization/locale-filter-menu-dialog-ARIA.png new file mode 100644 index 0000000000..31ae33e881 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-menu-dialog-ARIA.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-menu.png b/blazor/datagrid/images/globalization/locale-filter-menu.png new file mode 100644 index 0000000000..5e86c4eb98 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-menu.png differ diff --git a/blazor/datagrid/images/globalization/locale-filter-true.png b/blazor/datagrid/images/globalization/locale-filter-true.png new file mode 100644 index 0000000000..098fb1131b Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filter-true.png differ diff --git a/blazor/datagrid/images/globalization/locale-filterbar-title.png b/blazor/datagrid/images/globalization/locale-filterbar-title.png new file mode 100644 index 0000000000..c1b70620ee Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-filterbar-title.png differ diff --git a/blazor/datagrid/images/globalization/locale-first-page-tooltip.png b/blazor/datagrid/images/globalization/locale-first-page-tooltip.png new file mode 100644 index 0000000000..4f2e8b96f9 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-first-page-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-first-page.png b/blazor/datagrid/images/globalization/locale-first-page.png new file mode 100644 index 0000000000..fe7ff8711f Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-first-page.png differ diff --git a/blazor/datagrid/images/globalization/locale-greater-than-or-equal.png b/blazor/datagrid/images/globalization/locale-greater-than-or-equal.png new file mode 100644 index 0000000000..2a93d3a171 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-greater-than-or-equal.png differ diff --git a/blazor/datagrid/images/globalization/locale-greater-than.png b/blazor/datagrid/images/globalization/locale-greater-than.png new file mode 100644 index 0000000000..9c555c80b3 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-greater-than.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-button.png b/blazor/datagrid/images/globalization/locale-group-button.png new file mode 100644 index 0000000000..97e27266f0 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-caption.png b/blazor/datagrid/images/globalization/locale-group-caption.png new file mode 100644 index 0000000000..4cedb00aa7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-caption.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-description.png b/blazor/datagrid/images/globalization/locale-group-description.png new file mode 100644 index 0000000000..1cf6eb3097 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-description.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-disable.png b/blazor/datagrid/images/globalization/locale-group-disable.png new file mode 100644 index 0000000000..9d4dbd9129 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-disable.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-drop-area.png b/blazor/datagrid/images/globalization/locale-group-drop-area.png new file mode 100644 index 0000000000..a01c1d2cc5 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-drop-area.png differ diff --git a/blazor/datagrid/images/globalization/locale-group-seperator.png b/blazor/datagrid/images/globalization/locale-group-seperator.png new file mode 100644 index 0000000000..4733de9921 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group-seperator.png differ diff --git a/blazor/datagrid/images/globalization/locale-group.png b/blazor/datagrid/images/globalization/locale-group.png new file mode 100644 index 0000000000..d640c750ad Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-group.png differ diff --git a/blazor/datagrid/images/globalization/locale-grouped-drag.png b/blazor/datagrid/images/globalization/locale-grouped-drag.png new file mode 100644 index 0000000000..74364b104e Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-grouped-drag.png differ diff --git a/blazor/datagrid/images/globalization/locale-grouped-sort-icon.png b/blazor/datagrid/images/globalization/locale-grouped-sort-icon.png new file mode 100644 index 0000000000..f884672dc1 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-grouped-sort-icon.png differ diff --git a/blazor/datagrid/images/globalization/locale-is-empty.png b/blazor/datagrid/images/globalization/locale-is-empty.png new file mode 100644 index 0000000000..46786a6244 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-is-empty.png differ diff --git a/blazor/datagrid/images/globalization/locale-is-not-empty.png b/blazor/datagrid/images/globalization/locale-is-not-empty.png new file mode 100644 index 0000000000..d1ba53812c Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-is-not-empty.png differ diff --git a/blazor/datagrid/images/globalization/locale-is-null.png b/blazor/datagrid/images/globalization/locale-is-null.png new file mode 100644 index 0000000000..33c3c769e7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-is-null.png differ diff --git a/blazor/datagrid/images/globalization/locale-item.png b/blazor/datagrid/images/globalization/locale-item.png new file mode 100644 index 0000000000..e990ed4b14 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-item.png differ diff --git a/blazor/datagrid/images/globalization/locale-items.png b/blazor/datagrid/images/globalization/locale-items.png new file mode 100644 index 0000000000..932ca2080d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-items.png differ diff --git a/blazor/datagrid/images/globalization/locale-last-page-tooltip.png b/blazor/datagrid/images/globalization/locale-last-page-tooltip.png new file mode 100644 index 0000000000..aa778c1d19 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-last-page-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-last-page.png b/blazor/datagrid/images/globalization/locale-last-page.png new file mode 100644 index 0000000000..7bf8dea807 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-last-page.png differ diff --git a/blazor/datagrid/images/globalization/locale-less-than-or-equal.png b/blazor/datagrid/images/globalization/locale-less-than-or-equal.png new file mode 100644 index 0000000000..fe126b3841 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-less-than-or-equal.png differ diff --git a/blazor/datagrid/images/globalization/locale-less-than.png b/blazor/datagrid/images/globalization/locale-less-than.png new file mode 100644 index 0000000000..bd29358e7e Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-less-than.png differ diff --git a/blazor/datagrid/images/globalization/locale-like.png b/blazor/datagrid/images/globalization/locale-like.png new file mode 100644 index 0000000000..2a21a7ffb7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-like.png differ diff --git a/blazor/datagrid/images/globalization/locale-match-case.png b/blazor/datagrid/images/globalization/locale-match-case.png new file mode 100644 index 0000000000..b0d06be8e9 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-match-case.png differ diff --git a/blazor/datagrid/images/globalization/locale-matchs.png b/blazor/datagrid/images/globalization/locale-matchs.png new file mode 100644 index 0000000000..3900644c5c Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-matchs.png differ diff --git a/blazor/datagrid/images/globalization/locale-next-page-tooltip.png b/blazor/datagrid/images/globalization/locale-next-page-tooltip.png new file mode 100644 index 0000000000..3a8fa35485 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-next-page-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-next-page.png b/blazor/datagrid/images/globalization/locale-next-page.png new file mode 100644 index 0000000000..f954c42965 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-next-page.png differ diff --git a/blazor/datagrid/images/globalization/locale-next-pager-tooltip.png b/blazor/datagrid/images/globalization/locale-next-pager-tooltip.png new file mode 100644 index 0000000000..cd1eeef416 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-next-pager-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-no-result.png b/blazor/datagrid/images/globalization/locale-no-result.png new file mode 100644 index 0000000000..16ee6d2d9e Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-no-result.png differ diff --git a/blazor/datagrid/images/globalization/locale-not-contains.png b/blazor/datagrid/images/globalization/locale-not-contains.png new file mode 100644 index 0000000000..bf54ec4dd7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-not-contains.png differ diff --git a/blazor/datagrid/images/globalization/locale-not-ends-with.png b/blazor/datagrid/images/globalization/locale-not-ends-with.png new file mode 100644 index 0000000000..1259e2c775 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-not-ends-with.png differ diff --git a/blazor/datagrid/images/globalization/locale-not-equal.png b/blazor/datagrid/images/globalization/locale-not-equal.png new file mode 100644 index 0000000000..423f899322 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-not-equal.png differ diff --git a/blazor/datagrid/images/globalization/locale-not-null.png b/blazor/datagrid/images/globalization/locale-not-null.png new file mode 100644 index 0000000000..5fcce3bdfc Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-not-null.png differ diff --git a/blazor/datagrid/images/globalization/locale-not-starts-with.png b/blazor/datagrid/images/globalization/locale-not-starts-with.png new file mode 100644 index 0000000000..81bb190748 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-not-starts-with.png differ diff --git a/blazor/datagrid/images/globalization/locale-number-filter.png b/blazor/datagrid/images/globalization/locale-number-filter.png new file mode 100644 index 0000000000..bd612813c5 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-number-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-ok-button.png b/blazor/datagrid/images/globalization/locale-ok-button.png new file mode 100644 index 0000000000..6a6513b825 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-ok-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-all-drop-down.png b/blazor/datagrid/images/globalization/locale-pager-all-drop-down.png new file mode 100644 index 0000000000..4a71811f7e Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-all-drop-down.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-all.png b/blazor/datagrid/images/globalization/locale-pager-all.png new file mode 100644 index 0000000000..414536ee0d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-all.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-container.png b/blazor/datagrid/images/globalization/locale-pager-container.png new file mode 100644 index 0000000000..0ee9a8aeed Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-container.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-drop-down.png b/blazor/datagrid/images/globalization/locale-pager-drop-down.png new file mode 100644 index 0000000000..0eb744f88a Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-drop-down.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-external-msg.png b/blazor/datagrid/images/globalization/locale-pager-external-msg.png new file mode 100644 index 0000000000..8f16ba554c Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-external-msg.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-of.png b/blazor/datagrid/images/globalization/locale-pager-of.png new file mode 100644 index 0000000000..12d4625811 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-of.png differ diff --git a/blazor/datagrid/images/globalization/locale-pager-total-item-info.png b/blazor/datagrid/images/globalization/locale-pager-total-item-info.png new file mode 100644 index 0000000000..8666405f48 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pager-total-item-info.png differ diff --git a/blazor/datagrid/images/globalization/locale-pdfexport.png b/blazor/datagrid/images/globalization/locale-pdfexport.png new file mode 100644 index 0000000000..cb7cfb1fd8 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-pdfexport.png differ diff --git a/blazor/datagrid/images/globalization/locale-previous-page-tooltip.png b/blazor/datagrid/images/globalization/locale-previous-page-tooltip.png new file mode 100644 index 0000000000..54ddffe839 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-previous-page-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-previous-page.png b/blazor/datagrid/images/globalization/locale-previous-page.png new file mode 100644 index 0000000000..70b7c57665 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-previous-page.png differ diff --git a/blazor/datagrid/images/globalization/locale-previous-pager-tooltip.png b/blazor/datagrid/images/globalization/locale-previous-pager-tooltip.png new file mode 100644 index 0000000000..8efd4fc69f Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-previous-pager-tooltip.png differ diff --git a/blazor/datagrid/images/globalization/locale-print.png b/blazor/datagrid/images/globalization/locale-print.png new file mode 100644 index 0000000000..ab61bec4c8 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-print.png differ diff --git a/blazor/datagrid/images/globalization/locale-save-button.png b/blazor/datagrid/images/globalization/locale-save-button.png new file mode 100644 index 0000000000..3950d472a1 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-save-button.png differ diff --git a/blazor/datagrid/images/globalization/locale-save.png b/blazor/datagrid/images/globalization/locale-save.png new file mode 100644 index 0000000000..d2434efac9 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-save.png differ diff --git a/blazor/datagrid/images/globalization/locale-search.png b/blazor/datagrid/images/globalization/locale-search.png new file mode 100644 index 0000000000..680ccc55f2 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-search.png differ diff --git a/blazor/datagrid/images/globalization/locale-select-all.png b/blazor/datagrid/images/globalization/locale-select-all.png new file mode 100644 index 0000000000..c83dbb5ba3 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-select-all.png differ diff --git a/blazor/datagrid/images/globalization/locale-show-rows-where.png b/blazor/datagrid/images/globalization/locale-show-rows-where.png new file mode 100644 index 0000000000..890eb0b101 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-show-rows-where.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-ascending.png b/blazor/datagrid/images/globalization/locale-sort-ascending.png new file mode 100644 index 0000000000..e39fd90f43 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-ascending.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-by-newest.png b/blazor/datagrid/images/globalization/locale-sort-by-newest.png new file mode 100644 index 0000000000..85b461ce31 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-by-newest.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-by-oldest.png b/blazor/datagrid/images/globalization/locale-sort-by-oldest.png new file mode 100644 index 0000000000..ec76b66e3d Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-by-oldest.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-descending.png b/blazor/datagrid/images/globalization/locale-sort-descending.png new file mode 100644 index 0000000000..a3faa9bb34 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-descending.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-description.png b/blazor/datagrid/images/globalization/locale-sort-description.png new file mode 100644 index 0000000000..89daf6ec17 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-description.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-largest-to-smallest.png b/blazor/datagrid/images/globalization/locale-sort-largest-to-smallest.png new file mode 100644 index 0000000000..ef5146fa36 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-largest-to-smallest.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort-smallest-to-largest.png b/blazor/datagrid/images/globalization/locale-sort-smallest-to-largest.png new file mode 100644 index 0000000000..385c5985cb Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort-smallest-to-largest.png differ diff --git a/blazor/datagrid/images/globalization/locale-sort.png b/blazor/datagrid/images/globalization/locale-sort.png new file mode 100644 index 0000000000..cf98bc2df3 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sort.png differ diff --git a/blazor/datagrid/images/globalization/locale-sortAtoZ.png b/blazor/datagrid/images/globalization/locale-sortAtoZ.png new file mode 100644 index 0000000000..1391d22275 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sortAtoZ.png differ diff --git a/blazor/datagrid/images/globalization/locale-sortZtoA.png b/blazor/datagrid/images/globalization/locale-sortZtoA.png new file mode 100644 index 0000000000..9b7286458b Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-sortZtoA.png differ diff --git a/blazor/datagrid/images/globalization/locale-starts-with.png b/blazor/datagrid/images/globalization/locale-starts-with.png new file mode 100644 index 0000000000..c4e155f195 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-starts-with.png differ diff --git a/blazor/datagrid/images/globalization/locale-templatecell.png b/blazor/datagrid/images/globalization/locale-templatecell.png new file mode 100644 index 0000000000..d74f772246 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-templatecell.png differ diff --git a/blazor/datagrid/images/globalization/locale-text-filter.png b/blazor/datagrid/images/globalization/locale-text-filter.png new file mode 100644 index 0000000000..762bbd12d4 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-text-filter.png differ diff --git a/blazor/datagrid/images/globalization/locale-total-item-info.png b/blazor/datagrid/images/globalization/locale-total-item-info.png new file mode 100644 index 0000000000..8666405f48 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-total-item-info.png differ diff --git a/blazor/datagrid/images/globalization/locale-total-items-info.png b/blazor/datagrid/images/globalization/locale-total-items-info.png new file mode 100644 index 0000000000..f0003be4e7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-total-items-info.png differ diff --git a/blazor/datagrid/images/globalization/locale-true.png b/blazor/datagrid/images/globalization/locale-true.png new file mode 100644 index 0000000000..b97b97691a Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-true.png differ diff --git a/blazor/datagrid/images/globalization/locale-un-group.png b/blazor/datagrid/images/globalization/locale-un-group.png new file mode 100644 index 0000000000..2673e7cc94 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-un-group.png differ diff --git a/blazor/datagrid/images/globalization/locale-ungroup-aria.png b/blazor/datagrid/images/globalization/locale-ungroup-aria.png new file mode 100644 index 0000000000..c7ade48d47 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-ungroup-aria.png differ diff --git a/blazor/datagrid/images/globalization/locale-ungroup-icon.png b/blazor/datagrid/images/globalization/locale-ungroup-icon.png new file mode 100644 index 0000000000..85b1940db7 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-ungroup-icon.png differ diff --git a/blazor/datagrid/images/globalization/locale-ungroup.png b/blazor/datagrid/images/globalization/locale-ungroup.png new file mode 100644 index 0000000000..256bf6fc87 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-ungroup.png differ diff --git a/blazor/datagrid/images/globalization/locale-update.png b/blazor/datagrid/images/globalization/locale-update.png new file mode 100644 index 0000000000..68a4699c02 Binary files /dev/null and b/blazor/datagrid/images/globalization/locale-update.png differ diff --git a/blazor/datagrid/images/globalization/localization-de-culture.png b/blazor/datagrid/images/globalization/localization-de-culture.png new file mode 100644 index 0000000000..641513ab41 Binary files /dev/null and b/blazor/datagrid/images/globalization/localization-de-culture.png differ diff --git a/blazor/datagrid/images/globalization/localization-fr-culture.png b/blazor/datagrid/images/globalization/localization-fr-culture.png new file mode 100644 index 0000000000..4ae5f45f8b Binary files /dev/null and b/blazor/datagrid/images/globalization/localization-fr-culture.png differ diff --git a/blazor/datagrid/images/globalization/localization-rtl.gif b/blazor/datagrid/images/globalization/localization-rtl.gif new file mode 100644 index 0000000000..ee45eba03a Binary files /dev/null and b/blazor/datagrid/images/globalization/localization-rtl.gif differ diff --git a/blazor/datagrid/images/globalization/switch.png b/blazor/datagrid/images/globalization/switch.png new file mode 100644 index 0000000000..fb5d667f72 Binary files /dev/null and b/blazor/datagrid/images/globalization/switch.png differ