Localización de React Grid

La Ignite UI for React permite localizar las cadenas de recursos específicas de las ventanas emergentes y los resúmenes de las opciones de columna. Tenga en cuenta que esto no está destinado a traducir los datos ni es posible hacerlo.

React Grid Localization Example

EXAMPLE

DataGridLocaleJa.ts

DataGridSharedData.ts

TSX

export class DataGridLocalizationJa {
    [key: string]: string;
    "Apply": string = "適用";
    "Cancel": string = "キャンセル";
    "Clear_Column_Filter": string = "列フィルターをクリア";
    "Column_Move": string = "移動";
    "Column_Move_Left": string = "左";
    "Column_Move_Right": string = "右";
    "Column_Pin": string = "ピン固定";
    "Column_Pin_Left": string = "左";
    "Column_Pin_Right": string = "右";
    "Column_Sort": string = "ソート";
    "Column_Sort_Ascending": string = "昇順";
    "Column_Sort_Descending": string = "降順";
    "Filter_Columns_List": string = "列リストのフィルター";
    "Search": string = "検索";
    "Select_All": string = "すべて選択";
    "ComparisonOperator_Bottom": string = "下";
    "ComparisonOperator_BottomPercentile": string = "下位の百分位数";
    "ComparisonOperator_Contains": string = "～を含む";
    "ComparisonOperator_DoesNotContain": string = "～を含まない";
    "ComparisonOperator_DoesNotEndWith": string = "～で終わらない";
    "ComparisonOperator_DoesNotMatch": string = "～と一致しない";
    "ComparisonOperator_DoesNotStartWith": string = "～で始まらない";
    "ComparisonOperator_Empty": string = "空";
    "ComparisonOperator_EndsWith": string = "次の値で終わる";
    "ComparisonOperator_Equals": string = "等しい";
    "ComparisonOperator_False": string = "False";
    "ComparisonOperator_GreaterThan": string = "次の値より大きい";
    "ComparisonOperator_GreaterThanOrEqualTo": string = "次の値より大きいまたは等しい";
    "ComparisonOperator_LastMonth": string = "先月";
    "ComparisonOperator_LastQuater": string = "前四半期";
    "ComparisonOperator_LastWeek": string = "先週";
    "ComparisonOperator_LastYear": string = "昨年";
    "ComparisonOperator_LessThan": string = "次の値より小さい";
    "ComparisonOperator_LessThanOrEqualTo": string = "次の値より小さいまたは等しい";
    "ComparisonOperator_NextMonth": string = "翌月";
    "ComparisonOperator_NextQuater": string = "翌四半期";
    "ComparisonOperator_NextWeek": string = "来週";
    "ComparisonOperator_NextYear": string = "翌年";
    "ComparisonOperator_NotEmpty": string = "空ではない";
    "ComparisonOperator_NotEquals": string = "次の値に等しくない";
    "ComparisonOperator_StartsWith": string = "～で始まる";
    "ComparisonOperator_ThisMonth": string = "今月";
    "ComparisonOperator_ThisQuarter": string = "本四半期";
    "ComparisonOperator_ThisWeek": string = "今週";
    "ComparisonOperator_ThisYear": string = "今年";
    "ComparisonOperator_Today": string = "今日";
    "ComparisonOperator_Tomorrow": string = "明日";
    "ComparisonOperator_Top": string = "上";
    "ComparisonOperator_TopPercentile": string = "上位の百分位数";
    "ComparisonOperator_True": string = "True";
    "ComparisonOperator_Yesterday": string = "昨日";
    "Column_Options_Summary_Average": string = "平均";
    "Column_Options_Summary_Count": string = "カウント";
    "Column_Options_Summary_Maximum": string = "最大値";
    "Column_Options_Summary_Minimum": string = "最小値";
    "Column_Options_Summary_Sum": string = "合計値";
    "Column_Options_Summaries": string = "集計";
}

