高度なフィルタリング状態を取得または設定します。

Example

let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
this.grid.advancedFilteringExpressionsTree = logic;

セル選択モードを取得または設定します。

Remarks

デフォルトでは、セル選択モードは multiple です。

行選択モードを取得または設定します。

Remarks

デフォルトでは、行選択モードは none です。

列のデフォルトの幅を取得または設定します。

Example

<igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>

IgxColumnComponent の配列を取得します。

Example

const colums = this.grid.columns.

編集モードのときにグリッドのデータ クローン ストラテジを取得または設定します。

Example

 <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>

現在描画されている IgxGridRowComponent のリスト。

Example

const dataList = this.grid.dataRowList;

グリッドに現在表示されている、ページング/フィルター/ソート/グループ化/固定解除が適用された行データを返します。

Example

     const dataView = this.grid.dataView;

IgxGridHeaderGroupComponent の最小許容幅を返します。

Remarks

ヘッダー グループ コンポーネントの幅を制限するために内部で使用されます。 以下の値は、ヘッダーセルのデフォルトの右/左パディング値に基づいています。

行ドラッグ ゴーストに使用されるカスタム テンプレートを取得します (存在する場合)。

行ドラッグ ゴーストのカスタム テンプレートを設定します。

<ng-template #template igxRowDragGhost>
   <igx-icon>menu</igx-icon>
</ng-template>

@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;

グリッドがフィルターされ、レコードがない場合に表示されるメッセージを取得または設定します。

Example

<igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>

レコードがない場合に表示されるメッセージを取得または設定します。

Example

<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、展開状態] のリストを取得または設定します。

Remarks

デフォルト状態に異なる状態のみ含まれます。 双方向バインディングをサポートします。

Example

<igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
</igx-grid>

グリッドのフィルタリング ストラテジを取得または設定します。

Example

 <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>

フィルターされたデータを含むオブジェクトの配列を返します。

Example

let filteredData = this.grid.filteredData;

フィルターされてソート済みのデータを含む配列を返します。

Example

const filteredSortedData = this.grid1.filteredSortedData;

フィルタリング状態を取得または設定します。

Example

<igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>

Remarks

双方向バインディングをサポートします。

IgxGridComponent のフィルター ロジックを設定します。

Remarks

デフォルト値は AND です。

Example

<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;

高さを取得または設定します。

Example

<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>

グリッドは読み込みインジケータを表すかどうかを取得または設定します。

Example

<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>

ロケールを取得または設定します。

Remarks

設定されていない場合、ブラウザーの言語設定を返します。

ネイティブ要素を取得します。

Example

const nativeEl = this.grid.nativeElement.

グリッドのオーバーレイをアタッチするアウトレットを取得または設定します。

Remark

設定されている場合、グリッドの外側で定義されたアウトレットを返します。それ以外の場合、グリッド内部のアウトレット ディレクティブを返します。

リソース文字列を取得/設定します。

Remarks

デフォルトで 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;

行編集の動作テンプレートを取得します。

行編集の動作テンプレートを設定します。

<ng-template #template igxRowEditActions let-endRowEdit>
<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<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;

行展開インジケーターのテンプレートを取得します。

行展開インジケーターのテンプレートを設定します。

<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;

行の高さを取得または設定します。

Example

<igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>

すべての IgxGridRowComponent のリスト。

Example

const rowList = this.grid.rowList;

行選択モードを取得または設定します。

Remarks

デフォルトでは、行選択モードは 'none' です。 注: IgxGrid および IgxHierarchicalGrid では、'multipleCascade' は 'multiple' のように動作します。

行セレクター テンプレートを取得します。

行セレクターのカスタム テンプレートを設定します。

<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;

行をクリックして選択/選択解除するかどうかを取得/設定します。

Remarks

デフォルトで 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;

グリッドのソート ストラテジを取得または設定します。

Example

 <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>

ソートの状態を取得または設定します。

Remarks

双方向データ バインディングをサポートします。

Example

<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>

ソート オプション (単一または複数) を取得または設定します。 いずれかの mode プロパティを持つ ISortingOptions オブジェクトを受け入れます。

Example

const _sortingOptions: ISortingOptions = {
     mode: 'single'
}
```html
<igx-grid [sortingOptions]="sortingOptions"><igx-grid>

グリッド仮想化の状態を返します。

Remarks

開始インデックスおよび描画されるレコード数を含みます。

Example

const gridVirtState = this.grid1.virtualizationState;

表示される IgxColumnComponent の配列を返します。

Example

const visibleColumns = this.grid.visibleColumns.

グリッドの幅を取得または設定します。

Example

let gridWidth = this.grid.width;