このトピックでは、igGrid™ コントロールに対するデスクトップとタッチ環境の両方の複数セル選択を構成する方法を説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックは、タッチ対話をサポートするために行われた Ignite UI for jQuery コントロールの更新を紹介します。
igGrid 選択: このトピックでは、igGrid 選択の有効化と使用法を説明します。
このトピックは、以下のセクションで構成されます。
igGrid 選択機能は、グリッド内の単一および複数セル選択を有効にします。単一セル選択は、ひとつのセルをクリックする (デスクトップ) かまたはセルをタップする (タッチ) ことで行われ、複数選択は、デスクトップとタッチどちらの環境でもグリッドの適切な構成で可能になります。
igHierarchicalGrid™ は内部的に igGrid コントロールを使用し、すべての igGrid 機能を使用するよう設計されています。設計機能は igHierarchicalGrid インスタンス内で引き継ぎ可能ではありません。このことは、選択は親グリッド ウィジェットで一度構成されることを意味しています。一度親グリッドで有効化されると、選択機能は子レイアウトを含む全グリッドで利用可能になります。
次は、igGrid コントロール内で複数セルを選択する方法についていくつかの異なる方法を要約しています。詳細は、概要表の後に記載されています。
ドラッグによるセルの複数選択: ある複数セルの領域を選択できるようにするために構成が必要なプロパティを詳しく説明します。
複数クリック/タップによるセルの選択: 不連続な複数セルを選択できるようにするために構成が必要なプロパティを詳しく説明します。
注: 複数選択を可能にするためには、デフォルト値が false なため、
multipleSelectionプロパティを true に設定する必要があります。
ユーザーがデスクトップ・プラットフォームでドラッグによって複数セルを選択することを可能にする igGrid 選択プロパティは mouseDragSelect と呼ばれ、true に設定しなければなりません。
タッチによる対応する複数セル選択のプロパティは、touchDragSelect で、これも true に設定します。
注: デフォルトでは、どちらのプロパティも
trueに設定されているため、明示的な構成がなくてもユーザーは複数セルを選択することができます。
導入に関する詳細については関連サンプルをご覧ください。
不連続なセル (ランダムな位置) の選択を可能にするためには、デスクトップ環境では CTRL を押しながらセルをクリックします。同じ機能をタッチ環境で行うには、multipleCellSelectOnClick プロパティを true に設定する必要があります。このプロパティを設定することの効果は、ユーザーが新しいセルをクリックするたびに既存の選択が、キーボードで CTRL を押していたかのように保持されることです。タッチ対応環境では、不連続な選択を行うためにこの動作が利用できます。
導入に関する詳細については関連サンプルをご覧ください。
このセクションでは、igGrid 複数セル選択プロパティについて説明します。
次の表は、igGrid コントロールに対して複数選択を可能にする関連プロパティについて概要を示します。
| プロパティ | デフォルト値 | 説明 |
|---|---|---|
| multipleSelection | false | 複数選択の有効化、無効化 |
| multipleCellSelectOnClick | false | セルがクリックまたはタップされた時に CTRL キーが押されているのと同じように複数選択を有効化、無効化します。 |
| mouseDragSelect | true | マウスのドラッグによる選択を有効化、無効化します。 |
| touchDragSelect | true | ドラッグ ジェスチャによる選択を有効化、無効化します。 |
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックは、タッチ対話をサポートするために行われた Ignite UI for jQuery コントロールの更新を紹介します。
igGrid 選択: このトピックでは、igGrid 選択の有効化と使用法を説明します。
igHierarchicalGrid 選択の有効化: igHierarchicalGrid コントロールに関する選択を構成する方法を説明します。
このトピックについては、以下のサンプルも参照してください。
igGrid コントロールでのセル選択の構成を説明します。オンラインで表示: GitHub