export class DataGridSummariesLocalizationJa {
    [key: string]: string;
    "DataSource_Summary_Avg": string = "平均"; 
    "DataSource_Summary_Count": string = "カウント"; 
    "DataSource_Summary_Max": string = "最大値"; 
    "DataSource_Summary_Min": string = "最小値"; 
    "DataSource_Summary_Sum": string = "合計値";
}

export class DataGridDateTimeColumnLocalizationJa {
    [key: string]: string;
    "April_Full" = "4月";
	"April_Short" = "4月";
	"August_Full" = "August";
	"August_Short" = "8月";
	"December_Full" = "December";
	"December_Short" = "12月";
	"February_Full" = "February";
	"February_Short" = "2月";
	"Friday_Full" = "Friday";
	"Friday_Short" = "Fri";
	"Friday_Single" = "金";
	"January_Full" = "January";
	"January_Short" = "1月";
	"July_Full" = "July";
	"July_Short" = "7月";
	"June_Full" = "June";
	"June_Short" = "6月";
	"March_Full" = "March";
	"March_Short" = "3月";
	"May_Full" = "May";
	"May_Short" = "5月";
	"Monday_Full" = "Monday";
	"Monday_Short" = "Mon";
	"Monday_Single" = "月";
	"November_Full" = "November";
	"November_Short" = "11月";
	"October_Full" = "October";
	"October_Short" = "10月";
	"Saturday_Full" = "Saturday";
	"Saturday_Short" = "Sat";
	"Saturday_Single" = "土";
	"September_Full" = "September";
	"September_Short" = "9月";
	"Sunday_Full" = "Sunday";
	"Sunday_Short" = "Sun";
	"Sunday_Single" = "日";
	"Thursday_Full" = "Thursday";
	"Thursday_Short" = "Thu";
	"Thursday_Single" = "木";
	"Today" = "Today";
	"Tuesday_Full" = "Tuesday";
	"Tuesday_Short" = "Tue";
	"Tuesday_Single" = "火";
	"Wednesday_Full" = "Wednesday";
	"Wednesday_Short" = "Wed";
	"Wednesday_Single" = "水";
}

export class DataGridMultiColumnComboBoxLocalizationJa {
    [key: string]: string;
    "NoMatches" = "一致なし";
}
tsコピー

export class DataGridSharedData {

    public static getEmployees(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const employees: any[] = [];
        let maleCount: number = 0;
        let femaleCount: number = 0;
        for (let i = 0; i < count; i++) {
            const age: number = Math.round(this.getRandomNumber(20, 40));
            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(this.countries);
            const city: string = this.getRandomCity(country);
            const generation = Math.floor(age / 10) * 10 + "s";
            const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails);
            const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites);
            let photoPath: any;

            if (gender === "男") {
                maleCount++;
                if (maleCount > 26) {
                    maleCount = 1;
                }
                photoPath = this.getPhotoMale(maleCount);
            }
            else {
                femaleCount++;
                if (femaleCount > 24) {
                    femaleCount = 1;
                }
                photoPath = this.getPhotoFemale(femaleCount);
            }

            let person: any = {};
            person.Address = street + "," + city;
            person.Age = age;
            person.Birthday = this.getBirthday(age);
            person.City = city;
            person.Country = country;
            person.CountryFlag = this.getCountryFlag(country);
            person.Email = email;
            person.FirstName = firstName;
            person.Gender = this.getGenderPhoto(gender);
            person.Generation = generation;
            person.ID = this.pad(i + 1, 5);
            person.LastName = lastName;
            person.Name = firstName + " " + lastName;
            person.Phone = this.getRandomPhone();
            person.Photo = photoPath;
            person.Street = street;
            person.Salary = this.getRandomNumber(40, 200) * 1000;
            person.Sales = this.getRandomNumber(200, 980) * 1000;
            person.Website = website;
            person.Productivity = this.getProductivity();

