追加のテンプレート コンテキストで提供されるカスタム プロパティを設定または取得します。
<igx-column [additionalTemplateContext]="contextObject">
<ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
{{ props }}
</ng-template>
</igx-column>
IgxColumnComponent
列ヘッダーが自動サイズ調整ロジックに含まれるかどうかを設定または取得します。
デフォルトの div
など、列ヘッダーのテンプレートが親に基づいてサイズ設定される場合に役に立ちます。
デフォルト値は false
です。
let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
IgxColumnComponent
列セルの条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。 例:
callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };
<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>
IgxColumnComponent
列セルに条件付きスタイル プロパティを設定します。
ngStyle
と同様、キーがスタイル プロパティであり、
値が評価用の式であるオブジェクト リテラルを受け入れます。
cellClasses
と同様、コールバック関数を受け入れます。
styles = {
background: 'royalblue',
color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
}
<igx-column [cellStyles]="styles"></igx-column>
IgxColumnComponent
子列を設定または取得します。
let columnChildren = this.column.children;
this.column.children = childrenColumns;
IgxColumnComponent
現在のフィールドが終了する位置の列のインデックス。 colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。
<igx-column-layout>
<igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
フィールドの開始位置となる列インデックス。
<igx-column-layout>
<igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
列値のデータ タイプを設定または取得します。
デフォルト値は string
です。
let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
IgxColumnComponent
非表示が無効かどうかを取得します。
let isHidingDisabled = this.column.disableHiding;
IgxColumnComponent
ピン固定が無効かどうかを取得します。
let isPinningDisabled = this.column.disablePinning;
IgxColumnComponent
列のフィルターが可能かどうかを設定または取得します。
デフォルト値は true
です。
let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
IgxColumnComponent
列セルに条件付きスタイル プロパティを設定します。
デフォルト値は true
です。
let filteringIgnoreCase = this.column.filteringIgnoreCase;
<igx-column [filteringIgnoreCase] = "false"></igx-column>
IgxColumnComponent
Applies display format to cell values in the column. Does not modify the underlying data.
Note: As the formatter is used in places like the Excel style filtering dialog, in certain
scenarios (remote filtering for example), the row data argument can be undefined
.
In this example, we check to see if the column name is Salary, and then provide a method as the column formatter to format the value into a currency string.
columnInit(column: IgxColumnComponent) {
if (column.field == "Salary") {
column.formatter = (salary => this.format(salary));
}
}
format(value: number) : string {
return formatCurrency(value, "en-us", "$");
}
const column = this.grid.getColumnByName('Address');
const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
column.formatter = addressFormatter;
IgxColumnComponent
列のグループ化が可能かどうかを設定または取得します。
デフォルト値は false
です。
let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
IgxColumnComponent
header
値を設定または取得します。
let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
IgxColumnComponent
列ヘッダーのクラス セレクターを設定または取得します。
let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
IgxColumnComponent
列グループ ヘッダーのクラス セレクターを設定または取得します。
let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
IgxColumnComponent
列ヘッダー グループ ラッパーに条件付きスタイル プロパティを設定します。
ngStyle
と同様、キーがスタイル プロパティであり、
値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'royalblue',
color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerGroupStyles]="styles"></igx-column>
IgxColumnComponent
列ヘッダーに条件付きスタイル プロパティを設定します。
ngStyle
と同様、キーがスタイル プロパティであり、
値が評価用の式であるオブジェクト リテラルを受け入れます。
styles = {
background: 'royalblue',
color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerStyles]="styles"></igx-column>
IgxColumnComponent
列の最大の width
を設定または取得します。
let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
IgxColumnComponent
バージョン 13.1.0。代わりに IgxGridComponent.moving
を使用してください。
列が移動可能かどうかを設定または取得します。
デフォルト値は false
です。
let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
IgxColumnComponent
親列を設定または取得します。
let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
IgxColumnComponent
列のサイズ変更が可能かどうかを設定または取得します。
デフォルト値は false
です。
let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
IgxColumnComponent
現在のフィールドが終了する行のインデックス。 rowStart と rowEnd の間の行数によって、そのフィールドまでの行数が決まります。
<igx-column-layout>
<igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
フィールドの開始位置となる行インデックス。
<igx-column-layout>
<igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
列が検索可能 (searchable
) かどうかを設定または取得します。
デフォルト値は true
です。
let isSearchable = this.column.searchable';
<igx-column [searchable] = "false"></igx-column>
IgxColumnComponent
列のソートが可能かどうかを設定または取得します。
デフォルト値は false
です。
let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
IgxColumnComponent
列ソートが大文字と小文字を区別するかどうかを設定または取得します。
デフォルト値は true
です。
let sortingIgnoreCase = this.column.sortingIgnoreCase;
<igx-column [sortingIgnoreCase] = "false"></igx-column>
IgxColumnComponent
The summaryFormatter is used to format the display of the column summaries.
In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.
columnInit(column: IgxColumnComponent) {
if (column.field == "OrderDate") {
column.summaryFormatter = this.summaryFormat;
}
}
summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
const result = summary.summaryResult;
if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
const pipe = new DatePipe('fr-FR');
return pipe.transform(result,'mediumDate');
}
return result;
}
IgxColumnComponent
title
値を設定または取得します。
let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
IgxColumnComponent
bodyTemplate
への参照を返します。
let bodyTemplate = this.column.bodyTemplate;
IgxColumnComponent
ボディのテンプレートを設定します。
<ng-template #bodyTemplate igxCell let-val>
<div style = "background-color: yellowgreen" (click) = "changeColor(val)">
<span> {{val}} </span>
</div>
</ng-template>
@ViewChild("'bodyTemplate'", {read: TemplateRef })
public bodyTemplate: TemplateRef<any>;
this.column.bodyTemplate = this.bodyTemplate;
IgxColumnComponent
列が ColumnGroup
かどうかを示すブール値を返します。
let columnGroup = this.column.columnGroup;
IgxColumnComponent
列が複数行レイアウト用の ColumnLayout
であるかどうかを示すブール値を返します。
let columnGroup = this.column.columnGroup;
IgxColumnComponent
列が複数行レイアウト用の ColumnLayout
の ColumnLayout
の子であるかどうかを示すブール値を返します。
let columnLayoutChild = this.column.columnLayoutChild;
IgxColumnComponent
列のデフォルト最小の width
を取得します。
let defaultMinWidth = this.column.defaultMinWidth;
IgxColumnComponent
列の編集が可能かどうかを取得します。
デフォルト値は false
です。
let isEditable = this.column.editable;
IgxColumnComponent
列の編集が可能かどうかを設定します。
this.column.editable = true;
<igx-column [editable] = "true"></igx-column>
IgxColumnComponent
検証エラー テンプレートへの参照を返します。
let errorTemplate = this.column.errorTemplate;
エラー テンプレートを設定します。
<ng-template igxCellValidationError let-cell="cell" #errorTemplate >
<div *ngIf="cell.validation.errors?.['forbiddenName']">
This name is forbidden.
</div>
</ng-template>
@ViewChild("'errorTemplate'", {read: TemplateRef })
public errorTemplate: TemplateRef<any>;
this.column.errorTemplate = this.errorTemplate;
field
値を設定または取得します。
let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
IgxColumnComponent
列のフィルター セルへ参照を返します。
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let filterell = column.filterell;
IgxColumnComponent
filterCellTemplate
への参照を返します。
let filterCellTemplate = this.column.filterCellTemplate;
IgxColumnComponent
クイック フィルター テンプレートを設定します。
<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column">
<input (input)="onInput()">
</ng-template>
@ViewChild("'filterCellTemplate'", {read: TemplateRef })
public filterCellTemplate: TemplateRef<any>;
this.column.filterCellTemplate = this.filterCellTemplate;
IgxColumnComponent
列の filteringExpressionsTree を返します。
let tree = this.column.filteringExpressionsTree;
IgxColumnComponent
列の filters
を取得します。
let columnFilters = this.column.filters'
IgxColumnComponent
列の filters
を設定します。
this.column.filters = IgxBooleanFilteringOperand.instance().
IgxColumnComponent
グループ化する値を比較する関数を取得します。
let groupingComparer = this.column.groupingComparer'
IgxColumnComponent
Gets the function that compares values for grouping.
let groupingComparer = this.column.groupingComparer'
IgxColumnComponent
グループ化される値を比較するためにカスタム関数を設定します。 ソート済みのデータ内の次の値のために 0 が返されられた場合、この値はグループ化されたという意味です。
this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }
IgxColumnComponent
列の集計は有効にされたかどうかを表す値を取得します。
let hasSummary = this.column.hasSummary;
IgxColumnComponent
列集計が有効かどうかを示す値を設定します。
デフォルト値は false
です。
<igx-column [hasSummary] = "true"></igx-column>
IgxColumnComponent
列のヘッダーへの参照を返します。
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let headerCell = column.headerCell;
IgxColumnComponent
列のヘッダーへグループの参照を返します。
IgxColumnComponent
ヘッダー テンプレートへの参照を返します。
let headerTemplate = this.column.headerTemplate;
IgxColumnComponent
ヘッダー テンプレートを設定します。 列ヘッダーの高さは固定されており、それより大きいコンテンツは切り捨てられます。
<ng-template #headerTemplate>
<div style = "background-color:black" (click) = "changeColor(val)">
<span style="color:red" >{{column.field}}</span>
</div>
</ng-template>
@ViewChild("'headerTemplate'", {read: TemplateRef })
public headerTemplate: TemplateRef<any>;
this.column.headerTemplate = this.headerTemplate;
IgxColumnComponent
列が非表示にされるかどうかを取得します。
let isHidden = this.column.hidden;
IgxColumnComponent
列の hidden プロパティを設定します。
デフォルト値は false
です。
<igx-column [hidden] = "true"></igx-column>
双方向データ バインディング。
<igx-column [(hidden)] = "model.isHidden"></igx-column>
IgxColumnComponent
列インデックスを取得します。
let columnIndex = this.column.index;
IgxColumnComponent
インライン エディター テンプレートへの参照を返します。
let inlineEditorTemplate = this.column.inlineEditorTemplate;
IgxColumnComponent
インライン エディター テンプレートを設定します。
<ng-template #inlineEditorTemplate igxCellEditor let-cell="cell">
<input type="string" [(ngModel)]="cell.value"/>
</ng-template>
@ViewChild("'inlineEditorTemplate'", {read: TemplateRef })
public inlineEditorTemplate: TemplateRef<any>;
this.column.inlineEditorTemplate = this.inlineEditorTemplate;
IgxColumnComponent
列グループの列のレベルを返します。
列に parent
がない場合、0
を返します。
let columnLevel = this.column.level;
IgxColumnComponent
列の最小の width
を設定または取得します。
デフォルト値は 88
です。
let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'100px'"></igx-column>
IgxColumnComponent
列が pinned
かどうかを取得します。
let isPinned = this.column.pinned;
IgxColumnComponent
列が pinned かどうかを設定します。
デフォルト値は false
です。
<igx-column [pinned] = "true"></igx-column>
双方向データ バインディング。
<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>
IgxColumnComponent
DatePipe および/または DecimalPipe のオプション パラメーターを渡し、日付列と数値列の表示値を書式設定します。
format
、timezone
、digitsInfo
プロパティのいずれかを持つ IColumnPipeArgs
オブジェクトを受け取ります。
詳細については、https://angular.io/api/common/DatePipe および https://angular.io/api/common/DecimalPipe を参照してください。
const pipeArgs: IColumnPipeArgs = {
format: 'longDate',
timezone: 'UTC',
digitsInfo: '1.1-2'
}
<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>
IgxColumnComponent
列が選択可能かどうかを返します。
let columnSelectable = this.column.selectable;
IgxColumnComponent
列が選択可能かどうかを設定します。
デフォルト値は true
です。
<igx-column [selectable] = "false"></igx-column>
IgxColumnComponent
列が選択されるかどうかを返します。
let isSelected = this.column.selected;
IgxColumnComponent
列を選択/選択解除します。
デフォルト値は false
です。
this.column.selected = true;
IgxColumnComponent
列の sortStrategy
を取得します。
let sortStrategy = this.column.sortStrategy
IgxColumnComponent
列の sortStrategy
を設定します。
this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}
IgxColumnComponent
列の summaries
を取得します。
let columnSummaries = this.column.summaries;
IgxColumnComponent
列の summaries
を設定します。
this.column.summaries = IgxNumberSummaryOperand;
IgxColumnComponent
summaryTemplate
への参照を返します。
let summaryTemplate = this.column.summaryTemplate;
IgxColumnComponent
集計テンプレートを設定します。
<ng-template #summaryTemplate igxSummary let-summaryResults>
<p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
<p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
</ng-template>
@ViewChild("'summaryTemplate'", {read: TemplateRef })
public summaryTemplate: TemplateRef<any>;
this.column.summaryTemplate = this.summaryTemplate;
IgxColumnComponent
最上位の親列への参照を返します。
let topLevelParent = this.column.topLevelParent;
IgxColumnComponent
列の表示インデックスを取得します。
列が表示されない場合、-1
が返されます。
let visibleColumnIndex = this.column.visibleIndex;
IgxColumnComponent
親が縮小される場合、列が表示になるかどうかを示します。
<igx-column-group>
<igx-column [visibleWhenCollapsed]="true"></igx-column>
</igx-column-group>
IgxColumnComponent
列の width
を取得します。
let columnWidth = this.column.width;
IgxColumnComponent
列の width
を設定します。
<igx-column [width] = "'25%'"></igx-column>
双方向データ バインディング。
<igx-column [(width)]="model.columns[0].width"></igx-column>
IgxColumnComponent
列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。
@ViewChild('grid') grid: IgxGridComponent;
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
IgxColumnComponent
列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。
@ViewChild('grid') grid: IgxGridComponent;
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
ピン固定領域で指定したインデックスに列をピン固定します。
提供されていない場合、デフォルトでインデックス 0
またはピン固定領域の初期インデックスになります。
列が正常にピン固定された場合、true
を返します。列をピン固定できない場合、false
を返します。
列をピン固定できない原因:
let success = this.column.pin();
IgxColumnComponent
列をピン固定解除してピン固定されない領域で指定したインデックスに配置します。
定されない場合、デフォルトのインデックスは 0
です。
列のピン固定が正常に解除された場合、true
を返します。列のピン固定を解除できない場合、false
を返します。
列のピン固定を解除きない原因:
let success = this.column.unpin();
IgxColumnComponent
Ignite UI for Angular Column - ヘルプ
Ignite UI Column は
igx-grid
要素で列が表示するデータを定義するために使用されます。 ソート、フィルタリング、編集などの機能は列レベルで有効にされます。ng-template
を使用して列のすべてのセルに使用されるカスタム コンテンツを含むテンプレートを設定できます。