IgxGridComponent 列を自動生成する @Input プロパティ。
デフォルト値は False です。
<igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>親が削除されると子レコードも削除されるかどうかを表す @Input プロパティ。 デフォルトで true に設定されて、親とともにすべての子を削除します。
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" cascadeOnDelete="false">
</igx-tree-grid>IgxTreeGridComponent の子データ キーを設定する @Input プロパティ。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [autoGenerate]="true"></igx-tree-grid>定義済みの列非表示 UI に表示されるタイトルを設定する @Input プロパティ。
<igx-grid [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"></igx-grid>列ピン固定 UI に表示されるタイトルを設定する @Input プロパティ。
<igx-grid #grid [data]="localData" [columnPinning]="'true" [columnPinningTitle]="'Column Hiding'" [autoGenerate]="true"></igx-grid>カスタム テンプレートがある場合は、行ドラッグのインジケーター アイコンを描画するために使用されます。
// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.dragIndicatorIconTemplate = myCustomTemplate;<!-- マークアップに設定 -->
<igx-grid #grid>
...
<ng-template igxDragIndicatorIcon>
<igx-icon fontSet="material">info</igx-icon>
</ng-template>
</igx-grid>フィルターされた IgxGridComponent が空の場合に表示されるテンプレートのテンプレート参照。
const emptyTempalte = this.grid.emptyGridTemplate;IgxGridComponent が空の場合に表示されるテンプレートのテンプレート参照。
const emptyTempalte = this.grid.emptyGridTemplate;IgxGridComponent が空の場合にカスタム テンプレートを設定する @Input プロパティ。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>グリッドですべての偶数な IgxGridRowComponent にスタイル クラスを追加する @Input プロパティ。
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>An @Input property that sets the foreign key of the IgxTreeGridComponent.
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [autoGenerate]="true">
</igx-tree-grid>行に子があるかどうかを示すキーを設定する @Input プロパティ。 このプロパティは、ロードオンデマンドの場合のみ使用されます。
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[hasChildrenKey]="'hasEmployees'">
</igx-tree-grid>ヘッダー折りたたみインジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。
ヘッダー展開インジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。
要求に応じて子行をロードするためのコールバックを提供する @Input プロパティ。
<igx-tree-grid [data]="employeeData" [primaryKey]="'employeeID'" [foreignKey]="'parentID'" [loadChildrenOnDemand]="loadChildren">
</igx-tree-grid>public loadChildren = (parentID: any, done: (children: any[]) => void) => {
this.dataService.getData(parentID, children => done(children));
}IgxGridComponent が読み込み中の場合にカスタム テンプレートを設定する @Input プロパティ。
<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>グリッドですべての奇数な IgxGridRowComponent にスタイル クラスを追加する @Input プロパティ。
<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>IgxGridCellComponent がクリックされたときに発生します。IgxGridCellComponent を返します。
<igx-grid #grid (onCellClick)="onCellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>public onCellClick(e){
alert("セルはクリックされました。");
}グリッドで IgxGridCellComponent の編集が実行されたときにイベントを発生する @Output プロパティ。
編集を完了してセルの編集モードを終了する時にイベントが発生します。
このイベントはキャンセルできます。
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }
editDone(event: IGridEditEventArgs){
const value: IgxColumnComponent = event.newValue;
}<igx-grid #grid3 (onCellEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>グリッドで IgxGridCellComponent 編集を実行した後に値が送信されてない (Esc キーが押された) 場合にイベントを発生する @Output プロパティ。
このイベントはキャンセルできます。
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } newValue: object, oldValue: object, rowID: int }
editCancel(event: IGridEditEventArgs){
const rowID: IgxColumnComponent = event.rowID;
}<igx-grid #grid3 (onCellEditCancel)="editCancel($event)" [data]="remote | async" [primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>IgxGridCellComponent は編集モードに入るときに、イベントを発生する @Output プロパティ。
このイベントはキャンセルできます。
args: IGridEditEventArgs = { cancel: bool, cellID: { columnID: int, rowID: int, rowIndex: int } oldValue: object, rowID: int }
editStart(event: IGridEditEventArgs){
const value: IgxColumnComponent = event.newValue;
}<igx-grid #grid3 (onCellEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid>グリッド列が初期化されるときに発生します。列オブジェクトを返します。
<igx-grid #grid [data]="localData" [onColumnInit]="initColumns($event)" [autoGenerate]="true"></igx-grid>initColumns(event: IgxColumnComponent) {
const column: IgxColumnComponent = event;
column.filterable = true;
column.sortable = true;
column.editable = true;
}IgxColumnComponent 移動操作の間に発生されます。
ソースとターゲットの IgxColumnComponent オブジェクトを返します。このイベントはキャンセルできます。
moving(event: IColumnMovingEventArgs){
const moving = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMoving)="moving($event)"></igx-grid>IgxColumnComponent の移動を終了したときに発生されます。
ソースとターゲットの IgxColumnComponent オブジェクトを返します。
movingEnds(event: IColumnMovingEndEventArgs){
const movingEnds = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingEnd)="movingEnds($event)"></igx-grid>IgxColumnComponent の移動を開始したときに発生されます。移動した IgxColumnComponent オブジェクトを返します。
movingStart(event: IColumnMovingStartEventArgs){
const movingStarts = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnMovingStart)="movingStart($event)"></igx-grid>IgxColumnComponent がピン固定されたときに発生します。
列に挿入するインデックスは insertAtIndex プロパティによって変更できます。
public columnPinning(event) {
if (event.column.field === "Name") {
event.insertAtIndex = 0;
}
}IgxColumnComponent がサイズ変更されたときに発生します。
IgxColumnComponent オブジェクトの古い幅および新しい幅を返します。
resizing(event: IColumnResizeEventArgs){
const grouping = event;
}<igx-grid #grid [data]="localData" (onColumnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>IgxColumnComponent の表示状態を変更するときに発生されます。 引数: { column: any, newValue: boolean }
visibilityChanged(event: IColumnVisibilityChangedEventArgs){
const visiblity = event;
}<igx-grid [columnHiding]="true" [showToolbar]="true" (onColumnVisibilityChanged)="visibilityChanged($event)"></igx-grid>IgxGridCellComponent が右クリックされたときに発生されます。IgxGridCellComponent オブジェクトを返します。
contextMenu(event: IGridCellEventArgs){
const resizing = event;
console.log(resizing);
}<igx-grid #grid [data]="localData" (onContextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>新しいデータ チャンクが可視化から読み込まれたときに発生されます。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>IgxGridCellComponent がダブルクリックされたときに発生されます。IgxGridCellComponent オブジェクトを返します。
dblClick(event: IGridCellEventArgs){
const dblClick = event;
console.log(dblClick);
}<igx-grid #grid [data]="localData" (onDoubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>フィルタリングが UI で実行されたときに発生されます。 フィルターされた列のフィルタリング式ツリーを返します。
filteringDone(event: IFilteringExpressionsTree){
const filteringTree = event;
}<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onFilteringDone)="filteringDone($event)"></igx-grid>コピー操作が実行されたときに発生します。
[clipboardOptions]{@link IgxGridBaseComponent#clipboardOptions} を通じてコピー動作が有効になっている場合にのみ発生します。
グリッドの内の要素に対してキーダウンがトリガーされたときに発生します。 このイベントは、グリッドでキーの組み合わせがサポートされている場合にのみ発生します。 ターゲット タイプ、ターゲット オブジェクト、および元のイベントを返します。このイベントはキャンセルできます。
customKeydown(args: IGridKeydownEventArgs) {
const keydownEvent = args.event;
} <igx-grid (onGridKeydown)="customKeydown($event)"></igx-grid>ページングが実行されたときに発生されます。前のページおよび次のページを含むオブジェクトを返します。
pagingDone(event: IPageEventArgs){
const paging = event;
}<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>ドラッグ選択またはキーボード選択による範囲選択を行ったときに発生します。
IgxGridRowComponent が API によって IgxGridComponent に追加されている間に発生されます。
新しい IgxGridRowComponent オブジェクトのデータを返します。
rowAdded(event: IRowDataEventArgs){
const rowInfo = event;
}<igx-grid #grid [data]="localData" (onRowAdded)="rowAdded($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>IgxGridRowComponent が IgxGridComponent API によって削除されたときに発生されます。
IRowDataEventArgs オブジェクトを返します。
rowDeleted(event: IRowDataEventArgs){
const rowInfo = event;
}<igx-grid #grid [data]="localData" (onRowDeleted)="rowDeleted($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>行をドロップしたときに発行されます。 ドロップされた行を返します。
行をドラッグし始めたときに発生します。 ドラッグされた行を返します。
[rowEditable]="true" & endEdit(true) が呼び出されるときに、イベントを発生する @Output プロパティ。
編集モードで編集した行の編集禁止セルを選択し、行の編集時にページング操作をして、列のサイズ変更時、列ピン固定時、rowEditingOverlay 内で Commit ボタンを押下また移動時、またはセル編集時に Enter キーを押すと発生されます。
このイベントはキャンセルできます。
args: IGridEditEventArgs = {
cancel: bool,
newValue:
<igx-grid #grid3 (onRowEdit)="editDone($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editDone(event: IGridEditEventArgs) {
const originalRowObj = event.oldValue;
const updatedRowObj = event.newValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
}[rowEditable]="true" & endEdit(false) が呼び出されるときにイベントを発生する @Output プロパティ。
セル編集のときに Esc キーを押して、行編集オーバーレイにキャンセル ボタンを押すと発生されます。
このイベントはキャンセルできます。
args: IGridEditEventArgs = {
cancel: bool,
newValue:
<igx-grid #grid3 (onRowEditCancel)="editCancel($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editCancel(emitted: { row: IgxGridRowComponent, newValue: any, oldValue: any }): void {
const originalRowObj = event.oldValue;
const updatedRowObj = event.newValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
}[rowEditable]="true" 行が編集モードに入るときに、イベントを発生する @Output プロパティ。 このイベントはキャンセルできます。
args: IGridEditEventArgs = {
cancel: bool,
oldValue:
<igx-grid #grid3 (onRowEditEnter)="editStart($event)" [data]="remote | async" (onSortingDone)="process($event)"
[primaryKey]="'ProductID'" [rowEditable]="true">
<igx-column [sortable]="true" [field]="'ProductID'"></igx-column>
<igx-column [editable]="true" [field]="'ProductName'"></igx-column>
<igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
</igx-grid> editStart(event: IGridEditEventArgs) {
const editedRowObj = event.oldValue;
const cancelValue = event.cancel;
const rowID = event.rowID;
} IgxGridCellComponent が選択されたときに発生します。
<igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>public onCellClickChange(e){
alert("選択された行は変更されました。");
}行の展開状態が変更されているときに呼び出されます。
rowToggle(event: IRowToggleEventArgs){
// 行の ID。
const rowID = event.rowID;
// 新しい展開状態。
const newExpandedState = event.expanded;
// onRowToggle をトリガーした元のイベント。
const originalEvent = event.event;
// イベントをキャンセルするかどうか。
event.cancel = true;
}<igx-tree-grid [data]="employeeData" (onRowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-tree-grid>IgxGridCellComponent が選択されたときに発生します。IgxGridCellComponent を返します。
<igx-grid #grid (onSelection)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>public onCellSelect(e){
alert("セルは選択されました。");
}並べ替えが UI で実行されたときに発生されます。並べ替え式を返します。
<igx-grid #grid [data]="localData" [autoGenerate]="true" (onSortingDone)="sortingDone($event)"></igx-grid>sortingDone(event: SortingDirection){
const sortingDirection = event;
}ユーザーがエクスポート処理が開始すると発生されます。
toolbarExporting(event: IGridToolbarExportEventArgs){
const toolbarExporting = event;
}グリッドのページング UI のためにカスタム ng-template を提供できます。
<igx-grid #grid [paging]="true" [myTemplate]="myTemplate" [height]="'305px'"></igx-grid>IgxGridComponent のプライマリ キーを設定する @Input プロパティ。
<igx-grid #grid [data]="localData" [showToolbar]="true" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>処理済み (フィルターと並べ替え済み) のルートITreeGridRecord の配列のマップを返します。
// primaryKey=2 の処理済みレコードを取得します。
const states = this.grid.processedRecords.get(2);処理済み (フィルターと並べ替え済み) のルートITreeGridRecord の配列を返します。
// index=2 の処理済みルート レコールドを取得します。
const states = this.grid.processedRootRecords[2];すべての ITreeGridRecord のマップを返します。
// primaryKey=2 のルート レベルを取得します。
const states = this.grid.records.get(2);ITreeGridRecord のルート レベルの配列を返します。
// index=2 のルート レベルを取得します。
const states = this.grid.rootRecords[2];行折りたたみインジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。
行展開インジケーターをレンダリングするときに使用する必要があるカスタムテンプレート (存在する場合)。
グリッドの初期化後に列が自動で再生成されることを許可するプロパティ。 これにより、グリッドのリモート データへのバインドと列の自動生成を同時に行うことができます。 新しいデータが割り当てらる時に列が再生成されないため、列が生成される後このプロパティは無効にされることに注意してください。
this.grid.shouldGenerate = true;
this.remoteData = this.remoteService.remoteData;IgxToolbarComponent へのアクセスを提供します。
const gridToolbar = this.grid.toolbar;要求に応じて一意の列の値をロードするためのコールバックを提供する @Input プロパティ。 このプロパティが提供される場合、生成される一意の値は Excel スタイル フィルタリングで使用されます。
<igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>public columnValuesStrategy = (column: IgxColumnComponent,
filteringExpressionsTree: IFilteringExpressionsTree,
done: (uniqueValues: any[]) => void) => {
this.dataService.getColumnData(column, filteringExpressionsTree, uniqueValues => done(uniqueValues));
}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>ピン固定の IgxColumnComponent のコンテナーの最大幅を返します。
幅はグリッド幅全体の 80% です。
const maxPinnedColWidth = this.grid.calcPinnedContainerMaxWidth;現在のセル選択状態を返します。これは、none、single、または 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>IgxChipComponent の配列を返します。
const colums = this.grid.columns.IgxTreeGridComponent にデータの配列をインポートする @Input プロパティ。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>IgxTreeGridComponent にデータの配列をインポートする @Input プロパティ。
<igx-tree-grid [data]="Data" [autoGenerate]="true"></igx-tree-grid>現在描画されている IgxGridRowComponent のリスト。
const dataList = this.grid.dataRowList;グリッドに表示される、現在変換されているページングされた/フィルターされた/並べ替えされた/グループ化された データを返します。
const dataView = this.grid.dataView;IgxGridHeaderGroupComponent の最小許容幅を返します。
ヘッダー グループ コンポーネントの幅を制限するために内部で使用されます。
以下の値は、ヘッダーセルのデフォルトの右/左パディング値に基づいています。
IgxGridComponent の行高さを返します。
const rowHeigh = this.grid.defaultRowHeight;コンポーネントのテーマを返します。
デフォルト テーマは 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>IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>IgxTreeGridComponent で展開されるレベルの数を設定する @Input プロパティ。デフォルトで Infinity に設定されて、つまりすべてのレベルは展開されます。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" expansionDepth="1" [autoGenerate]="true"></igx-tree-grid>キーと値のペア [行 Id、展開状態] のリストを返します。デフォルト状態に異なる状態のみ含まれます。
const expansionStates = this.grid.expansionStates;双方向データ バインディング。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [(expansionStates)]="model.expansionStates">
</igx-tree-grid>キーと値のペア [行 Id、展開状態] のリストを設定します。
const states = new Map<any, boolean>();
states.set(1, true);
this.grid.expansionStates = states;双方向データ バインディング。
<igx-tree-grid #grid [data]="employeeData" [childDataKey]="'employees'" [(expansionStates)]="model.expansionStates">
</igx-tree-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>すべての IgxGridFilteringCellComponent のリスト。
const filterCells = this.grid.filterCellList;フィルター モードを返します。
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>IgxGridComponent のフィルター済みデータを含むオブジェクトの配列を返します。
let filteredData = this.grid.filteredData;IgxGridComponent のフィルター済みデータを含むオブジェクトの配列を設定します。
this.grid.filteredData = [{
ID: 1,
Name: "A"
}];フィルターされて並べ替え済みのデータを含む配列を返します。
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 に列グループがあるかどうかを返します。
const groupGrid = this.grid.hasColumnGroups;IgxGridComponent が複数行レイアウト定義用の列レイアウトを持っているかどうかを返します。
const layoutGrid = this.grid.hasColumnLayouts;IgxGridComponent に編集可能な列があるかどうかを返します。
const editableGrid = this.grid.hasEditableColumns;IgxGridComponent にフィルター可能な列があるかどうかを返します。
const filterableGrid = this.grid.hasFilterableColumns;IgxGridComponent に移動可能な列があるかどうかを返します。
const movableGrid = this.grid.hasMovableColumns;IgxGridComponent に並べ替え可能な列があるかどうかを返します。
const sortableGrid = this.grid.hasSortableColumns;IgxGridComponent に集計可能な列があるかどうかを返します。
const summarizedGrid = this.grid.hasSummarizedColumns;すべての IgxGridHeaderComponent のリスト。
const headers = this.grid.headerCellList;すべての IgxGridHeaderGroupComponent のリスト。
const headerGroupsList = this.grid.headerGroupsList;IgxGridComponent のヘッダーの幅を返します。
let gridHeaderWidth = this.grid.headerWidth;IgxGridComponent の高さを返します。
let gridHeight = this.grid.height;IgxGridComponent の高さを設定します。
<igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>非表示の IgxColumnComponent の数を返します。
`typescript
const hiddenCol = this.grid.hiddenColumnsCount;
IgxColumnComponent の定義済みの列非表示 UI のトグル ボタンに表示されるテキストを返します。
`typescript
const hiddenColText = this.grid.hiddenColumnsText;
IgxColumnComponent の定義済みの列非表示 UI のトグル ボタンに表示されるテキストを設定します。
<igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>行セレクターが非表示されている場合は true を返します。
行セレクターの可視性を変更できます。 デフォルトでは、行セレクターが表示されます。
id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>id 属性の値を設定する @Input プロパティ。提供されていない場合、自動的に生成されます。
<igx-tree-grid [id]="'igx-tree-grid-1'"></igx-tree-grid>現在のページが最初のページかどうかを返します。
const firstPage = this.grid.isFirstPage;現在のページが最後のページかどうかを返します。
const lastPage = this.grid.isLastPage;グリッドは読み込みインジケータを表すかどうかを返すアクセサー。
グリッドは読み込みインジケータを表すかどうかを設定する @Input プロパティ。
<igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>グリッドのロケールを返します。 設定されていない場合、ブラウザーの言語設定を返します。
グリッドのロケールを設定します。
IgxGridComponent のネイティブ要素を返します。
const nativeEl = this.grid.nativeElement.現在のページ インデックスを返します。
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;双方向データ バインディング。
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>IgxGridComponent でページごとに表示される項目の数を設定します。
<igx-grid #grid [data]="Data" [paging]="true" [perPage]="5" [autoGenerate]="true"></igx-grid>双方向データ バインディング。
<igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>ピン固定される IgxColumnComponent の配列を返します。
const pinnedColumns = this.grid.pinnedColumns.IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを返します。
const pinnedText = this.grid.pinnedColumnsText;IgxColumnComponent の定義済みの列ピン固定 UI のトグル ボタンに表示されるテキストを設定します。
<igx-grid [pinnedColumnsText]="'PinnedCols Text" [data]="data" [width]="'100%'" [height]="'500px'"></igx-grid>ピン固定の IgxColumnComponent のコンテナーの現在幅を返します。
const pinnedWidth = this.grid.getPinnedWidth;リソース文字列を返すアクセサー。
リソース文字列を設定するアクセサー。 デフォルトで 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>IgxGridRowComponent のリスト。
const rowList = this.grid.rowList;ロードオンデマンドが有効になっているときに行ローディング インジケーターのテンプレートを提供する @Input プロパティ。
`html
<ng-template #rowLoadingTemplate>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[rowLoadingIndicatorTemplate]="rowLoadingTemplate">
`
ロードオンデマンドが有効になっているときに行ローディング インジケータのテンプレートを提供する @Input プロパティ。
`html
<ng-template #rowLoadingTemplate>
<igx-tree-grid #grid [data]="employeeData" [primaryKey]="'ID'" [foreignKey]="'parentID'"
[loadChildrenOnDemand]="loadChildren"
[rowLoadingIndicatorTemplate]="rowLoadingTemplate">
`
現在のセル選択状態を返します。これは、none、single、または multiple になります。
行選択モードを設定できます。 デフォルトのヘッダーのサイズ設定モードは none です。
IgxGridCellComponent 選択されているメモの配列を返します。
const selectedCells = this.grid.selectedCells;IgxGridComponent のツールバーが表示されるかどうかを返します。
const toolbarGrid = this.grid.showToolbar;IgxGridComponent のツールバーを表示または非表示にします。
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" ></igx-grid>IgxGridComponent の並べ替え状態を返します。
const sortingState = this.grid.sortingExpressions;双方向データ バインディング。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>IgxGridComponent の並べ替え状態を設定します。
this.grid.sortingExpressions = [{
fieldName: "ID",
dir: SortingDirection.Desc,
ignoreCase: true
}];双方向データ バインディング。
<igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>集計計算モードを返します。
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>カスタム コンテンツを表示するためにツールバーで使用されるテンプレートを返します。
let customContentTemplate = this.grid.toolbarCustomContentTemplate;ツールバーのタイトルを返します。
const toolbarTitle = this.grid.toolbarTitle;ツールバーのタイトルを設定します。
<igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [toolbarTitle]="'My Grid'"></igx-grid>合計ページ数を返します。
const totalPages = this.grid.totalPages;合計レコード数を返します。 ページングが有効な場合のみ動作します。
const totalRecords = this.grid.totalRecords;IgxGridComponent の合計幅を返します。
const gridWidth = this.grid.totalWidth;グリッドのトランザクション サービスを取得します。
ピン固定されない IgxColumnComponent のコンテナーの最小幅を返します。
幅はグリッド幅全体の 20% です。
const minUnpinnedColWidth = this.grid.unpinnedAreaMinWidth;ピンが解除されている IgxColumnComponent` の配列を返します。
const unpinnedColumns = this.grid.unpinnedColumns.ピン固定の IgxColumnComponent のコンテナーの最大幅を返します。
const unpinnedWidth = this.grid.getUnpinnedWidth;IgxChipComponent の配列を返します。
const visibleColumns = this.grid.visibleColumns.IgxGridComponent の幅を返します。
let gridWidth = this.grid.width;IgxGridComponent の幅を返します。
let gridWidth = this.grid.width;所定のデータで新しい IgxTreeGridRowComponent を作成します。parentRowID を指定しない場合、新しく作成された行はルート レベルに追加されます。そうでない場合、指定した parentRowID に一致する primaryKey の行は子として追加されます。parentRowID は存在しない場合、エラーを発生します。
const record = {
ID: this.grid.data[this.grid1.data.length - 1].ID + 1,
Name: this.newRecord
};
this.grid.addRow(record, 1); // ID=1 の行に新しい子行を追加します。name が提供された場合、対応する IgxColumnComponent のフィルター状態をクリアします。それ以外の場合、すべての IgxColumnComponent のフィルター状態をクリアします。
this.grid.clearFilter();セルのすべての強調表示を削除します。
this.grid.clearSearch();name が提供された場合、対応する IgxColumnComponent の並べ替え状態をクリアします。それ以外の場合、すべての IgxColumnComponent の並べ替え状態をクリアします。
this.grid.clearSort();高度なフィルタリング ダイアログを閉じます。
変更を適用する必要があるかどうかを示します。
すべての行を縮小します。
this.grid.collapseAll();指定した rowID の IgxTreeGridRowComponent を縮小します。
縮小される行の識別子。
this.grid.collapseRow(2);プライマリキーによって IgxGridRowComponent および対応するデータ レコードを削除します。
primaryKey プロパティの設定が必要です。
メソッドは、rowID である rowSelector をパラメーターとして受け取ります。
this.grid1.deleteRow(0);すべての行を選択解除します。 注: デフォルトで、フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 パラメーター onlyFilterData を false に設定する場合、削除された行を除くグリッド内のすべての行が選択されます。
this.grid.deselectAllRows();指定した行を ID によって選択解除します。
this.grid.deselectRows([1,2,5]);指定した列で集計を無効にします。
grid.disableSummaries('ProductName');配列の列で集計を無効にします。
grid.disableSummaries([{ fieldName: 'ProductName' }]);指定した列で集計を有効にし、customSummary を適用します。 customSummary を設定しない場合、列のデータ型のデフォルト集計が適用されます。
grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);配列の列で集計を有効にします。
grid.enableSummaries('ProductName');現在の行の行トランザクションを完成します。
commit === trueの場合、未解決状態からデータ (またはトランザクション サービス) へ渡します。
イベントにバインドします。
<button igxButton (click)="grid.endEdit(true)">Commit Row</button>すべての行を展開します。
this.grid.expandAll();指定した rowID の IgxTreeGridRowComponent を展開します。
展開される行の識別子。
this.grid.expandRow(2);単一の IgxColumnComponent をフィルターします。
public filter(term) {
this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
}同じ条件で IgxGridComponent のすべての IgxColumnComponent をフィルターします。
grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));グリッドで文字列の次の出現を検索します。表示されていない場合はセルへスクロールします。 グリッドに文字列が何回含まれるかを返します。
this.grid.findNext("financial");検索する文字列。
オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルトは false)。
オプションで、テキストは値全体に一致するかどうか (デフォルトは false)。
グリッドで文字列の前の出現を検索します。表示されていない場合はセルへスクロールします。 グリッドに文字列が何回含まれるかを返します。
this.grid.findPrev("financial");検索する文字列。
オプションで、検索する文字列と検索で大文字と小文字の区別をするかどうか (デフォルトは false)。
オプションで、テキストは値全体に一致するかどうか (デフォルトは false)。
条件と一致する IgxGridCellComponent を返します。
const myCell = this.grid1.getCellByColumn(2,"UnitPrice");指定されたプライマリキーおよび列フィールドによって IgxGridCellComponent オブジェクトを返します。
primaryKey プロパティの設定が必要です。
grid.getCellByKey(1, 'index');いずれかの rowID に一致します。
フィールド名によって IgxColumnComponent を返します。
const myCol = this.grid1.getColumnByName("ID");IgxGridHeaderGroupComponent に設定される width を返します。
特定の基準に一致する、現在位置に従って次のセルを定義する ICellPosition を返します。
getPreviousCell メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。
const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);ピン固定領域の計算幅を取得します。
const pinnedWidth = this.grid.getPinnedWidth();ピン固定の領域の非表示の列を考慮に入れるかどうか。
特定の基準に一致する、現在位置に従って前のセルを定義する ICellPosition を返します。
getPreviousCell メソッド の 3 番目のパラメーターとしてコールバック関数を渡すことができます。
コールバック関数は、引数として IgxColumnComponent を受け入れます。
const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);インデックスによって IgxRowComponent を返します。
const myRow = this.grid1.getRowByIndex(1);指定されたプライマリキーによって IgxGridRowComponent オブジェクトを返します。
primaryKey プロパティの設定が必要です。
const myRow = this.grid1.getRowByKey("cell5");IgxGridComponent を変更検出のため手動的にマークします。
this.grid1.markForCheck();列を指定したドロップ ターゲットに移動します。
grid.moveColumn(compName, persDetails);このメソッドは提供された rowindex と visibleColumnIndex に基づいてグリッド内の位置にナビゲートすることを可能にし、{targetType：GridKeydownTargetType、target：Object} を受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。
this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });グリッドが最後のページにない場合、IgxGridComponent の次のページに移動します。
this.grid1.nextPage();高度なフィルタリング ダイアログを開きます。
指定したページ インデックスに移動します。
this.grid1.paginate(1);列をフィールド名によってピン固定します。操作が成功したかどうかを返します。
this.grid.pinColumn("ID");グリッドが最初のページにない場合、IgxGridComponent の前のページに移動します。
this.grid1.previousPage();グリッドの幅/高さのサイズを再計算します。グリッドのサイズに影響する DOM 要素を手動的にサイズ変更するときに実行します。
this.grid.reflow();既存の検索を再適用します。 グリッドに前回の検索テキストが何回含まれるかを返します。
this.grid.refreshSearch();すべての行を選択します。 注: デフォルトで、フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows() はフィルターされた行のみを選択/選択解除します。 パラメーター onlyFilterData を false に設定する場合、削除された行を除くグリッド内のすべての行が選択されます。
this.grid.selectAllRows();
this.grid.selectAllRows(false);指定した行を ID によって選択します。
this.grid.selectRows([1,2,5], true);True の場合、現在の選択をクリアします。
現在の選択状態を取得します。 選択済み行の ID (primaryKey または rowData) を持つ配列を返します。
const selectedRows = this.grid.selectedRows();単一の IgxColumnComponent を並べ替えます。
IgxGridComponent の IgxColumnComponent を提供した並べ替え式の配列に基づいて並べ替えます。
this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });指定した列の表示状態を切り替えます。
this.grid1.toggleColumnVisibility({
column: this.grid1.columns[0],
newValue: true
});指定した rowID の IgxTreeGridRowComponent の展開状態を切り替えます。
切り替える行の識別子。
this.grid.toggleRow(2);列をフィールド名によってピン固定解除します。操作が成功したかどうかを返します。
this.grid.pinColumn("ID");プライマリキーによって IgxGridRowComponent および対応するデータ レコードを更新します。
primaryKey プロパティの設定が必要です。
this.gridWithPK.updateCell('Updated', 1, 'ProductName');設定する新しい値。
rowID に対応します。
列フィールドに対応します。
rowSelector パラメーター と指定された値を持つデータ ソース レコードに指定される IgxGridRowComponent を更新します。
このメソッドは、プライマリ キーがグリッドで指定されている場合のみ要求した更新を適用します。
grid.updateRow({
ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
}, 1);rowID に対応します。
Controls the copy behavior of the grid.
Apply the columns formatters (if any) on the data in the clipboard output.
Include the columns headers in the clipboard output.
Enables/disables the copy behavior
The separator used for formatting the copy output. Defaults to \t.
Ignite UI for Angular Tree Grid - ヘルプ
Ignite UI Tree Grid は統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、並べ替え、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。 例:
<igx-tree-grid [data]="employeeData" primaryKey="employeeID" foreignKey="PID" autoGenerate="false"> <igx-column field="first" header="First Name"></igx-column> <igx-column field="last" header="Last Name"></igx-column> <igx-column field="role" header="Role"></igx-column> </igx-tree-grid>