            if (person.Salary < 50000) {
                person.Income = "低い";
            } else if (person.Salary < 100000) {
                person.Income = "平均";
            } else {
                person.Income = "高い";
            }

            employees.push(person);
        }
        return employees;
    }

    public static getProductivity(weekCount?: number): any[] {
        if (weekCount === undefined) {
            weekCount = 52;
        }
        const productivity: any[] = [];
        for (let w = 0; w < weekCount; w++) {
            const value = this.getRandomNumber(-50, 50);
            productivity.push({Value: value, Week: w});
        }
        return productivity;
    }

    public static getSales(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const names: string[] = [
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard",
            "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ];
        const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"];
        const status: string[] = ["梱包中", "出荷完了", "配達完了"];
        const sales: any[] = [];

        for (let i = 0; i < count; i++) {
            const price = this.getRandomNumber(100, 900);
            const items = this.getRandomNumber(10, 80);
            const value = price * items;
            const margin = this.getRandomNumber(3, 10);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                BundlePrice: price,
                ProductPrice: price,
                Margin: margin,
                OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()),
                OrderItems: items,
                OrderValue: value, //  Math.round(value / 1000) + "," + Math.round(value % 1000),
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                Profit: profit,
                Countries: country,
                CountryFlag: this.getCountryFlag(country),
                Status: this.getRandomItem(status)
            });
        }
        return sales;
    }

    public static getHouses(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const houses: any[] = [];
        const property: string[] = [ "タウンハウス", "戸建て", "マンション", "別荘"];
        const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"];
        const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"];


        for (let i = 0; i < count; i++) {
            const year: number = this.getRandomNumber(1950, 2015);
            const age: number = 2020 - year;

            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const initials = firstName.substr(0, 1).toLowerCase();
            const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails);

            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(countries);
            const city: string = this.getRandomCity(country);

            houses.push({
                Address: street + "," + city,
                Age: age,
                Agent: firstName + " " + lastName,
                Area: this.getRandomNumber(50, 300),
                Baths: this.getRandomNumber(1, 3),
                Built: year,
                City: city,
                Country: country,
                CountryFlag: this.getCountryFlag(country),
                Email: email,
                ID: this.pad(i + 1, 5),
                Phone: this.getRandomPhone(),
                Price: this.getRandomNumber(210, 900) * 1000,
                Property: this.getRandomItem(property),
                Rooms: this.getRandomNumber(2, 5),
                SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()),
                Street: street,
            });
        }
        return houses;
    }

    private static websites: string[] = [ ".com", ".gov", ".edu", ".org"];
    private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"];
    private static genders: string[] = ["男", "女"];
    private static maleNames: string[] = ["カイル", "オスカー", "ラルフ", "マイク", "ビル", "フランク", "ハワード", "ジャック", "ラリー", "ピート", "スティーブ", "ヴィンス", "マーク", "アレックス", "マックス", "ブライアン", "クリス", "アンドリュー", "マーティン", "マイク", "スティーブ", "グレン", "ブルース"];
    private static femaleNames: string[] = ["ジーナ", "アイリーン", "ケイティ", "ブレンダ", "ケーシー", "フィオナ", "ホリー", "ケイト", "リズ", "パメラ", "ネリー", "マリサ", "モニカ", "アンナ", "ジェシカ", "ソフィア", "イザベラ", "マーゴ", "ジェーン", "オードリー", "サリー", "メラニー", "グレタ", "オーロラ", "サリー"];
    private static lastNames: string[] = ["アダムス", "クローリー", "エリス", "マルチネス", "アーバイン", "マクスウェル", "クラーク", "オーエンス", "ルーニー", "リンカーン", "トーマス", "スペーシー", "モーガン", "キング", "ニュートン", "フィッツジェラルド", "ホームズ", "ジェファーソン", "ランドリー", "ベリー", "ペレス", "スペンサー", "スター", "カーター", "エドワーズ", "スターク", "ジョンソン", "フィッツ", "チーフ", "ブランク", "ペリー", "ストーン", "ウィリアムズ", "レーン", "ジョブズ", "アダムス", "パワー", "テスラ"];
    private static countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド"];
    private static citiesUS: string[] = ["ニューヨーク", "ロサンゼルス", "マイアミ", "サンフランシスコ", "サンディエゴ", "ラスベガス"];
    private static citiesUK: string[] = ["ロンドン", "リバプール", "マンチェスター"];
    private static citiesFR: string[] = ["パリ", "マルセイユ", "リヨン"];
    private static citiesCA: string[] = ["トロント", "バンクーバー", "モントリオール"];
    private static citiesPL: string[] = ["クラクフ", "ワルシャワ", "ヴロツワフ", "グダニスク"];
    private static citiesJP: string[] = ["東京", "大阪", "京都", "横浜"];
    private static citiesGR: string[] = ["ベルリン", "ボン", "ケルン", "ミュンヘン", "ハンブルク"];
    private static roadSuffixes: string[] = ["通り", "筋", "小路"];
    private static roadNames: string[] = ["メイン", "ガーデン", "ブロード", "オーク", "シダー", "パーク", "パイン", "エルム", "マーケット", "ヒル"];

    private static getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    private static getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    private static getRandomDate(start: Date, end: Date): Date {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
    }

    private static getRandomPhone(): string {
        const phoneCode = this.getRandomNumber(100, 900);
        const phoneNum1 = this.getRandomNumber(100, 900);
        const phoneNum2 = this.getRandomNumber(1000, 9000);
        const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
        return phone;
    }

    private static getRandomGender(): string {
        return this.getRandomItem(this.genders);
    }

    private static getRandomNameLast(): string {
        return this.getRandomItem(this.lastNames);
    }

    private static getRandomNameFirst(gender: string): string {
        if (gender === "男") {
            return this.getRandomItem(this.maleNames);
        }
        else {
            return this.getRandomItem(this.femaleNames);
        }
    }

    private static getRandomCity(country: string): string {
        if (country === "カナダ") {
            return this.getRandomItem(this.citiesCA);
        } else if (country === "フランス") {
            return this.getRandomItem(this.citiesFR);
        } else if (country === "ポーランド") {
            return this.getRandomItem(this.citiesPL);
        } else if (country === "アメリカ合衆国") {
            return this.getRandomItem(this.citiesUS);
        } else if (country === "日本") {
            return this.getRandomItem(this.citiesJP);
        } else if (country === "ドイツ") {
            return this.getRandomItem(this.citiesGR);
        } else {
            return this.getRandomItem(this.citiesUK);
        }
    }

    private static getRandomStreet(): string {
        const num = Math.round(this.getRandomNumber(100, 300)).toString();
        const road = this.getRandomItem(this.roadNames);
        const suffix = this.getRandomItem(this.roadSuffixes);
        return num + " " + road + " " + suffix;
    }

    private static getBirthday(age: number): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear() - age;
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    private static getPhotoMale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people//GUY' + this.pad(id, 2) + '.png';
    }

    private static getPhotoFemale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this.pad(id, 2) + '.png';
    }

    private static getGenderPhoto(gender: string): string {
        // Note: Mapping between En and Ja.
        // This comment is for the sake of coding and debugging.
        // private static genders: string[] = ["male", "female"];
        // private static genders: string[] = ["男", "女"];

        const genderEn = (gender == "男" ? "male" : "female");
        return 'https://static.infragistics.com/xplatform/images/genders/' + genderEn + '.png';
    }

    private static getCountryFlag(country: string): string {
        // Note: Mapping between En and Ja.
        // This comment is for the sake of coding and debugging.
        // const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", "Japan", "Germany"];
        // const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"];

        let countryEn = "";
        if (country == "カナダ")
        {
            countryEn = "Canada";
        }
        else if (country == "フランス")
        {
            countryEn = "France";
        }
        else if (country == "ポーランド")
        {
            countryEn = "Poland";
        }
        else if (country == "アメリカ合衆国")
        {
            countryEn = "USA";
        }
        else if (country == "日本")
        {
            countryEn = "Japan";
        }
        else if (country == "ドイツ")
        {
            countryEn = "Germany";
        }
        else
        { // if (country === "United Kingdom") {
            countryEn = "UK";
        }

        return 'https://static.infragistics.com/xplatform/images/flags/' + countryEn + '.png';
    }

    private static pad(num: number, size: number): string{
        let s = num + "";
        while (s.length < size) {
            s = "0" + s;
        }
        return s;
    }

}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataGridModule } from "@infragistics/igniteui-react-grids";
import { IgrDataGrid } from "@infragistics/igniteui-react-grids";
import { IgrColumnGroupDescription } from "@infragistics/igniteui-react-grids";
import { IgrColumnSummaryDescription } from "@infragistics/igniteui-react-grids"
import { IgrComboBoxColumn } from "@infragistics/igniteui-react-grids";
import { IgrTextColumn } from "@infragistics/igniteui-react-grids";
import { IgrNumericColumn } from "@infragistics/igniteui-react-grids";
import { IgrDateTimeColumn } from "@infragistics/igniteui-react-grids";
import { DataSourceSummaryOperand } from "@infragistics/igniteui-react-core";
import { IgrGridColumnOptionsModule } from "@infragistics/igniteui-react-grids";
import { Localization } from "@infragistics/igniteui-react-core";
import { DataGridSharedData } from './DataGridSharedData';

