概要

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つの層に分かれています。

DataGrid.razor

// テーブル層
// テーブル全体の設定を記述する
<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文を記述することで動的にデータを取り扱うことができたり、様々なタグを用いることでユーザーインターフェースを向上させることができます。これらの項目についても今後まとめていけたらと思います。

【Radzen.Blazor】DataGridの構造について

概要