Search results

Globalization

Globalization is the combination of internationalization and localization. You can adapt the component to various languages by parsing and formatting the date or number Internationalization and adding culture specific customization to the text Localization.

Load CLDR-Data to the application

  • Open command prompt in your machine.

  • Run the following command in command prompt.

cd /d 'Folder path of your Blazor application'

For example: cd /d  E:\Blazor\WebApplication
  • Make sure that you have installed Node and NPM in your machine before installing the CLDR-Data.

  • To check if you have Node, run this command in command prompt.

node -v
  • If Node is not installed, then you can download and install the Node from this location.

  • To confirm if you have NPM, run this command in command prompt.

npm -v
  • Now, install the CLDR-Data package by using the following command (it installs the CLDR JSON data). To learn more about CLDR-Data, refer to CLDR-Data.
npm install cldr-data --save
  • After installing the package, you can find the culture specific JSON data under the location \node_modules\cldr-data. Then, copy the cldr-data folder into wwwroot folder available inside your Blazor application.

  • Download the required locale packages to render the Blazor Pivot Table component with specified locale. To download the locale definition of Blazor components, use this link.

  • After downloading the ej2-locale package, copy the ej2-locale folder with required local definition file into wwwroot folder available inside your Blazor application. By default, the ej2-locale package contains the localized text for static text present in components like grid, chart, pivot table, tools, and more.

The locale JSON file will look like:

output

Internationalization

Internationalization library is used to globalize number, date, and time values in pivot table component using format strings in the Format. In the below code sample, we set the culture and currency using the LoadLocaleData, SetCulture and SetCurrencyCode methods. By default, pivot table component is displayed in english culture.

    @using Syncfusion.EJ2.Blazor.PivotView;
    @using Syncfusion.EJ2.Blazor
    @using Microsoft.JSInterop;

    <EjsPivotView TValue="ProductDetails">
        <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<PivotViewData.ProductDetails> data { get; set; }
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in  getting started for more details.
        }
        [Inject]
        protected IJSRuntime JsRuntime { get; set; }
        protected override void OnAfterRender()
        {
            this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/de.json").SetCulture("de").SetCurrencyCode("EUR");
        }
    }

output

Localization

Localization library allows you to localize default text content of the pivot table. The pivot table component has static text of some features (like drop and drop region, pivot field list, etc…) that can be changed to other cultures (Arabic, Deutsch, French, etc…) by defining the SetCulture and LoadLocaleData method for translation object

The following are the list of properties and its values used in the pivot table.

Locale Keywords Text
grandTotal Grand Total
total Total
value Value
noValue No value
row Row
column Column
collapse Collapse
expand Expand
rowAxisPrompt Drop row here
columnAxisPrompt Drop column here
valueAxisPrompt Drop value here
filterAxisPrompt Drop filter here
filter Filter
filtered Filtered
sort Sort
filters Filters
rows Rows
columns Columns
values Values
close Close
cancel Cancel
delete Delete
calculatedField Calculated Field
createCalculatedField Create Calculated Field
fieldName Enter the field name
error Error
invalidFormula Invalid formula.
dropText Example: (“Sum(OrderCount)” + “Sum(InStock)”) * 250
dropTextMobile Add fields and edit formula here.
dropAction Calculated field cannot be place in any other region except value axis.
alert Alert
warning Warning
ok OK
search Search
drag Drag
remove Remove
sum Sum
average Average
count Count
min Min
max Max
allFields All Fields
formula Formula
addToRow Add to Row
addToColumn Add to Column
addToValue Add to Value
addToFilter Add to Filter
emptyData No records to display
fieldExist A field already exists in this name. Please enter a different name.
confirmText A calculation field already exists in this name. Do you want to replace it?
noMatches No matches
format Summaries values by
edit Edit
clear Clear
formulaField Drag and drop fields to formula
dragField Drag field to formula

The following are the list of properties and its values used in the field list.

Locale Keywords Text
staticFieldList Pivot Field List
fieldList Field List
dropFilterPrompt Drop filter here
dropColPrompt Drop column here
dropRowPrompt Drop row here
dropValPrompt Drop value here
addPrompt Add field here
adaptiveFieldHeader Choose field
centerHeader Drag fields between axes below:
add add
drag Drag
filter Filter
filtered Filtered
sort Sort
remove Remove
filters Filters
rows Rows
columns Columns
values Values
calculatedField Calculated Field
createCalculatedField Create Calculated Field
fieldName Enter the field name
error Error
invalidFormula Invalid formula.
dropText Example: (“Sum(OrderCount)” + “Sum(InStock)”) * 250
dropTextMobile Add fields and edit formula here.
dropAction Calculated field cannot be place in any other region except value axis.
search Search
close Close
cancel Cancel
delete Delete
alert Alert
warning Warning
ok OK
sum Sum
average Average
count Count
min Min
max Max
allFields All Fields
formula Formula
fieldExist A field already exists in this name. Please enter a different name.
confirmText A calculation field already exists in this name. Do you want to replace it?
noMatches No matches
format Summaries values by
edit Edit
clear Clear
formulaField Drag and drop fields to formula
dragField Drag field to formula

Loading Translations

The following example demonstrates the Pivot Table in Deutsch culture. Here we have used LoadLocaleData method to load the wwwroot/ej2-locale/src/de.json file and SetCulture method to set the culture to de.

    @using Syncfusion.EJ2.Blazor.PivotView;
    @using Syncfusion.EJ2.Blazor
    @using Microsoft.JSInterop;

    <EjsPivotView TValue="ProductDetails">
        <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>
    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in  getting started for more details.
        }
        [Inject]
        protected IJSRuntime JsRuntime { get; set; }
        protected override void OnAfterRender()
        {
            this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/de.json").SetCulture("de");
        }
    }

output

Right-to-left (RTL)

Right-to-left (RTL) provides an option to switch the text direction and layout of the pivot table component from right to left. It improves user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc…). In the below code sample EnableRtl method is used to enable RTL in the pivot table.

@using Microsoft.JSInterop;
@using Syncfusion.EJ2.Blazor.PivotView

   <EjsPivotView TValue="ProductDetails" ShowFieldList="true">
         <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
        [Inject]
        protected IJSRuntime JsRuntime { get; set; }
        protected override void OnAfterRender()
        {
            this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/ar.json").SetCulture("ar");
            this.JsRuntime.Ejs().EnableRipple(true).EnableRtl(true);
        }
    }

output