syncfusion-blazor-listview

Syncfusion Blazor ListView コンポーネントの実装

Syncfusion Blazor ListView コンポーネントは、データのリストを表示して操作するための多機能なコントロールです。データバインディング、カスタムテンプレート、グループ化、フィルタリング、仮想化、高度な選択モードをサポートしています。

このスキルを使用する場面

• ListView のセットアップ - インストール、名前空間、サービス登録、テーマの設定
• データのバインド - ローカルデータ配列、リモート DataManager ソース、Entity Framework
• テンプレートの作成 - カスタム項目テンプレート、ヘッダー、フッター、グループヘッダー、デバイス固有のレンダリング
• 選択と操作 - チェックボックスによる選択、選択項目の取得、クリックハンドラー
• フィルタリングと検索 - リアルタイム検索、テキストフィルタリング、カスタムフィルターロジック
• データの整理 - カテゴリ別のグループ化、グループヘッダー、階層的なグループ化
• パフォーマンス - 大規模なデータセット向けの仮想スクロール、コンテナーのスクロールとウィンドウのスクロール
• 高度なレイアウト - グリッドレイアウト、デュアルリストパターン、チャット UI、モバイル対応デザイン
• スタイル設定とカスタマイズ - CSS クラス、テーマ、HTML 属性、レスポンシブデザイン
• イベント処理 - 項目の選択、ナビゲーション、ハイパーリンクの統合、リストイベント

クイックスタートの例

@using Syncfusion.Blazor.Lists

<SfListView DataSource="@ListData">
    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>

