概要
Radzen.Blazorでは下記リンクで様々なテンプレートやリファレンスがサポートされています。しかし、これらは英語で紹介されていたり、説明が少なかったりと少し扱いづらいものになっています。そこで、これらの資料を参考に、Radzen.Blazorの扱い方をを自分なりにまとめたので、投稿させていただきました。
テンプレート：https://blazor.radzen.com/datagrid-group-header-template
リファレンス①：https://www.radzen.com/documentation/blazor/get-started/
リファレンス②：https://blazor.radzen.com/docs/api/Radzen.Blazor.html
本記事では、DataGridの構造についてまとめています。（最終更新：2021/11/19）
全体的な構造を把握することができれば、どこにどの記述を書けばよいか明確になると思うので、記述する場所に困った場合などに本記事を活用していただければと思います。
DataGridの大まかな構造
（私の個人的な見解ですが…）DataGridは大きく3つの層に分かれています。
// テーブル層
// テーブル全体の設定を記述する
<RadzenDataGrid TItem="" …>
<Tamplate></Template>
<EmptyTemplate></EmptyTemplate>
<GroupHeaderTemplate></GroupHeaderTemplate>
// カラム層
// 各カラムの設定を記述する
<Columns>
<RadzenDataGridColumn TItem="" …>
// フィールド層
// カラム内の各項目の設定を記述する
<Template Context=""></Template>
<HeaderTemplate Context=""></HeaderTemplate>
<FooterTemplate Context=""></FooterTemplate>
<FilterTemplate Context=""></FilterTemplate>
<EditTemplate Context=""></EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code{
︙
}
①テーブル層
テーブル全体の設定を記述する層になります。
この層では、<RadzenDataGrid>のオプションで設定を記述するほかに、<Template><EmptyTemplat><GroupHeaderTemplate>というタグを用いることでも設定を記述することが可能です。
<RadzenDataGrid>の代表的なオプション
| オプション | 型 | 概要 |
|---|---|---|
| TItem | T | 表示するデータの型 |
| Data | IEnumerable<T> | 表示するデータ |
| @ref | RadzenDataGrid | @code内で宣言されたRadzenDataGridオブジェクトを参照する |
| LoadData | EventCallback | ページ読み込み時に実行する処理 |
| AllowColumnResize | bool | カラムの大きさを変更できるか |
| ColumnWitdh | int | カラムの幅 |
| AllowFiltering | bool | フィルタリングできるか |
| FilterMode | enum<FilterMode> | フィルタリングの形式（Simple：文字検索のみ、Advanced：条件を指定して検索） |
| FilterCaseSensitibity | enum<FilterCaseSecsitibity> | フィルタリングの際に大文字と小文字を区別するか（Default：区別しない、CaseInsensitibe：区別する） |
| LogicalFilterOperator | enum<LogicalFilterOperator> | フィルタリングの論理（And:AND検索、Or:OR検索) |
| AllowGrouping | bool | グルーピングできるか |
| AllowPaging | bool | ページングできるか |
| PageSize | int | 1ページに表示するレコードの数 |
| AllowSorting | bool | ソートできるか |
②カラム層
各カラムの設定を記述する層になります。
<RadzenDataGridColumn>の代表的なオプション
| オプション | 型 | 概要 |
|---|---|---|
| TItem | T | 表示するデータの型 |
| Property | IEnumerable<T> | 表示するデータのプロパティ |
| Title | string | ヘッダーに表示する名前 |
| Width | int | カラムの幅 |
| Frozen | bool | カラムを固定するか（スクロールバーに追従させるか） |
| TextAlign | enum<TextAlign> | 各フィールドに表示するテキストの位置 |
| FormatString | string | 各フィールドに表示するテキストのフォーマット |
| Sortable | bool | ソートできるか |
| Filterable | bool | ソートできるか |
③フィールド層
カラム内の各項目の設定を記述する層になります。
Context=""で指定した変数名に、フィールドの値が代入され、この変数を用いて様々な処理を記述することができます。
Template
フィールドに表示する内容を記述する。
(例)<RadzenImage>を記述すると、フィールドに画像を表示する。
HeaderTemplate
ヘッダーに表示する内容を記述する。
(例)<RadzenIcon>を記述すると、ヘッダーにアイコンを表示する。
FooterTemplate
フッターに表示する内容を記述する。
(例)<RadzenIcon>を記述すると、フッターにアイコンを表示する。
FilterTemplate
検索欄に表示する内容を記述する。
(例)<RadzenDropDown>を記述すると、検索欄にドロップダウンを表示する。
EditTemplate
編集モード中に表示する内容を記述する。
(例)<RadzenDropDown>を記述すると、編集モードにドロップダウンを表示する。
- 編集モード：フィールドの値を任意の値に変更できるモード。
@refで指定したRadzenDataGridのメソッドを呼び出すことで、編集モードを切り替える。- RadzenDataGrid.EditRow：編集モードを開始する。
- RadzenDataGrid.CloseEditRow：編集モードを終了する。
最後に…
本記事では省略しましたが、各層のタブ内でif文やfor文を記述することで動的にデータを取り扱うことができたり、様々なタグを用いることでユーザーインターフェースを向上させることができます。これらの項目についても今後まとめていけたらと思います。