// importing localization data:
import { DataGridLocalizationJa } from './DataGridLocaleJa';
import { DataGridSummariesLocalizationJa } from './DataGridLocaleJa';
import { DataGridDateTimeColumnLocalizationJa } from './DataGridLocaleJa';
import { DataGridMultiColumnComboBoxLocalizationJa } from './DataGridLocaleJa';

IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();

export default class DataGridLocalization extends React.Component<any, any> {

    public data: any[];
    public grid: IgrDataGrid;
    public comboColumn: IgrComboBoxColumn;
    public countryList: any[] = [];
    public countryLookup = new Map<string, any>();

    constructor(props: any) {
        super(props);
       
        this.data = DataGridSharedData.getSales();

        // If your browser language is JA then you should use "ja" after eg."DataGrid-ja" etc.  The grid will automatically look for the correct
        // suffix based on what the browser language is. This means you could force the grid to use the Japanese resources for whatever
        // the browser culture is by registering it for each language.

        //Localization.register("DataGrid-ja", new CustomDataGridLocaleJa());

        //Register custom strings for column options in the DataGrid
        Localization.register("DataGrid-en", new DataGridLocalizationJa());

        //Register custom strings for summary cells in the DataGrid
        Localization.register("DataVisualization-en", new DataGridSummariesLocalizationJa());

        //Register custom strings for date-time column in the DataGrid
        Localization.register("Calendar-en", new DataGridDateTimeColumnLocalizationJa());

        //Register custom strings for combo-column in the DataGrid
        Localization.register("MultiColumnComboBox-en", new DataGridMultiColumnComboBoxLocalizationJa());

    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDataGrid
                    ref={this.onGridRef}
                    summaryScope = "Root"
                    groupSummaryDisplayMode = "RowBottom"
                    height="100%"
                    width="100%"
                    autoGenerateColumns="false"
                    isGroupCollapsable="true"
                    groupHeaderDisplayMode = "combined"
                    isColumnOptionsEnabled="true"
                    dataSource={this.data}>
                        <IgrNumericColumn field="ProductID" width="*>120" headerText="製品番号" horizontalAlignment="center" />
                        <IgrTextColumn field="ProductName" width="*>130" headerText="製品"/>
                        <IgrNumericColumn positivePrefix="$" field="BundlePrice" width="*>120" showGroupingSeparator="true" headerText="価格" />
                        <IgrNumericColumn field="OrderItems" width="*>140" headerText="注文"/>
                        <IgrNumericColumn field="OrderValue" width="*>160" showGroupingSeparator="true" headerText="注文合計"
                        positivePrefix="$"  />
                        <IgrDateTimeColumn field="OrderDate" width="*>150" headerText="注文日"
                        horizontalAlignment="right"  />
                        <IgrNumericColumn field="Profit" width="*>140" showGroupingSeparator="true" headerText="利益"
                        positivePrefix="$"  />
                        <IgrComboBoxColumn dataSource={this.countryList} field="Countries" textField="Countries" valueField="Countries" width="*>170" headerText="出荷国"/>
                </IgrDataGrid>
            </div>
        );
    }

    public onGridRef = (grid: IgrDataGrid) => {
        if (!grid) { return; }

        this.grid = grid;
        this.grid.actualDataSource.isSectionExpandedDefault = true;
    }

    public onCountryColumnRef = (column: IgrComboBoxColumn) => {
        if (!column) { return; }

        this.comboColumn = column;
    }

    public componentDidMount() {
        window.addEventListener('load', this.onLoad);
    }

    public onLoad = () => {

        this.data.forEach(sales => {
            if (!this.countryLookup.has(sales.Countries)) {
                this.countryLookup.set(sales.Countries, sales);
                this.countryList.push(sales);
            }
        });
       
        const productGroup = new IgrColumnGroupDescription();
        productGroup.field = "ProductName";
        productGroup.displayName = "商品名";
        this.grid.groupDescriptions.add(productGroup);

        const productCount = new IgrColumnSummaryDescription();
        productCount.field = "ProductName";
        productCount.displayName = "商品名"
        productCount.operand = DataSourceSummaryOperand.Count;
        this.grid.summaryDescriptions.add(productCount);

        const priceMin = new IgrColumnSummaryDescription();
        priceMin.field = "BundlePrice";
        priceMin.displayName = "価格"
        priceMin.operand = DataSourceSummaryOperand.Min;
        priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(priceMin);

        const priceMax = new IgrColumnSummaryDescription();
        priceMax.field = "BundlePrice";
        priceMax.displayName = "価格";
        priceMax.operand = DataSourceSummaryOperand.Max;
        priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(priceMax);

        const orderSum = new IgrColumnSummaryDescription();
        orderSum.field = "OrderItems";
        orderSum.displayName = "アイテムを注文する";
        orderSum.operand = DataSourceSummaryOperand.Sum;
        this.grid.summaryDescriptions.add(orderSum);

        const orderValueSum = new IgrColumnSummaryDescription();
        orderValueSum.field = "OrderValue";
        orderValueSum.displayName = "オーダー値";
        orderValueSum.operand = DataSourceSummaryOperand.Sum;
        orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0});
        this.grid.summaryDescriptions.add(orderValueSum);

        const orderValueAvg = new IgrColumnSummaryDescription();
        orderValueAvg.field = "OrderValue";
        orderValueAvg.displayName = "オーダー値";
        orderValueAvg.operand = DataSourceSummaryOperand.Average;
        orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(orderValueAvg);

        const orderDateMin = new IgrColumnSummaryDescription();
        orderDateMin.field = "OrderDate";
        orderDateMin.displayName = "注文日";
        orderDateMin.operand = DataSourceSummaryOperand.Min;
        orderDateMin.calculatorDisplayName = "First"
        orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN');
        this.grid.summaryDescriptions.add(orderDateMin);

        const orderDateMax = new IgrColumnSummaryDescription();
        orderDateMax.field = "OrderDate";
        orderDateMax.displayName = "注文日";
        orderDateMax.operand = DataSourceSummaryOperand.Max;
        orderDateMax.calculatorDisplayName = "Last"
        orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN');
        this.grid.summaryDescriptions.add(orderDateMax);

        const sum1 = new IgrColumnSummaryDescription();
        sum1.field = "Profit";
        sum1.displayName = "利益";
        sum1.operand = DataSourceSummaryOperand.Sum;
        sum1.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(sum1);

        const avg2 = new IgrColumnSummaryDescription();
        avg2.field = "Profit";
        avg2.displayName = "利益";
        avg2.operand = DataSourceSummaryOperand.Average;
        avg2.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(avg2);

    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataGridLocalization/>);
tsxコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Resource Strings

Esta es la lista completa de cadenas para localizar la cuadrícula.

Column Option Strings

• Apply
• Cancelar
• Clear_Column_Filter
• Column_Move
• Column_Move_Left
• Column_Move_Right
• Column_Pin
• Column_Pin_Left
• Column_Pin_Right
• Column_Sort
• Column_Sort_Ascending
• Column_Sort_Descending
• Filter_Columns_List
• Buscar
• Seleccionar todo
• ComparisonOperator_Bottom
• ComparisonOperator_BottomPercentile
• ComparisonOperator_Contains
• ComparisonOperator_DoesNotContain
• ComparaciónOperator_DoesNotEndWith
• ComparisonOperator_DoesNotMatch
• ComparisonOperator_DoesNotStartWith
• ComparisonOperator_Empty
• ComparaciónOperator_EndsWith
• ComparisonOperator_Equals
• ComparisonOperator_False
• ComparisonOperator_GreaterThan
• ComparisonOperator_GreaterThanOrEqualTo
• ComparisonOperator_LastMonth
• ComparisonOperator_LastQuarter
• ComparisonOperator_LastWeek
• ComparisonOperator_LastYear
• ComparisonOperator_LessThan
• ComparisonOperator_LessThanOrEqualTo
• ComparisonOperator_NextMonth
• ComparisonOperator_NextQuarter
• ComparisonOperator_NextWeek
• ComparisonOperator_NextYear
• ComparisonOperator_NotEmpty
• ComparisonOperator_NotEquals
• ComparisonOperator_StartsWith
• ComparisonOperator_ThisMonth
• ComparisonOperator_ThisQuarter
• ComparisonOperator_ThisWeek
• ComparisonOperator_ThisYear
• ComparisonOperator_Today
• ComparisonOperator_Tomorrow
• ComparisonOperator_Top
• ComparisonOperator_TopPercentile
• ComparisonOperator_True
• ComparisonOperator_Yesterday
• Column_Options_Summary_Average
• Column_Options_Summary_Count
• Column_Options_Summary_Maximum
• Column_Options_Summary_Minimum
• Column_Options_Summary_Sum
• Column_Options_Summaries

Summary Strings

• DataSource_Summary_Avg
• DataSource_Summary_Count
• DataSource_Summary_Max
• DataSource_Summary_Min
• DataSource_Summary_Sum

Date-Time Column Strings

• January_Full
• January_Short
• February_Full
• February_Short
• marzo_lleno
• marzo_corto
• April_Full
• April_Short
• May_Full
• May_Short
• June_Full
• June_Short
• July_Full
• July_Short
• August_Full
• August_Short
• September_Full
• September_Short
• October_Full
• October_Short
• November_Full
• November_Short
• December_Full
• December_Short
• Monday_Full
• Monday_Short
• Monday_Single
• Thursday_Single
• Hoy
• Tuesday_Full
• martes_corto
• Tuesday_Single
• Wednesday_Full
• Wednesday_Short
• Wednesday_Single
• Thursday_Full
• Thursday_Short
• Friday_Full
• Friday_Short
• Friday_Single
• Saturday_Full
• Saturday_Short
• Saturday_Single
• Sunday_Full
• Sunday_Short
• Sunday_Single

ComboBox Column Strings

• NoMatches

API References

• ActualDataSource
• SetCustomizedStringAsync