IgbGrid および IgbPagenator – 表示を日本語にローカライズする

IgbGrid 本体の日本語化

IgbGrid の表示は、既定では英語表記となっています (下図は IgbGrid の FilterMode パラメーターに FilterMode.ExcelStyleFilter を指定した状態で、フィルター UI を開いてみた様子)。

IgbGrid 本体の表示を日本語化するには以下のようにします。

まずはじめに、プロパティに日本語での表示テキストを設定した、“IgbGridResourceStrings” クラスのオブジェクトを用意します。すべてのプロパティに日本語訳を設定済みの実装例は、こちらから入手できます。下記はその抜粋です。

public static class GridResourceStrings
{
    public static readonly IgbGridResourceStrings JA = new()
    {
        ...
        Igx_grid_filter_doesNotContain = "含まない",
        Igx_grid_filter_startsWith = "で始まる",
        Igx_grid_filter_endsWith = "で終わる",
        Igx_grid_filter_equals = "等しい",
        ...

次に、こうして用意した IgbGridResourceStrings オブジェクトを、IgbGrid の ResourceStrings パラメーターに設定します。

 
<IgbGrid 
    ResourceStrings="GridResourceStrings.JA"
    ...

以上で、IgbGrid の本体各種表示項目が日本語化されます (下図例)。

ページネーション (IgbPagenator) の日本語化

上記の手順で IgGrid 本体が日本語化されますが、ページネーション (IgbPagenator コンポーネント) を使用されている場合は、IgbGrid 本体の日本語化とは別に、IgbPagenator の日本語化が必要です。下図はIgbPagenator を日本語化する前の様子です。

手順は IgbGrid の日本語化と同様で、まずはプロパティに日本語での表示テキストを設定した “IgbPaginatorResourceStrings” クラスのオブジェクトを用意します。すべてのプロパティに日本語訳を設定済みの実装例は、こちらから入手できます。下記はその抜粋です。

public static class PaginatorResourceStrings
{
    public static readonly IgbPaginatorResourceStrings JA = new()
    {
        Igx_paginator_label = "ページごとの項目数",
        Igx_paginator_pager_text = "/",
        ...

あとは、こうして用意した IgbPaginatorResourceStrings オブジェクトを、IgbPagenator の ResourceStrings パラメーターに設定します。

<IgbPagenator
    ResourceStrings="PaginatorResourceStrings.JA"
    ...

以上で、IgbGrid の本体各種表示項目が日本語化されます (下図例)。

全体のソースコード、およびライブデモ

実際に日本語化された様子を、以下のリンク先のライブデモで確認できます。

https://igjp-kb-blazor.github.io/KB10214_IgbGrid_Localize/

IgbGrid および IgbPagenator の表示を日本語にローカライズする実装例の全体は、下記からダウンロードおよび参照頂けます。