@code {
    List<DataModel> ListData = new List<DataModel>();

    protected override void OnInitialized()
    {
        ListData.Add(new DataModel { Text = "Item 1", Id = "1" });
        ListData.Add(new DataModel { Text = "Item 2", Id = "2" });
        ListData.Add(new DataModel { Text = "Item 3", Id = "3" });
    }

    public class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

主なプロパティとイベント

基本プロパティ

• DataSource - バインド用の項目配列または DataManager
• HeaderTitle - 任意のヘッダーテキスト
• ShowHeader - ヘッダーの表示／非表示（ブール値）
• EnableCheckbox - チェックボックスによる選択を有効化（ブール値）
• EnableVirtualization - 大規模なリスト向けの仮想スクロール（ブール値）
• Height - コンテナーの高さ（仮想スクロールに必須）
• ShowCheckBox - 選択用チェックボックスを表示
• SortOrder - 項目の並べ替え（昇順／降順）

テンプレートプロパティ

• HeaderTemplate - ヘッダーの外観をカスタマイズ
• Template - カスタム項目のレンダリング
• GroupTemplate - グループヘッダーをカスタマイズ
• FooterTemplate - フッターをカスタマイズ

選択とデータ

• ListViewFieldSettings - データプロパティをマッピング：
  • Id - 項目識別子
  • Text - 表示テキスト
  • GroupBy - グループ化フィールド
  • Child - ネストされた項目
  • IconCss - アイコンクラス
  • Tooltip - ホバー時のツールチップ

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• WebAssembly、Web App、Server App プロジェクトへのインストール
• パッケージのインストール（NuGet）
• 名前空間のインポートとサービス登録
• テーマのスタイルシートとスクリプトの参照
• 最初の ListView コンポーネントのセットアップ
• 最小限の動作例

データバインディングとソース

📄 参照: references/data-binding-and-source.md

• ローカルデータ配列と JSON バインディング
• DataManager を使用したリモートデータ
• OData、OData V4、Web API の統合
• Entity Framework バインディング
• ListViewFieldSettings によるフィールドマッピング
• 動的なデータ更新とリフレッシュ

テンプレートとレンダリング

📄 参照: references/templating-and-rendering.md

• 項目テンプレートのカスタマイズ
• ヘッダーとフッターのテンプレート
• グループヘッダーのテンプレート
• デバイス固有のテンプレート（レスポンシブレンダリング）
• テンプレート要素のクラス（e-list-template、e-list-wrapper など）
• アバターとバッジのテンプレート
• 複数行の項目

項目の選択とアクション

📄 参照: references/item-selection-and-actions.md

• GetCheckedItemsAsync メソッド
• チェックボックスによる選択
• 単一選択モードと複数選択モード
• 選択した項目のデータとインデックスの取得
• カスタムテンプレートの選択処理
• クリックイベントハンドラー

フィルタリングと検索

📄 参照: references/filtering-and-searching.md

• リアルタイム検索の実装
• テキスト入力によるフィルタリング
• フィルターロジックと述語
• 文字列の照合方法
• 大文字と小文字を区別しないフィルタリング
• カスタムフィルター条件

グループ化と整理

📄 参照： references/grouping-and-organization.md

• GroupBy フィールドの設定
• グループヘッダーのスタイル設定
• 折りたたみ可能なグループ
• カテゴリ別の整理
• 階層型グループ化のパターン

仮想化とパフォーマンス

📄 参照： references/virtualization-and-performance.md

• EnableVirtualization プロパティ
• ウィンドウスクロールとコンテナスクロール
• 高さの設定
• 大規模データセットの処理（1000 件以上）
• パフォーマンス最適化の手法
• 仮想スクロールの制限と制約

高度なレイアウト

📄 参照： references/advanced-layouts.md

• グリッドレイアウトのカスタマイズ
• デュアルリスト／複数選択のパターン
• モバイル対応の連絡先レイアウト
• チャットウィンドウ UI の実装
• レイアウト固有の CSS クラス
• レスポンシブデザインのパターン

スタイル設定とカスタマイズ

📄 参照： references/styling-and-customization.md

• CSS クラスのカスタマイズ（e-listview、e-list-item、e-list-header）
• テーマの統合と色
• ホバー状態のスタイル設定
• 選択項目のスタイル設定
• グループヘッダーのスタイル設定
• HTML 属性のサポート
• CSS の構造とセレクター

イベントとナビゲーション

📄 参照： references/events-and-navigation.md

• ListViewItem のイベント処理
• クリックイベントと選択イベント
• ナビゲーションのパターン
• ハイパーリンクの統合とルーティング
• イベントメソッドのシグネチャ
• イベントコンテキストとデータ

高度なパターン

📄 参照： references/advanced-patterns.md

• 入れ子のリストの実装
• 項目の動的な追加／削除
• ListData に対する CRUD 操作
• 複雑なデータシナリオ
• 複数階層の入れ子
• 階層データのベストプラクティス

API リファレンス

📄 参照： references/api-reference.md

• 型とデフォルト値を含むプロパティの完全なドキュメント
• パラメーターと戻り値の型を含むすべてのコンポーネントメソッド
• イベントシグネチャとイベント引数
• フィールド設定とフィールドマッピングの構成
• テンプレートの定義と使用方法
• 関連する列挙型（SortOrder、CheckBoxPosition、ListViewEffect）
• すべての機能を含む完全な動作例

主なプロパティのリファレンス

プロパティ	型	用途
DataSource	Array/DataManager	表示する項目
HeaderTitle	string	ヘッダーテキスト
ShowHeader	bool	ヘッダーの表示／非表示
ShowCheckBox	bool	チェックボックスを有効化
EnableVirtualization	bool	仮想スクロール
Height	string	コンポーネントの高さ（px）
SortOrder	SortOrder	昇順／降順
CssClass	string	カスタム CSS クラス
Template	RenderFragment	項目テンプレート
HeaderTemplate	RenderFragment	ヘッダーテンプレート

一般的なユースケース

1. シンプルなリスト表示 - ListViewFieldSettings を使って基本的な DataSource バインディングを設定します
2. 選択可能なリスト - ShowCheckBox="true" を追加し、GetCheckedItemsAsync() を使用します
3. 検索可能なリスト - OnInput イベントで TextBox の入力をバインドし、DataSource をフィルターします
4. グループ化されたリスト - ListViewFieldSettings で GroupBy フィールドをマッピングします
5. 大規模データセット - EnableVirtualization="true" と Height を設定して仮想化を有効にします
6. カスタム UI - Template プロパティを使い、複数行レイアウト、アバター、バッジを設定します
7. 入れ子のリスト - Child フィールドをマッピングし、再帰的なテンプレートを使用します
8. レスポンシブデザイン - デバイス固有のテンプレート、またはビューポートに応じた動的テンプレートを使用します

---

このスキルでは、あらゆる ListView シナリオに対応するアーキテクチャとパターンを紹介します。具体的な実装とコード例については、該当するガイドファイルを参照してください。