[]
GroupPanel クラスの新しいインスタンスを初期化します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
コントロールの初期化データを含むJavaScriptオブジェクト。
このGroupPanelによってグループが管理されているICollectionViewを取得します。
グリッドデータのフィルタリングに使用するwijmo.grid.filter.FlexGridFilter を取得または設定します。
このプロパティを有効なフィルタに設定すると、グループ記述子は グループに関連付けられているフィルタ条件を表示および編集するために 使用できるフィルタアイコンを表示します。
この GroupPanel に接続している FlexGrid を取得または設定します。
グリッドをパネルに接続すると、グリッドのデータソースで定義されているグループがパネルに表示されます。 ユーザーはグリッド列をパネルにドラッグして新しいグループを作成できます。 また、パネル内でグループをドラッグしてグループ化の順序を変更したり、 パネルの項目を削除することによってグループを削除することもできます。
ユーザーが列をグループにドラッグしたときにグループの説明を作成するために使用されるGroupDescription作成関数を取得または設定します。
たとえば、次のコードは、日付を年ごとにグループ化するgroupDescriptionCreator関数を定義します。
thePanel.groupDescriptionCreator = (prop: string) => {
switch (prop) {
case 'date':
return new PropertyGroupDescription(prop, (item, prop) => {
return Globalize.formatDate(item[prop], 'yyyy');
});
case 'sales':
return new PropertyGroupDescription(prop, (item, prop) => {
let value = item[prop];
if (value > 50000) return 'High';
if (value > 25000) return 'Medium';
return 'Low';
});
}
return null; // デフォルト
}
グループ化列をオーナーグリッドで非表示にするかどうかを示す値を取得または設定します。
FlexGrid では行ヘッダにグループ化情報が表示されるので、 グループ化列を表示したままにすると情報が重複するため、 通常はグループ化列を非表示にすることを推奨します。
このプロパティのデフォルト値は true です。
コントロールをホストしているDOM要素を取得します。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。
コントロールが現在更新中かどうかを示す値を取得します。
許可されるグループの最大数を取得または設定します。
このプロパティを-1に設定すると、必要なグループを作成できます。 ゼロに設定すると、グループ化を行うことがができません。
このプロパティのデフォルト値は 6 です。
グループがないときにコントロールに表示する文字列を取得または設定します。
このプロパティのデフォルト値はnullです。これにより、コントロールでは、プレースホルダーとして「「グループを作成するにはここに列をドラッグアンドドロップしてください。(Drag and Drop columns here to create groups.)」というローカライズされたバージョンの文字列が使用されます。 このプロパティを必要に応じてカスタム文字列に設定するか、 空の文字列に設定してプレースホルダーメッセージを削除するか、 nullに設定してデフォルトのメッセージを復元します。
要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。
コントロールがグループマーカーの要素にドラッググリフを 追加するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は true。
コントロールに関連付けられた tabindex 属性の値を取得または設定します。
tabindex属性値は、コントロールのホストHTML要素で指定することで、 Wijmoコントロールに対して静的に定義できます。 ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、 この値をアプリケーションのライフサイクルの後半で変更することはできません。
そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、このプロパティを使用して行う必要があります。
GroupPanel コントロールのインスタンス化に使用されるテンプレートを取得または設定します。
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener ) メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。
イベントのターゲット要素。
イベントを指定する文字列。
イベントが発生したときに実行する関数。
リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。
ハンドラーが preventDefault() を呼び出さないことを示します。
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出されますので、このメソッドは使用できません。 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
this.applyTemplate('wj-control wj-inputnumber', templateString, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
@param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。
次にendUpdate が呼び出されるまで通知を中断します。
このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。
beginUpdate/endUpdate ブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。
実行する関数。
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって 追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、 dispose メソッドを呼び出すことが重要です。 コントロールを破棄しないと、 メモリリークが発生する可能があります。.
beginUpdate の呼び出しによって中断された通知を再開します。
コントロールを無効にする必要があります。このパラメータのデフォルト値は true です。
このコントロールにフォーカスを設定します。
オブジェクトが指定されたプロパティを持つかどうかを判定します。
プロパティの名前。
指定されたマウス位置で、または指定されたHTML要素で表されるGroupDescriptionを取得します。
テストする要素。
要素によって表される{@linkGroupDescription}、または要素が{@linkGroupDescription}を表さない場合はnull。
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
grid.initialize({
itemsSource: myList,
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'Code', width: 130 },
{ binding: 'name', header: 'Name', width: 60 }
]
});
// 以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など
初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
初期化データを含むオブジェクト。
非同期更新を発生させるため、コントロールを無効にします。
内容だけでなくコントロールのレイアウトも更新するかどうか。
オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。
プロトタイプチェーンが判定される別のオブジェクト。
invalidInput イベントを発生させます。
イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。
refreshing イベントを発生させます。
指定されたプロパティが列挙可能かどうかを判断します。
プロパティの名前。
パネルを更新して現在のグループを表示します。
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます
イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。
削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。
リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。
削除されたリスナーの数。
現在のロケールを使用して文字列に変換された日付を返します。
オブジェクトの文字列表現を返します。
指定されたオブジェクトのプリミティブ値を返します。
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
コンテナー要素。
指定したDOM要素でホストされているコントロールを取得します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
コントロールがフォーカスを取得したときに発生します。
無効な文字が入力されたときに発生します。
ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。
イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。
イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。
コントロールがフォーカスを失ったときに発生します。
コントロールが内容を更新した後で発生します。
コントロールが内容を更新する直前に発生します。
GroupPanel コントロールは、バインドされたFlexGrid コントロールでドラッグ&ドロップによってグループを編集できるUIを提供します。
ユーザーはFlexGrid の列をパネルにドラッグしてグループを作成し、 パネル内でグループを移動してグループ化の順序を変更できます。また、パネルのグループマーカーをクリックして、 グループ列を基準にソートしたり、グループを削除したりすることもできます。
GroupPanel を使用するには、FlexGrid コントロールを含むページにGroupPanelを追加し、 パネルのgrid プロパティをFlexGrid コントロールに設定します。 例:
import { FlexGrid } from '@mescius/wijmo.grid'; import { GroupPanel } from '@mescius/wijmo.grid.grouppanel'; // FlexGridを作成します let theGrid = new FlexGrid('#theGrid', { itemsSource: getData(); }); // データグループを編集するためのGroupPanelを追加します let thePanel = new GroupPanel('#thePanel', { grid: theGrid, placeholder: '列をドラッグしてグループを作成します。' });
次の例では、GroupPanel コントロールを使用してOutlookスタイルの グループ化をFlexGrid コントロールに追加する方法を示しています。
デモ