このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータグリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Blazor グリッドのローカリゼーション

Ignite UI for Blazor データテーブル / データグリッドは、列オプションのポップアップと要約に固有のリソース文字列のローカライズをサポートします。これは、データの翻訳に使用することを意図したものではないことに注意してください。

データグリッドには、列オプションに関連付けられた文字列を割り当てるための SetCustomizedStringAsync が含まれています。グリッドの ActualDataSource プロパティには、集計に必要なリソース文字列を割り当てるためのこのメソッドもあります。

Blazor グリッドローカリゼーションの例

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbGridColumnOptionsModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;

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

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "男")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "カナダ")
            {
                return GetItem(citiesCA);
            }
            else if (country == "フランス")
            {
                return GetItem(citiesFR);
            }
            else if (country == "ポーランド")
            {
                return GetItem(citiesPL);
            }
            else if (country == "アメリカ合衆国")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "男")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

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

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

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

            string countryEn = "";
            if (country == "カナダ")
            {
                countryEn = "Canada";
            }
            else if (country == "フランス")
            {
                countryEn = "France";
            }
            else if (country == "ポーランド")
            {
                countryEn = "Poland";
            }
            else if (country == "アメリカ合衆国")
            {
                countryEn = "USA";
            }
            else if (country == "Japan")
            {
                countryEn = "Japan";
            }
            else if (country == "Germany")
            {
                countryEn = "Germany";
            }
            else
            { // if (country === "United Kingdom") {
                countryEn = "UK";
            }
            return "https://static.infragistics.com/xplatform/images/flags/" + countryEn + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "低い";
            }
            else if (salary < 100000)
            {
                return "平均";
            }
            else
            {
                return "高い";
            }
        }

    }

}cs

