syncfusion-aspnetcore-combobox

Syncfusion ASP.NET Core ComboBox の実装

コンポーネントの概要

ComboBox は、以下の機能を組み合わせた強力なドロップダウンコントロールです。

• 使いやすい選択機能：検索やフィルタリングが可能なオプション
• データバインディングのサポート：ローカル配列やリモートデータソースに対応
• 柔軟なカスタマイズ：テンプレートやスタイルを使用
• 高度な機能：グループ化、並べ替え、仮想スクロール、カスケード
• 組み込みのアクセシビリティ：キーボード操作やスクリーンリーダーに対応
• ASP.NET Core との統合：Tag Helper 構文を使用

主な機能：

• フィルタリングに対応したタイプアヘッド／オートコンプリート
• カスタム値（リストにないユーザー入力のデータを許可）
• データのグループ化と並べ替え
• リスト項目、ヘッダー、フッター用のドロップダウンテンプレート
• DataManager によるリモートデータバインディング
• 大規模なデータセット向けの仮想スクロール
• RTL（右から左）サポート
• WCAG 2.1 AA 準拠

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

必要に応じて、以下のリファレンスをお読みください。

はじめに

📄 参照先： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• ASP.NET Core プロジェクトへの ComboBox の追加
• Tag Helper 構文を使った最小限の動作例
• CSS／スクリプトのインポートと設定
• 最初の ComboBox の実行

データバインディング

📄 参照先： references/data-binding.md

• ローカル配列データ（文字列とオブジェクト）のバインド
• DataManager を介したリモートデータのバインド
• 複雑なデータ構造のマッピング
• カスタム値のサポート
• OData および Web API との統合

フィルタリングと検索

📄 参照先： references/filtering-and-search.md

• オートコンプリートとフィルタリングの有効化
• ユーザーの入力に応じた検索
• フィルターの種類の変更（contains、startsWith、endsWith）
• 大文字と小文字を区別する／しないフィルタリング
• 最小文字数のしきい値の設定
• サーバーからのリモートフィルタリング

テンプレートとカスタマイズ

📄 参照先： references/templates-and-customization.md

• リスト表示用の項目テンプレート
• ヘッダーとフッターのテンプレート
• グループヘッダーのカスタマイズ
• CSS クラスのカスタマイズ
• CSS 変数を使ったテーマのカスタマイズ
• ポップアップの高さ／幅の設定

グループ化と並べ替え

📄 参照先： references/grouping-and-sorting.md

• カテゴリー別の項目のグループ化
• 昇順／降順での並べ替え
• カスタムの並べ替え関数
• グループ化と並べ替えの組み合わせ
• グループヘッダーのスタイル設定

オートフィルとオートコンプリート

📄 参照先： references/autofill-and-autocomplete.md

• データ入力を効率化するオートフィルの有効化
• ユーザーの入力に応じたオートコンプリート
• オートフィルとフィルタリングの組み合わせ
• 候補表示時のキーボード操作
• 大規模なデータセットでのパフォーマンス

ポップアップのサイズ変更

📄 参照先： references/popup-resize.md

• ユーザーによるポップアップのサイズ変更の有効化
• 初期幅／高さの設定
• 変更したサイズの保持
• レスポンシブなサイズ変更動作
• サイズ変更ハンドルのスタイル設定

高度な機能

📄 参照先： references/advanced-features.md

• カスケード ComboBox の作成
• 大規模なデータセット向けの仮想スクロール
• キーボード操作（Tab、Enter、矢印キー）
• アクセシビリティ属性（ARIA ラベル）
• RTL（右から左）サポート
• カスタム検証
• イベント処理（change、selecting、select、filtering）

クイックスタートの例

ASP.NET Core での最小限の ComboBox の設定例です。

@{
    ViewData["Title"] = "ComboBox Example";
    List<string> sports = new List<string> { "Cricket", "Badminton", "Basketball", "Tennis" };
}

<ejs-combobox id="games" dataSource="@sports" placeholder="Select a sport"></ejs-combobox>

データバインディングを使用する場合：

@{
    var data = new List<object>
    {
        new { Id = 1, Text = "Microsoft", Code = "US" },
        new { Id = 2, Text = "Google", Code = "US" },
        new { Id = 3, Text = "Apple", Code = "US" }
    };
}

<ejs-combobox id="countries" 
              dataSource="@data" 
              fields-text="Text" 
              fields-value="Id"
              placeholder="Select a company">
</ejs-combobox>

手順ガイド

クイックオートフィル

オートコンプリート候補を使ってユーザー入力を効率化するには、オートフィルを使用します。

<ejs-combobox autofill="true" allowFiltering="true"></ejs-combobox>

サイズ変更可能なポップアップ

ドロップダウンポップアップをユーザーがサイズ変更できるようにして、見やすくします。

<ejs-combobox allowResize="true" popupWidth="400px" popupHeight="300px"></ejs-combobox>

一般的なパターン

パターン 1：フィルター付き検索 入力中にユーザーが検索できるように、フィルターを有効にします。

<ejs-combobox id="combobox" 
              dataSource="@data" 
              allowFiltering="true"
              placeholder="Type to search">
</ejs-combobox>

パターン 2：連動する ComboBox 2 つ目の ComboBox のデータは、1 つ目の選択内容に応じて変わります。完全な例については、advanced-features.md を参照してください。

パターン 3：カスタム値の入力 リストにない値をユーザーが入力できるようにします。

<ejs-combobox id="combobox" 
              allowCustom="true" 
              dataSource="@data">
</ejs-combobox>

パターン 4：グループ化されたデータ 項目をカテゴリ別にグループ化します。

<ejs-combobox id="combobox" 
              dataSource="@data" 
              fields-groupBy="Category"
              fields-text="Name">
</ejs-combobox>

主なプロパティ

プロパティ	型	目的
dataSource	配列または DataManager	ドロップダウンに表示する項目
fields-text	文字列	ラベルとして表示するフィールド
fields-value	文字列	選択値として使用するフィールド
placeholder	文字列	空の場合に表示するヒントテキスト
allowFiltering	bool	入力中の検索／フィルターを有効にする
allowCustom	bool	リストにない値をユーザーが入力できるようにする
fields-groupBy	文字列	項目のグループ化に使用するフィールド
sortOrder	Ascending/Descending	項目の並べ替え順
popupHeight	文字列	ドロップダウンの高さ（例："300px"）
popupWidth	文字列	ドロップダウンの幅
read-only	bool	ユーザーの入力を禁止し、選択のみ可能にする
enabled	bool	コントロールを有効／無効にする

一般的な使用例

1. 国／都市のリストから選択する → データバインディングと任意のグループ化を使用します
2. 大規模なデータセットを検索する → フィルタリングと仮想スクロールを使用します
3. 連動するドロップダウンを作成する → 連動パターンを使用します（高度な機能を参照）
4. カテゴリ別に項目を表示する → グループ化とカスタムテンプレートを使用します
5. API レスポンスのデータに対応させる → フィールドマッピングを使用して DataManager を利用します
6. アクセシブルなフォームを作成する → ARIA 属性を使用します（高度な機能を参照）

---

次のステップ：

• はじめにから始めて、インストールとセットアップを行います
• データバインディングに進み、データを接続します
• 高度な機能で複雑なシナリオを確認します

問題やトラブルシューティングについては、各リファレンスファイルで注意点や特殊なケースを確認してください。