IgxGridComponent の高度なフィルタリング状態を返します。

let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;

IgxGridComponent の高度なフィルタリング状態を設定します。

const logic = new FilteringExpressionsTree(FilteringLogic.And);
logic.filteringOperands = [
    {
         condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
         fieldName: 'ID',
         searchVal: 1
    },
    {
         condition: IgxStringFilteringOperand.instance().condition('contains'),
         fieldName: 'CompanyName',
         searchVal: 'a'
    }
];
this.grid.advancedFilteringExpressionsTree = logic;

高度なフィルタリングが有効かどうかを示す値を返します。

 let filtering = this.grid.allowAdvancedFiltering;

拡張フィルタリングが有効かどうかを示す値を設定します。 デフォルトで無効です。

<igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [showToolbar]="true" [autoGenerate]="true"></igx-grid>

フィルタリングが有効かどうかを返します。

 let filtering = this.grid.allowFiltering;

フィルタリングが有効かどうか設定します。 デフォルトで無効です。

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

現在のセル選択状態を返します。これは、none、single、または multiple になります。

セル選択モードを設定できます。 デフォルトでは、セル選択モードは multiple です。

IgxGridComponent の列非表示 UI が有効かどうかを返します。 デフォルトで無効 (false) に設定されます。

let gridColHiding = this.grid.columnHiding;

IgxGridComponent の列非表示 UI が有効かどうかを設定します。 UI を操作するには、以下の例のようにツールバーを有効にする必要があります。

<igx-grid [data]="Data" [autoGenerate]="true" [showToolbar]="true" [columnHiding]="true"></igx-grid>

定義済みの列固定 UI をツールバーに表示するかどうかを返します。

 let colPinning = this.grid.columnPinning;

定義済みの列固定 UI をツールバーに表示するかどうかを設定します。 デフォルトで無効です。

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

IgxGridComponent の列のデフォルト幅を設定する @Input プロパティ。

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

IgxGridComponent の列のデフォルト幅を設定する @Input プロパティ。

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

コンポーネントのテーマを返します。 デフォルト テーマは comfortable です。 利用可能なオプションは comfortable、cosy、および compact です。

let componentTheme = this.component.displayDensity;

コンポーネントのテーマを設定します。

レコードがなく、グリッドがフィルターされた場合に表示されるメッセージを返すアクセサー。

グリッドがフィルターされ、レコードがない場合に表示されるメッセージを設定する @Input プロパティ。

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

レコードがない場合に表示されるメッセージを返すアクセサー。

レコードがない場合に表示されるメッセージを設定する @Input プロパティ。

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

CSV へのエクスポート オプションが有効かどうかを返します。

const exportCsv = this.grid.exportCsv;

CSV へのエクスポート オプションを有効または無効にします。

<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>

CSV エクスポート ボタンのテキスト コンテンツを返します。

const csvText = this.grid.exportCsvText;

CSV エクスポート ボタンのテキスト コンテンツを設定します。

<igx-grid [exportCsvText]="'My Csv Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportExcel]="true"></igx-grid>

MS Excel へのエクスポート オプションが有効かどうかを返します。

cosnt excelExporter = this.grid.exportExcel;

MS Excel へのエクスポート オプションを有効または無効にします。

<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportExcel]="true"></igx-grid>

MS Export エクスポート ボタンのテキスト コンテンツを返します。

const excelText = this.grid.exportExcelText;

MS Export エクスポート ボタンのテキスト コンテンツを設定します。

<igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>

エクスポート ボタンのテキスト コンテンツを返します。

const exportText = this.grid.exportText;

エクスポート ボタンのテキスト コンテンツを設定します。

<igx-grid [data]="localData" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>

フィルター モードを返します。

 let filtering = this.grid.filterMode;

フィルター モードを設定します。 デフォルトで FilterMode.quickFilter に設定されます。

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

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

 let filterStrategy = this.grid.filterStrategy

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

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

フィルターされて並べ替え済みのデータを含む配列を返します。

const filteredSortedData = this.grid1.filteredSortedData;

フィルターされて並べ替え済みのデータを含む配列を返します。

const filteredSortedData = this.grid1.filteredSortedData;

IgxGridComponent のフィルタリング状態を返します。

