現在のフィールドが終了する位置の列インデックス。 colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。
<igx-column-layout>
<igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>フィールドの開始位置となる列インデックス。
<igx-column-layout>
<igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>列値のデータ タイプを取得または設定します。
デフォルトは string です。
let columnDataType = this.column.dataType;<igx-column [dataType] = "'number'"></igx-column>非表示
非表示が無効かどうかを取得します。
let isHidingDisabled = this.column.disableHiding;ピン留めが無効かどうかを取得します。
let isPinningDisabled = this.column.disablePinning;field 値を取得または設定します。
let columnField = this.column.field;<igx-column [field] = "'ID'"></igx-column>列フィルターが可能かどうかを取得または設定します。
デフォルト値は true です。
let isFilterable = this.column.filterable;<igx-column [filterable] = "false"></igx-column>列フィルタリングが大文字と小文字を区別するかどうかを取得または設定します。
デフォルト値は true です。
let filteringIgnoreCase = this.column.filteringIgnoreCase;<igx-column [filteringIgnoreCase] = "false"></igx-column>列を自動生成するときは、基礎となるバインド値を変更せずにフォーマッタを使用して列データの表示をフォーマットします。
この例では、列名が Salary かどうかを確認してから、値を通貨文字列にフォーマットするための列フォーマッタとしてのメソッドを提供します。
onColumnInit(column: IgxColumnComponent) {
if (column.field == "Salary") {
column.formatter = (salary => this.format(salary));
}
}
format(value: number) : string {
return formatCurrency(value, "en-us", "$");
}列のグループ化が可能かどうかを取得または設定します。
デフォルト値は false です。
let isGroupable = this.column.groupable;<igx-column [groupable] = "true"></igx-column>header 値を取得または設定します。
let columnHeader = this.column.header;<igx-column [header] = "'ID'"></igx-column>列ヘッダーのクラス セレクターを取得または設定します。
let columnHeaderClass = this.column.headerClasses;<igx-column [headerClasses] = "'column-header'"></igx-column>列グループヘッダーのクラス セレクターを取得または設定します。
let columnHeaderClass = this.column.headerGroupClasses;<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>列の最大の width を取得または設定します。
let columnMaxWidth = this.column.width;<igx-column [maxWidth] = "'75%'"></igx-column>列が移動可能かどうかを取得または設定します。
デフォルトは false です。
let isMovable = this.column.movable;<igx-column [movable] = "true"></igx-column>親列を取得または設定します。
let parentColumn = this.column.parent;this.column.parent = higherLevelColumn;列のサイズ変更が可能かどうかを取得または設定します。
デフォルトは false です。
let isResizable = this.column.resizable;<igx-column [resizable] = "true"></igx-column>現在のフィールドが終了する行インデックス。 rowStart と rowEnd の間の行数によって、そのフィールドまでの行数が決まります。
<igx-column-layout>
<igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>フィールドの開始位置となる行インデックス。
<igx-column-layout>
<igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>列グループが検索可能 (searchable) かどうかを取得または設定します。
デフォルト値は true です。
let isSearchable = this.columnGroup.searchable; <igx-column-group [searchable] = "false"></igx-column-group>列の並べ替えが可能かどうかを取得または設定します。
デフォルトは false です。
let isSortable = this.column.sortable;<igx-column [sortable] = "true"></igx-column>列並べ替えが大文字と小文字を区別するかどうかを取得または設定します。
デフォルト値は true です。
let sortingIgnoreCase = this.column.sortingIgnoreCase;<igx-column [sortingIgnoreCase] = "false"></igx-column>非表示
子列のコレクションを返します。
let columns = this.columnGroup.allChildren;列グループのセルを取得します。
let columnCells = this.columnGroup.cells;列が ColumnGroup かどうかを示すブール値を返します。
let isColumnGroup = this.columnGroup.columnGroup列が複数行レイアウト用の ColumnLayout であるかどうかを示すブール値を返します。
let columnGroup = this.column.columnGroup;Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
let columnLayoutChild = this.column.columnLayoutChild;列のデフォルトの最小の width を取得します。
let defaultMinWidth = this.column.defaultMinWidth;列の編集が可能かどうかを取得します。
デフォルト値は false です。
let isEditable = this.column.editable;列の編集が可能かどうかを設定します。
this.column.editable = true;<igx-column [editable] = "true"></igx-column>列のフィルター セルへ参照を返します。
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let filterell = column.filterell;filterCellTemplate への参照を返します。
let filterCellTemplate = this.column.filterCellTemplate;クイック フィルター テンプレートを設定します。
<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;列の filteringExpressionsTree を返します。
let tree = this.column.filteringExpressionsTree;列グループの filters を取得します。
let columnGroupFilters = this.columnGroup.filters;列グループの filters を設定します。
this.columnGroup.filters = IgxStringFilteringOperand;igx-grid オーナーへの参照。
let gridComponent = this.column.grid;グループ化する値を比較する関数を取得します。
let groupingComparer = this.column.groupingComparer'グループ化される値を比較するためにカスタム関数を設定します。 並べ替え済みのデータ内の次の値のために 0 が返されられた場合、この値はグループ化されたという意味です。
this.column.groupingComparer = (a: any, b: any) => { return a === b ? 0 : -1; }列の集計は有効にされたかどうかを表す値を取得します。
let hasSummary = this.column.hasSummary;列集計が有効かどうかを示す値を設定します。
デフォルト値は false です。
<igx-column [hasSummary] = "true"></igx-column>列のヘッダーへの参照を返します。
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let headerCell = column.headerCell;列のヘッダーへグループの参照を返します。
ヘッダー テンプレートへの参照を返します。
let headerTemplate = this.column.headerTemplate;ヘッダー テンプレートを設定します。 列ヘッダーの高さは固定されており、それより大きいコンテンツは切り捨てられます。
<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;列グループが非表示されるかどうかを取得します。
let isHidden = this.columnGroup.hidden;双方向データ バインディング。
<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>列グループの hidden プロパティを設定します。
<igx-column [hidden] = "true"></igx-column>双方向データ バインディング。
<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>列インデックスを取得します。
let columnIndex = this.column.index;列グループの列のレベルを返します。
列に parent がない場合、0 を返します。
let columnLevel = this.column.level;列の最小の width を取得または設定します。
デフォルト値は 88 です。
let columnMinWidth = this.column.minWidth;<igx-column [minWidth] = "'15%'"></igx-column>列の最小の width を取得または設定します。
デフォルト値は 88 です。
let columnMinWidth = this.column.minWidth;<igx-column [minWidth] = "'15%'"></igx-column>列が pinned かどうかを取得します。
let isPinned = this.column.pinned;双方向データ バインディング。
<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>列がピン固定されるかどうかを設定します。
デフォルトは false です。
<igx-column [pinned] = "true"></igx-column>双方向データ バインディング。
<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>列 sortStrategy を取得します。
let sortStrategy = this.column.sortStrategy列 sortStrategy を設定します。
this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}列グループの summaries を取得します。
let columnGroupSummaries = this.columnGroup.summaries;Sets the column group summaries.
this.columnGroup.summaries = IgxNumberSummaryOperand;最上位の親列への参照を返します。
let topLevelParent = this.column.topLevelParent;列の表示インデックスを取得します。
列が表示されない場合、 -1 が返されます。
let visibleColumnIndex = this.column.visibleIndex;列グループの幅を取得します。
let columnGroupWidth = this.columnGroup.width;列グループの幅を取得します。
let columnGroupWidth = this.columnGroup.width;列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。
@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();列をピン固定解除してピン固定されない領域で指定したインデックスに配置します。指定されない場合、デフォルトのインデックスは 0 です。
列のピン固定が正常に解除された場合、true を返します。列のピン固定を解除できない場合、false を返します。
列のピン固定を解除きない原因:
let success = this.column.unpin();
列セルの条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。 例:
callback = (rowData, columnKey) => { return rowData[columnKey] > 6; } cellClasses = { 'className' : this.callback };<igx-column [cellClasses] = "cellClasses"></igx-column> <igx-column [cellClasses] = "{'class1' : true }"></igx-column>IgxColumnComponent