アクティブなノードが変更されたときに発生します。
<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
高度フィルタリングが UI で実行された後に発生されます。
高度フィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
提供されたデータに基づいてピボット構成を自動生成するかどうかを取得または設定します。
デフォルト値は False です。true に設定すると、pivotConfiguration 内のすべてのディメンションと値がオーバーライドされます。
<igx-pivot-grid [data]="Data" [autoGenerateConfig]="true"></igx-pivot-grid>
Readonly cdr変更検出機能を提供します。 変更検出ツリーは、変更がチェックされるすべてのビューを収集します。 プロパティは変更できません (読み取り専用)。
セルがクリックされたときに発生します。
IgxGridCell を返します。
<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッドのコピー動作を制御します。
列が初期化されるときに発生します。
列オブジェクトを返します。
<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
列のサイズが変更された後に発行されます。
IgxColumnComponent オブジェクトの古い幅および新しい幅を返します。
<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
IgxColumnComponent が選択されたときに発生します。
<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
列の表示状態が変更された後に発行されます。
引数: { column: IgxColumnComponent, newValue: boolean }
<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
列の表示状態が変更される前に発行されます。
引数: { column: any, newValue: boolean }
<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
セルまたは行を右クリックすると発行されます。
直近のコンテキスト メニュー ターゲットがセルの場合は IgxGridCell オブジェクトを返し、それ以外の場合は IgxGridRow を返します。
<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
データ操作、再バインドなどのためにグリッドのデータ ビューが変更された後に発生します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
データ操作、再バインドなどのためにグリッドのデータ ビューが変更される前に発生します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
ディメンションが初期化された後に発生します。
初期化されようとしているディメンションを発生します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionInit)="dimensionInit($event)"></igx-pivot-grid>
グリッド チップ領域によってディメンション コレクションが変更されたときに発生します。
新しいディメンション コレクションとそのタイプを返します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsChange)="dimensionsChange($event)"></igx-grid>
ディメンションがソートされたときに発生します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid>
セルがダブルクリックされたときに発生されます。
IgxGridCell オブジェクトを返します。
<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
空の場合のカスタムテンプレートを取得または設定します。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
ピボット グリッドが空の場合にカスタム テンプレートを取得または設定します。
<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>
フィルタリング式が適用される前に発生されます。
IFilteringEventArgs オブジェクトを返します。filteringExpressions キーは、列のフィルタリング式を保持します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>
UI を介してフィルタリングが実行された後に発行されます。
フィルターされた列のフィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>
フィルタリングが UI で実行された後に発生されます。
フィルターされた列のフィルタリング式ツリーを返します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
行/セルの編集時に formGroup が作成されたときに発生します。
<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
Readonly gridAPIグリッドに API メソッドを提供するグリッド サービス タイプを表します。
コピー操作が実行されたときに発生します。
[clipboardOptions]IgxGridBaseDirective#clipboardOptions を使用してコピー動作が有効になっている場合のみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。
このイベントは、グリッドでキーの組み合わせがサポートされている場合にのみ発生します。 ターゲット タイプ、ターゲット オブジェクト、および元のイベントを返します。このイベントはキャンセルできます。
<igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
グリッドが水平/垂直にスクロールされるときに発生します。
<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
読み込み時のカスタムテンプレートを取得または設定します。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
pivotConfiguration プロパティのいずれかがグリッド チップ領域を介して変更されたときに発生します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(pivotConfigurationChanged)="configurationChanged($event)"></igx-grid>
プライマリ キーを取得または設定します。
<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
範囲選択を行ったときに発生します。
範囲選択がドラッグ選択またはキーボード選択による行います。
ngAfterViewInit の後に発生します。この時点で、グリッドは DOM に存在します。
グリッドの行要素に条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。例:
callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
IgxColumnComponent
行がクリックされたときに発生します。
IgxGridRow を返します。
<igx-grid #grid (rowClick)="rowClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
IgxGridRowComponent が選択されたときに発生します。
<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
グリッドの行要素に条件付きスタイル プロパティを設定します。 キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
IgxColumnComponent
行の展開状態が変更されているときに呼び出されます。
<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
セルが選択されたときに発生発生します。
IgxGridCell を返します。
<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
ソート式が適用される前に発生されます。
ISortingEventArgs オブジェクトを返します。sortingExpressions キーは、ソート式を保持します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
ソートが完了した後に発行されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
ソートが UI で実行された前に発生されます。
ソート式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
Excel スタイル フィルタリングによって使用される一意の値戦略を取得または設定します。
要求に応じて一意の列値をロードするためのコールバックを提供します。 このプロパティが提供された場合、生成される一意の値は Excel スタイル フィルタリングによって使用されます。
<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
Readonly validationグリッドの検証サービスを表します。この型には、レコードを検証するためのプロパティとメソッド (ロジック) が含まれます
グリッドの検証状態が変更されたときに発生します。
<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
グリッドの編集時に使用される検証のトリガーを取得または設定します。
<igx-grid #grid validationTrigger='blur'></igx-grid>
valueChip のカスタム テンプレートを取得または設定します。
<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>
値が初期化された後に発生します。
値が初期化される前に発生します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valueInit)="valueInit($event)"></igx-pivot-grid>
値コレクションがグリッド チップ領域によって変更されたときに発生します。
新しいディメンションを返します。
<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valuesChange)="valuesChange($event)"></igx-grid>
高度なフィルタリング状態を取得または設定します。
let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;
ディメンションの完全なリストを取得します。
const dimensions = this.grid.allDimensions;
グリッド内のフィルタリングが有効かどうかを示します。値が true の場合、グリッドをフィルタリングできます。
セル選択モードを取得または設定します。
デフォルトでは、セル選択モードは multiple です。
セルの選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列選択モードを取得または設定します。
デフォルトでは、行選択モードは none です。
列の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
列のデフォルトの幅を取得または設定します。
<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
IgxColumnComponent の配列を取得します。
const colums = this.grid.columns.
コンポーネントにデータ セットの配列を返します。
let data = this.grid.data;
コンポーネントを構成するデータの配列を取得または設定します。
<igx-pivot-grid [data]="Data"></igx-pivot-grid>
編集モード時のグリッドのデータ複製方法を取得または設定します。
<igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
提供されたデータのクローンを作成するために使用されるストラテジです。この型には、任意のデータ型を受け取るメソッドが 1 つあります。
現在描画されている IgxGridRowComponent のリスト。
const dataList = this.grid.dataRowList;
グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/ピン固定/固定解除が適用された行データを返します。
const dataView = this.grid.dataView;
すべての行のデフォルト展開状態を取得または設定します。
IgxGridHeaderGroupComponentの最小許容幅を返します。
ヘッダー グループ コンポーネントの幅を制限するために内部で使用されます。 以下の値は、ヘッダーセルのデフォルトの右/左パディング値に基づいています。
デフォルトの行の高さを取得します。
const rowHeigh = this.grid.defaultRowHeight;
ディメンションに対して生成されたソート式を取得します。
const expressions = this.grid.dimensionsSortingExpressions;
行ドラッグ ゴーストに使用されるカスタム テンプレート (存在する場合) を取得します。
行ドラッグ ゴーストのカスタム テンプレートを設定します。
<ng-template #template igxRowDragGhost>
<igx-icon>menu</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;
ドラッグ インジケーター アイコンのテンプレートです。任意のタイプを使用できます。
グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
レコードがない場合に表示されるメッセージを取得または設定します。
<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
Excel スタイルのヘッダー アイコンを取得します。
Excel スタイルのヘッダー アイコンを設定します。
<ng-template #template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.excelStyleHeaderIconTemplate = this.template;
キーと値のペア [行 Id、展開状態] のリストを取得または設定します。
デフォルト状態に異なる状態のみ含まれます。 双方向バインディングをサポートします。
<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>
グリッドのフィルター モード。Excel スタイル フィルターのクイック フィルターにすることができます
グリッドのフィルタリング ストラテジを取得または設定します。
<igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
フィルターされたデータを含むオブジェクトの配列を返します。
let filteredData = this.grid.filteredData;
フィルターされてソート済みのデータを含む配列を返します。
const filteredSortedData = this.grid1.filteredSortedData;
フィルタリング状態を取得または設定します。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
双方向バインディングをサポートします。
IgxGridComponent のフィルター ロジックを設定します。
デフォルト値は AND です。
<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
グリッドに表示される列があるかどうかを示します。
ヘッダー行セレクター テンプレートを取得します。
ヘッダー行セレクター テンプレートを設定します。
<ng-template #template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headSelectorTemplate = this.template;
行縮小インジケーターのテンプレートを取得します。
行縮小インジケーターのテンプレートを設定します。
<ng-template igxHeaderCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerCollapsedIndicatorTemplate = this.template;
ヘッダー展開インジケーター テンプレートを取得します。
ヘッダー展開インジケーター テンプレートを設定します。
<ng-template igxHeaderExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerExpandedIndicatorTemplate = this.template;
高さを取得または設定します。
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
id 属性の値を取得または設定します。
提供されていない場合は、自動的に生成されます。
<igx-pivot-grid [id]="'igx-pivot-1'" [data]="Data"></igx-pivot-grid>
グリッドの一意の識別子を表します。
グリッドは読み込みインジケータを表すかどうかを取得または設定します。
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
前回の検索情報を表します。
ロケールを取得または設定します。
設定されていない場合、ブラウザーの言語設定を返します。
グリッドのロケールを表します: USD、EUR、GBP、CNY、JPY など。
ネイティブ要素を取得します。
const nativeEl = this.grid.nativeElement.
グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。
設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。
グリッドのページングを表します。'Local' または 'Remote' のいずれかにすることができます。
グリッド内の列と行のピン固定の構成です。 型は IPinningConfig で、列 (start、end) と行 (top、bottom) の値を持つことができます。
リソース文字列を取得または設定します。
デフォルトで EN リソースを使用します。
行追加テキスト テンプレートを取得します。
行追加テキスト テンプレートを設定します。
<ng-template #template igxRowAddText>
Adding Row
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowAddTextTemplate = this.template;
行縮小インジケーターのテンプレートを取得します。
行縮小インジケーターのテンプレートを設定します。
<ng-template igxRowCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowCollapsedIndicatorTemplate = this.template;
グリッド内の行をドラッグできるかどうかを示します。値が true の場合、行をドラッグできます
行編集アクション テンプレートを取得します。
行編集アクション テンプレートを設定します。
<ng-template #template igxRowEditActions let-endRowEdit>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditActionsTemplate = this.template;
行編集テキスト テンプレートを取得します。
行編集テキスト テンプレートを設定します。
<ng-template #template igxRowEditText let-rowChangesCount>
Changes: {{rowChangesCount}}
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditTextTemplate = this.template;
グリッド内の行が編集可能かどうかを示します。値が true の場合、行を編集できます
行展開インジケーターのテンプレートを取得します。
行展開インジケーターのテンプレートを設定します。
<ng-template igxRowExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowExpandedIndicatorTemplate = this.template;
行の高さを取得または設定します。
<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
グリッド内の各行の高さ。一定の高さを設定すると、スクロール時にすべての要素が表示されない問題を解決できます。
IgxGridRowComponentのリスト。
const rowList = this.grid.rowList;
行選択モードを取得または設定します。
デフォルトでは、行選択モードは 'none' です。 注: IgxGrid および IgxHierarchicalGrid では、'multipleCascade' は 'multiple' のように動作します。
行の選択モードを表します: 'none'、'single'、'multiple'、'multipleCascade'
行セレクターのテンプレートを取得します。
行セレクターのカスタム テンプレートを設定します。
<ng-template #template igxRowSelector let-rowContext>
<igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowSelectorTemplate = this.template;
行をクリックして選択/選択解除するかどうかを取得または設定します。
デフォルトで true に設定されます。
列が昇順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ヘッダーのソート インジケーターを描画するときに使用する、列が昇順でソートされている場合のカスタム テンプレートを設定します。
<ng-template #template igxSortAscendingHeaderIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortAscendingHeaderIconTemplate = this.template;
列が降順でソートされている場合にヘッダー ソート インジケーターを描画するときに使用するカスタムテンプレート (存在する場合)。
ヘッダーのソート インジケーターを描画するときに使用する、列が昇順でソートされている場合のカスタム テンプレートを設定します。
<ng-template #template igxSortDescendingHeaderIcon>
<igx-icon>expand_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortDescendingHeaderIconTemplate = this.template;
ヘッダー ソート インジケーターを描画するときに使用する、列がソートされていない場合のカスタムテンプレート (存在する場合) を取得します。
ヘッダーのソート インジケーターを描画するときに使用する、列がソートされていない場合のカスタム テンプレートを設定します。
<ng-template #template igxSortHeaderIcon>
<igx-icon>unfold_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortHeaderIconTemplate = this.template;
グリッドのソート ストラテジを取得または設定します。
<igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
ソートの状態を取得または設定します。
双方向データ バインディングをサポートします。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
ソート オプション (単一または複数) を取得または設定します。
いずれかの mode プロパティを持つ ISortingOptions オブジェクトを受け入れます。
const _sortingOptions: ISortingOptions = {
mode: 'single'
}
```html
<igx-grid [sortingOptions]="sortingOptions"><igx-grid>
集計の計算モードを表します: 'rootLevelOnly'、'childLevelsOnly'、'rootAndChildLevels'
集計の位置を表します: 'top'、'bottom'
コンポーネントの超コンパクトなテーマを有効にします。
グリッドの size オプションが設定されている場合、これをオーバーライドします。
<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>
グリッド仮想化の状態を返します。
開始インデックスおよび描画されるレコード数を含みます。
const gridVirtState = this.grid1.virtualizationState;
表示される IgxColumnComponent の配列を返します。
const visibleColumns = this.grid.visibleColumns.
グリッドの幅を取得または設定します。
let gridWidth = this.grid.width;
行ディメンション セルを自動サイズ設定します。
ビューのディメンション セルに基づくサイズのみ。
this.grid.autoSizeRowDimension(dimension);
サイズ変更する行のディメンション。
フィールドによって特定の列の選択を解除します。
this.grid.deselectColumns(['ID','Name']);
単一の IgxColumnComponent をフィルターします。
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}
単一の IPivotDimension をフィルターします。
public filter() {
const set = new Set();
set.add('Value 1');
set.add('Value 2');
this.grid1.filterDimension(this.pivotConfigHierarchy.rows[0], set, IgxStringFilteringOperand.instance().condition('in'));
}
フィールド名によって IgxColumnComponent を返します。
const myCol = this.grid1.getColumnByName("ID");
width に設定される IgxGridHeaderGroupComponent を取得します。
グリッドで現在選択されている範囲を取得します。
指定したインデックスまたはコレクションの最後にタイプによってターゲット コレクションにディメンションを挿入します。
this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);
追加されるディメンションです。
追加するターゲット コレクション タイプです。Row、Column、または Filter になります。
追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。
指定したインデックスまたは最後に値を挿入します。
this.grid.insertValueAt(value, 1);
追加される値の定義。
追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。
IgxGridComponent の変更検出をトリガーします。
markForCheck を呼び出すと、グリッドのパイプも明示的にトリガーされ、すべての更新が処理されます。
不要なときに使用したり、誤用したりすると、パフォーマンスが低下する可能性があります。
// 注意事項
// ループ内から markForCheck を呼び出さないでください。
// プリミティブが変更されたときに markForCheck を呼び出さないでください。
grid.data.forEach(rec => {
rec = newValue;
grid.markForCheck();
});
// 注意事項
// ネストされたプロパティを更新した後に markForCheck を呼び出します。
grid.data.forEach(rec => {
rec.nestedProp1.nestedProp2 = newValue;
});
grid.markForCheck();
grid.markForCheck();
指定したインデックスまたはコレクションの最後にあるタイプによって、現在のコレクションから指定したターゲット コレクションにディメンションを移動します。
this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);
移動するディメンション。
移動先のターゲット コレクション タイプです。Row、Column、または Filter になります。
追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。
現在指定されたインデックス位置または末尾から値を移動します。
this.grid.moveValue(value, 1);
移動する値です。
追加するコレクション内のインデックスです。 このパラメーターはオプションです。設定されていない場合、コレクションの最後に追加します。
rowindex と visibleColumnIndex に基づいてグリッド内の位置に移動します。
{ targetType: GridKeydownTargetType, target: Object } を受け入れるコールバック関数を通してターゲット要素上で カスタム ロジックを実行することもできます。
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
現在のコレクションからディメンションを削除します。
これは、ディメンションを有効/無効にする toggleDimension とは異なります。 指定したディメンションをコレクションから完全に削除します。
this.grid.removeDimension(dimension);
削除するディメンション。
値をコレクションから削除します。
これは、値を有効または無効にする toggleValue とは異なります。 これにより、指定した値がコレクションから完全に削除されます。
this.grid.removeValue(dimension);
削除する値です。
すべての行を選択します。
フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 onlyFilterData のパラメーターを false に設定すると、削除された行を除き Grid 内のすべての行が選択されます。
this.grid.selectAllRows();
this.grid.selectAllRows(false);
指定した列を選択します。
this.grid.selectColumns(['ID','Name'], true);
True の場合、現在の選択をクリアします。
グリッドの特定の行と列の間のセル範囲を選択します。
現在選択されている列を取得します。
選択されている列の配列を返します。
const selectedColumns = this.grid.selectedColumns();
単一の IgxColumnComponent をソートします。
IgxGridComponent の IgxColumnComponent を提供したソート式の配列に基づいてソートします。
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
ディメンションとその子を指定された方向にソートします。
this.grid.sortDimension(dimension, SortingDirection.Asc);
ディメンションの有効状態をオンまたはオフにトグルします。
ディメンションは現在のコレクションに残ります。これは有効状態を変更するだけです。
this.grid.toggleDimension(dimension);
トグルするディメンション。
値の有効状態をオンまたはオフにトグルします。
値は現在のコレクションに残ります。これは有効状態を変更するだけです。
this.grid.toggleValue(value);
トグルする値です。
Pivot Grid は、ピボット テーブル ビューでデータを表示および操作する方法を提供します。
Igx Module
IgxPivotGridModule
Igx Group
グリッド & リスト
Igx Keywords
pivot, grid, table
Igx Theme
igx-grid-theme
備考
Ignite UI Pivot Grid は、シンプルなフラット データをグループ化してピボット テーブルに集計するために使用されます。データがバインドされ、ディメンションと値が構成されると、ソートとフィルタリングによって操作できます。
例