Blazor Grid 列タイプの概要
Blazor Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。
Blazor Grid 列タイプの例
Blazor Grid デフォルト テンプレート
データ型固有のテンプレートを有効にする場合、列の DataType
入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 DataType
のデフォルト値であるためです)。
次に、各 DataType
のデフォルト テンプレートについて説明します。
String (文字列)
この列 DataType
はセル値の外観または書式を変更しません。
Number (数値)
DataType
が number に設定されている場合、セル値はアプリケーションまたはグリッドの Locale
設定に基づいて書式設定され、PipeArgs
プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:
- 小数点後の桁数。
,
または.
の少数桁の区切り文字
<IgbColumn Field="Sales" DataType="GridColumnDataType.Number" PipeArgs=formatOptions></IgbColumn>
@code {
private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" };
}
DateTime、Date and Time (日付と時刻)
日付部分の外観は、Locale
の形式または PipeArgs
入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。
- format - 日付の書式設定のデフォルト値は
'mediumDate'
です。その他の利用可能なオプション'short'
、'long'
、'shortDate'
、'fullDate'
、'longTime'
、'fullTime'
などです。 - timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
<IgbColumn Field="Date" DataType="GridColumnDataType.Date" PipeArgs=formatDateOptions></IgbColumn>
@code {
private IgbColumnPipeArgs formatDateOptions = new IgbColumnPipeArgs()
{
/** The date/time components that a date column will display, using predefined options or a custom format string. */
/** e.g 'dd/mm/yyyy' or 'shortDate' **/
Format = "longDate",
/** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
Timezone = "GMT"
};
}
利用可能なタイムゾーン:
タイムゾーン | 値 |
---|---|
Alpha Time Zone | ‘UTC+1’ |
Australian Central Time | ‘UTC+9:30/ +10:30’ |
Arabia Standard Time | ‘UTC+3’ |
Central Standard Time | ‘UTC-6’ |
China Standard Time | ‘UTC+8’ |
Delta Time Zone | ‘UTC+4’ |
Greenwich Mean Time | ‘UTC+0’ |
Gulf Standard Time | ‘UTC+4’ |
Hawaii Standard Time | ‘UTC-10’ |
India Standard Time | ‘UTC+4’ |
IgbGrid
は、Date オブジェクト、数値 (ミリ秒) または ISO 日付/時刻文字列の日付値を受け取ります。このセクションは、カスタム表示書式を構成する方法を示します。
サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの time 部分の書式設定オプションのサンプルです。
// Time format with equivalent example
@code {
public Dictionary<string, string> timeFormats = new() {
{ "shortTime", "h:mm a" },
{ "mediumTime", "h:mm:ss a" },
{ "longTime", "h:mm:ss a z" },
{ "fullTime", "h:mm:ss a zzzz" },
};
}
セルの編集
列タイプに基づくセル編集に関しては、別のエディターが表示されます。
DateTime
-DateTimeEditor
が使用されます。このエディターは、DateTime
オブジェクトの入力要素部分のマスクを提供します。Date
-IgbDatePicker
が使用されます。Time
-TimePicker
が使用されます。
フィルタリング
クイック フィルタリング/Excel スタイル フィルタリングに関しては、上記と同じエディターが使用されます。これらは、各タイプが公開する次のフィルタリング オペランドです。
DateTime
およびDate
- Equals、Does Not Equal、Before、After、Today、Yesterday、This Month、Last Month、Next Month、This Year、Last Year、Next Year、Empty、Not Empty、Null、Not Null;Time
- At、Not At、Before、After、At or Before、At or After、Empty、Not Empty、Null、Not Null;
集計
使用可能な集計オペランドは、Count、Earliest (date/time)、および Latest (date/time) になります。
ソート
Time
: タイプの列は、オブジェクトの時間部分に基づいてソートされます。分/秒は無視されます。Date
: タイプの列は、日付部分に基づいてソートされ、時間部分は無視されます。DateTime
: タイプの列は、日付に基づいてソートされます。
Boolean (ブール値)
デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。false 値には 'clear' アイコン、true 値には 'check' アイコンを使用します。編集テンプレートは IgbCheckbox
コンポーネントを使用しています。
<IgbColumn DataType="GridColumnDataType.Boolean"></IgbColumn>
Image (画像)
デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt
属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。
<IgbColumn DataType="GridColumnDataType.Image"></IgbColumn>
列に AutoGenerate
を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image
としてマークされ、デフォルトの画像テンプレートが描画されます。
Currency (通貨)
デフォルトのテンプレート
デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。
PipeArgs
入力を使用することにより、エンドユーザーは小数点、currencyCode および display によって数値書式をカスタマイズできます。
<IgbColumn Field="UnitsInStock" DataType="GridColumnDataType.Currency" PipeArgs=formatOptions></IgbColumn>
@code {
private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs()
{
DigitsInfo = "3.4-4",
Display = "symbol-narrow"
};
}
パラメーター | 説明 |
---|---|
digitsInfo | 通貨値の 10 進数表現を表します。 |
display* | 狭義または広義の記号で値を表示します。 |
*display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。
セルの値を編集すると、通貨記号がサフィックスまたはプレフィックスとして表示されます。詳細については、公式のセル編集トピックを参照してください。
注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
Percent (パーセント)
デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。
セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。
<IgbColumn Field="UnitsInStock" DataType="GridColumnDataType.Percent" PipeArgs=formatPercentOptions></IgbColumn>
@code {
private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs()
{
/**
* Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
DigitsInfo = "2.2-3"
};
}
[!Note] 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
デフォルトの編集テンプレート
Grid 編集トピックの編集テンプレート部分を参照してください。
カスタム編集テンプレートとフォーマッタ
カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。
カスタム テンプレート
<IgbGrid>
<IgbColumn InlineEditorTemplate="EditTemplate"></IgbColumn>
</IgbGrid>
@code {
public RenderFragment<IgbCellTemplateContext> EditTemplate = (ctx) =>
{
var value = ctx.Cell.Value;
return@<input value="@value" />;
};
}
列の書式設定
<IgbGrid>
<IgbColumn FormatterScript="CurrencyFormatter"></IgbColumn>
</IgbGrid>
//In Javascript
igRegisterScript("CurrencyFormatter", (value) => {
return `$ ${value.toFixed(0)}`;
}, false);
API リファレンス
その他のリソース
カスタム テンプレートについては、セル編集トピックを参照してください。