let filteringExpressionsTree = this.grid.filteringExpressionsTree;

IgxGridComponent のフィルタリング状態を設定します。

const logic = new FilteringExpressionsTree(FilteringLogic.And, "ID");
logic.filteringOperands = [
    {
         condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
         fieldName: 'ID',
         searchVal: 1
    }
];
this.grid.filteringExpressionsTree = (logic);

双方向データ バインディング。

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

IgxGridComponent のフィルター ロジックを設定します。 デフォルト値は AND です。

<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>

IgxGridComponent のフィルター ロジックを設定します。 デフォルト値は AND です。

<igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>

IgxGridComponent の高さを返します。

let gridHeight = this.grid.height;

IgxGridComponent の高さを設定します。

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

IgxColumnComponent の定義済みの列非表示 UI のトグル ボタンに表示されるテキストを返します。

const hiddenColText = this.grid.hiddenColumnsText;

IgxColumnComponent の定義済みの列非表示 UI のトグル ボタンに表示されるテキストを設定します。

<igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>

行セレクターが非表示されているかどうか返します。

行セレクターの可視性を変更できます。 デフォルトでは、行セレクターが表示されます。

グリッドは読み込みインジケータを表すかどうかを返すアクセサー。

グリッドは読み込みインジケータを表すかどうかを設定する @Input プロパティ。

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

グリッドのロケールを返します。 設定されていない場合、ブラウザーの言語設定を返します。

グリッドのロケールを設定します。

現在のページ インデックスを返します。

let gridPage = this.grid.page;

現在のページ インデックスを設定します

<igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>

双方向データ バインディング。

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

ページング機能が有効または無効かどうかを返します。 デフォルト状態は無効 (false) です。

const paging = this.grid.paging;

ページング機能を有効または無効にします。

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

IgxGridComponent でページごとに表示される項目の数を返します。 デフォルトは 15 です。

let itemsPerPage = this.grid.perPage;

IgxGridComponent でページごとに表示される項目の数を設定します。

<igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>

IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを返します。

const pinnedText = this.grid.pinnedColumnsText;

IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを設定します。

<igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>

リソース文字列を返すアクセサー。

リソース文字列を設定するアクセサー。 デフォルトで EN リソースを使用します。

行を移動できるかどうかを設定します。

<igx-grid #grid [rowDraggable]="true"></igx-grid>

行を移動できるかどうかを設定します。

<igx-grid #grid [rowDraggable]="true"></igx-grid>

IgxGridRowComponent が編集可能かどうかを設定します。 デフォルトで false に設定されます。

let rowEditable = this.grid.rowEditable;

行を編集できるかどうかを設定します。

<igx-grid #grid [showToolbar]="true" [rowEditable]="true" [primaryKey]="'ProductID'" [columnHiding]="true"></igx-grid>

行の高さを返します。

const rowHeight = this.grid.rowHeight;

行の高さを設定します。

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

現在の行選択状態を返します。これは、none、single、または multiple になります。

行選択モードを設定できます。 デフォルトでは、行選択モードは none です。

IgxGridComponent のツールバーが表示されるかどうかを返します。

const toolbarGrid = this.grid.showToolbar;

IgxGridComponent のツールバーを表示または非表示にします。

<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>

IgxGridComponent の並べ替え状態を返します。

const sortingState = this.grid.sortingExpressions;

IgxGridComponent の並べ替え状態を設定します。

this.grid.sortingExpressions = [{
    fieldName: "ID",
    dir: SortingDirection.Desc,
    ignoreCase: true
}];

集計計算モードを返します。

 let summaryCalculationMode = this.grid.summaryCalculationMode;

集計計算モードを設定します。 デフォルトは rootAndChildLevels で、集計はルート レベルと各子レベルが計算されます。

<igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>

集計位置を返します。

 let summaryPosition = this.grid.summaryPosition;

集計位置を設定します。 デフォルトは bottom です。

<igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>

ツールバーのタイトルを返します。

const toolbarTitle  = this.grid.toolbarTitle;

ツールバーのタイトルを設定します。

<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>

IgxGridComponent の幅を返します。

let gridWidth = this.grid.width;

IgxGridComponent の幅を返します。

let gridWidth = this.grid.width;