using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class EmployeeJA : INotifyPropertyChanged
    {
        public string ID { get; set; }
        public string Address { get; set; }
        public double Age { get; set; }
        public string Gender { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public double Salary { get; set; }
        public double Sales { get; set; }
        public string Income { get; set; }
        public int Index { get; set; }

        public DateTime Birthday { get; set; }
        public List<ProductivityJA> Productivity { get; set; }

        private string _Country;
        public string Country
        {
            get { return _Country; }
            set { if (_Country != value) { OnCountryChanged(value); } }
        }

        public string CountryFlag { get; set; }

        protected void OnCountryChanged(string countryName)
        {
            // syncronizing country name and country flag
            _Country = countryName;
            CountryFlag = DataGeneratorJA.GetCountryFlag(countryName);
            City = DataGeneratorJA.GetCity(countryName);
            OnPropertyChanged("Country");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class ProductivityJA
    {
        public double Value { get; set; }
        public int Week { get; set; }
    }

    public static class EmployeeDataJA
    {
        public static List<EmployeeJA> Create(int? count, bool? useProductivity)
        {
            if (count == null) count = 100;

            var employees = new List<EmployeeJA>();
            for (int i = 0; i < count; i++)
            {
                var age = Math.Round(DataGeneratorJA.GetNumber(20, 40));
                var gender = DataGeneratorJA.GetGender();
                var firstName = DataGeneratorJA.GetNameFirst(gender);
                var lastName = DataGeneratorJA.GetNameLast();
                var street = DataGeneratorJA.GetStreet();
                var country = DataGeneratorJA.GetCountry();
                var city = DataGeneratorJA.GetCity(country);
                var email = firstName.ToLower() + "@" + DataGeneratorJA.GetEmail();
                var photoPath = DataGeneratorJA.GetPhoto(gender);

                var employee = new EmployeeJA
                {
                    Index = i,
                    Address = street + ", " + city,
                    Age = age,
                    Birthday = DataGeneratorJA.GetBirthday(),
                    City = city,
                    Email = email,
                    Gender = gender,
                    ID = DataGeneratorJA.Pad(1001 + i, 4),
                    FirstName = firstName,
                    LastName = lastName,
                    Name = firstName + " " + lastName,
                    Photo = photoPath,
                    Phone = DataGeneratorJA.GetPhone(),
                    Street = DataGeneratorJA.GetStreet(),
                    Salary = DataGeneratorJA.GetNumber(40, 200) * 1000,
                    Sales = DataGeneratorJA.GetNumber(200, 980) * 1000,
                };
                employee.Country = country;

                employee.Income = DataGeneratorJA.GetIncomeRange(employee.Salary);

                if (useProductivity.HasValue && useProductivity.Value)
                {
                    employee.Productivity = GetProductivity(52);
                }
                employees.Add(employee);
            }

            return employees;
        }

        public static List<ProductivityJA> GetProductivity(int weekCount)
        {
            var productivity = new List<ProductivityJA>();

            for (var w = 1; w <= weekCount; w++)
            {
                var value = DataGeneratorJA.GetNumber(-50, 50);
                var prod = new ProductivityJA
                {
                    Value = value,
                    Week = w
                };
                productivity.Add(prod);
            };

            return productivity;
        }
    }
}cs


@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.RenderTree
@using Microsoft.AspNetCore.Components.Web
@inject HttpClient Http

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    @if (Employees != null)
    {
        <div style="overflow: hidden">
            <IgbDataGrid Height="100%" Width="100%"
                    @ref="@DataGridRef"
                    RowHeight="50"
                    DataSource="Employees"
                    AutoGenerateColumns="false"
                    IsColumnOptionsEnabled="true"
                    IsGroupCollapsable="true"
                    ActivationMode="GridActivationMode.Cell"
                    SummaryScope="@SummaryScope.Root"
                    SelectionMode="DataGridSelectionMode.SingleRow">

                <IgbImageColumn IsEditable="false" Width="@("*>120")" Field="Photo" HeaderText="写真" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                            HorizontalAlignment="@CellContentHorizontalAlignment.Stretch"  />

                <IgbTextColumn Width="@("*>130")" Field="Name" HeaderText="名前" />

                <IgbNumericColumn Width="@("*>130")" Field="Sales"
                                HorizontalAlignment="@CellContentHorizontalAlignment.Center" HeaderText="売上高" />

                <IgbNumericColumn Width="@("*>130")" Field="Salary" PositivePrefix="$"
                            ShowGroupingSeparator="true"
                            MaxFractionDigits="0"
                            MinFractionDigits="0"
                            HeaderText="給料"/>

                <IgbNumericColumn Width="100" Field="Age" HorizontalAlignment="@CellContentHorizontalAlignment.Center" HeaderText="年齢"/>
                <IgbDateTimeColumn Width="@("*>140")" Field="Birthday" HeaderText="生年月日" />

                <IgbImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="国旗" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                            HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

                <IgbTextColumn Width="@("*>170")" Field="Address" HeaderText="住所"/>
                <IgbTextColumn Width="@("*>130")" Field="Phone" HeaderText="電話"/>

                <IgbTextColumn Width="@("*>120")" Field="Income" HeaderText="所得"/>

            </IgbDataGrid>
        </div>
    }
</div>

@code {

    private List<EmployeeJA> Employees;
    private String GridStrings;
    private IgbDataGrid _grid;
    private IgbDataGrid DataGridRef
    {
        get { return _grid; }
        set { _grid = value; Task.Delay(1).ContinueWith((t) => this.OnDataGridRef()); StateHasChanged(); }
    }

    protected override void OnInitialized()
    {

        this.Employees = EmployeeDataJA.Create(100, false);
    }

    private async Task OnDataGridRef()
    {
        var countryGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "国" };
        var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "所得" };
        this._grid.GroupDescriptions.Add(countryGroup);
        this._grid.GroupDescriptions.Add(incomeGroup);

        var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average };
        var photoSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count };
        var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum };
        var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max };

        this._grid.SummaryDescriptions.Add(ageSummary);
        this._grid.SummaryDescriptions.Add(photoSummary);
        this._grid.SummaryDescriptions.Add(salarySummary);
        this._grid.SummaryDescriptions.Add(saleSummary);

        //Specific resource strings for Column-Options
        await DataGridRef.SetCustomizedStringAsync("en", DataGridResourceStrings());
        //Specific resource strings for Summaries
        await DataGridRef.ActualDataSource.SetCustomizedStringAsync("en", DataGridResourceStrings());
        await DataGridRef.InvalidateVisibleRowsAsync();
    }

    public string DataGridResourceStrings()
    {
        GridStrings =
            "{\"Apply\":\"適用\"," +
            "\"Cancel\":\"キャンセル\"," +
            "\"Clear_Column_Filter\":\"列フィルターをクリア\"," +
            "\"Column_Move\":\"移動\"," +
            "\"Column_Move_Left\":\"左\"," +
            "\"Column_Move_Right\":\"右\"," +
            "\"Column_Options_Summaries\":\"集計\"," +
            "\"Column_Options_Summary_Average\":\"平均\"," +
            "\"Column_Options_Summary_Count\":\"カウント\"," +
            "\"Column_Options_Summary_Maximum\":\"最大値\"," +
            "\"Column_Options_Summary_Minimum\":\"最小値\"," +
            "\"Column_Options_Summary_Sum\":\"合計値\"," +
            "\"Column_Pin\":\"ピン固定\"," +
            "\"Column_Pin_Left\":\"左\"," +
            "\"Column_Pin_Right\":\"右\"," +
            "\"Column_Sort\":\"ソート\"," +
            "\"Column_Sort_Ascending\":\"昇順\"," +
            "\"Column_Sort_Descending\":\"降順\"," +
            "\"ComparisonOperator_Bottom\":\"下\"," +
            "\"ComparisonOperator_BottomPercentile\":\"下位の百分位数\"," +
            "\"ComparisonOperator_Contains\":\"～を含む\"," +
            "\"ComparisonOperator_DoesNotContain\":\"～を含まない\"," +
            "\"ComparisonOperator_DoesNotEndWith\":\"～で終わらない\"," +
            "\"ComparisonOperator_DoesNotMatch\":\"～と一致しない\"," +
            "\"ComparisonOperator_DoesNotStartWith\":\"～で始まらない\"," +
            "\"ComparisonOperator_Empty\":\"空\"," +
            "\"ComparisonOperator_EndsWith\":\"次の値で終わる\"," +
            "\"ComparisonOperator_Equals\":\"等しい\"," +
            "\"ComparisonOperator_False\":\"False\"," +
            "\"ComparisonOperator_GreaterThan\":\"次の値より大きい\"," +
            "\"ComparisonOperator_GreaterThanOrEqualTo\":\"次の値より大きいまたは等しい\"," +
            "\"ComparisonOperator_LastMonth\":\"先月\"," +
            "\"ComparisonOperator_LastQuater\":\"前四半期\"," +
            "\"ComparisonOperator_LastWeek\":\"先週\"," +
            "\"ComparisonOperator_LastYear\":\"昨年\"," +
            "\"ComparisonOperator_LessThan\":\"次の値より小さい\"," +
            "\"ComparisonOperator_LessThanOrEqualTo\":\"次の値より小さいまたは等しい\"," +
            "\"ComparisonOperator_NextMonth\":\"翌月\"," +
            "\"ComparisonOperator_NextQuater\":\"翌四半期\"," +
            "\"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\":\"True\"," +
            "\"ComparisonOperator_Yesterday\":\"昨日\"," +
            "\"Filter_Columns_List\":\"列リストのフィルター...\"," +
            "\"Search\":\"検索\"," +
            "\"Select_All\":\"(すべて選択)\"," +
            "\"DataSource_Summary_Avg\":\"平均\"," +
            "\"DataSource_Summary_Count\":\"カウント\"," +
            "\"DataSource_Summary_Max\":\"最大値\"," +
            "\"DataSource_Summary_Min\":\"最小値\"," +
            "\"DataSource_Summary_Sum\":\"合計値\"}";
        return GridStrings;
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

リソース文字列

これは、グリッドをローカライズするための文字列の完全なリストです。

列オプションの文字列

Apply
Cancel
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
Search
Select_All
ComparisonOperator_Bottom
ComparisonOperator_BottomPercentile
ComparisonOperator_Contains
ComparisonOperator_DoesNotContain
ComparisonOperator_DoesNotEndWith
ComparisonOperator_DoesNotMatch
ComparisonOperator_DoesNotStartWith
ComparisonOperator_Empty
ComparisonOperator_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

集計の文字列

DataSource_Summary_Avg
DataSource_Summary_Count
DataSource_Summary_Max
DataSource_Summary_Min
DataSource_Summary_Sum

API リファレンス

ActualDataSource
SetCustomizedStringAsync