Class IgxColumnComponent

Ignite UI for Angular Column - ヘルプ

Ignite UI Column は igx-grid 要素で列が表示するデータを定義するために使用されます。 ソート、フィルタリング、編集などの機能は列レベルで有効にされます。ng-template を使用して列のすべてのセルに使用されるカスタム コンテンツを含むテンプレートを設定できます。

階層

Hierarchy (view full)

実装

コンストラクター

プロパティ

additionalTemplateContext: any

追加のテンプレート コンテキストで提供されるカスタム プロパティを設定または取得します。

<igx-column [additionalTemplateContext]="contextObject">
<ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
{{ props }}
</ng-template>
</igx-column>

次のメンバー

IgxColumnComponent

autosizeHeader: boolean = true

列ヘッダーが自動サイズ調整ロジックに含まれるかどうかを設定または取得します。 デフォルトの div など、列ヘッダーのテンプレートが親に基づいてサイズ設定される場合に役に立ちます。 デフォルト値は false です。

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>

次のメンバー

IgxColumnComponent

cellClasses: any

列セルの条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは 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

cellStyles: any = null

列セルに条件付きスタイル プロパティを設定します。 列セルに条件付きスタイル プロパティを設定します。ngStyle と同様、キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。cellClasses と同様、コールバック関数を受け入れます。

styles = {
background: 'royalblue',
color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
}
<igx-column [cellStyles]="styles"></igx-column>

次のメンバー

IgxColumnComponent

children: QueryList<IgxColumnComponent>

子列を取得または設定します。

let columnChildren = this.column.children;
this.column.children = childrenColumns;

次のメンバー

IgxColumnComponent

colEnd: number

現在のフィールドが終了する位置の列のインデックスです。 colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。

<igx-column-layout>
<igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

次のメンバー

IgxColumnComponent

colStart: number

フィールドの開始位置となる列インデックスです。

<igx-column-layout>
<igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>

次のメンバー

IgxColumnComponent

dataType: GridColumnDataType = GridColumnDataType.String

列値のデータ型を取得または設定します。 デフォルト値は string です。

let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>

次のメンバー

IgxColumnComponent

disableHiding: boolean = false

非表示が無効かどうかを取得します。

let isHidingDisabled =  this.column.disableHiding;

次のメンバー

IgxColumnComponent

disablePinning: boolean = false

ピン固定が無効かどうかを取得します。

let isPinningDisabled =  this.column.disablePinning;

次のメンバー

IgxColumnComponent

filterable: boolean = true

列フィルターが可能かどうかを取得または設定します。 デフォルト値は true です。

let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>

次のメンバー

IgxColumnComponent

filteringIgnoreCase: boolean = true

列フィルタリングが大文字と小文字を区別するかどうかを取得または設定します。 デフォルト値は true です。

let filteringIgnoreCase = this.column.filteringIgnoreCase;
<igx-column [filteringIgnoreCase] = "false"></igx-column>

次のメンバー

IgxColumnComponent

formatter: ((value, rowData?) => any)

列のセル値に表示形式を適用します。基になるデータを変更しません。

備考

注: フォーマッターは Excel スタイルのフィルタリング ダイアログなどの場所で使用されるため、特定のシナリオ (リモート フィルタリングなど) では、行データ引数が undefined になる場合があります。

この例では、列名が Salary かどうかを確認してから、値を通貨文字列にフォーマットするための列フォーマッターとしてのメソッドを提供します。

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

Type declaration

    • (value, rowData?): any
    • パラメーター

      • value: any
      • Optional rowData: any

      返却 any

grid: GridType

この列を含む親 GridType のインスタンスを表します。

header: string = ''

header 値を設定または取得します。

let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>

次のメンバー

IgxColumnComponent

headerClasses: string = ''

列ヘッダーのクラス セレクターを取得または設定します。

let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>

次のメンバー

IgxColumnComponent

headerGroupClasses: string = ''

列グループ ヘッダーのクラス セレクターを取得または設定します。

let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>

次のメンバー

IgxColumnComponent

headerGroupStyles: any = null

列ヘッダーに条件付きスタイル プロパティを設定します。ngStyle と同様、キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。

styles = {
background: 'royalblue',
color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerGroupStyles]="styles"></igx-column>

次のメンバー

IgxColumnComponent

headerStyles: any = null

列ヘッダーに条件付きスタイル プロパティを設定します。ngStyle と同様、キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。

styles = {
background: 'royalblue',
color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerStyles]="styles"></igx-column>

次のメンバー

IgxColumnComponent

maxWidth: string

列の最大の width を設定または取得します。

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>

次のメンバー

IgxColumnComponent

movable: boolean = false

を使用してください。

列が移動可能かどうかを取得または設定します。 デフォルト値は false です。

let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>

非推奨

バージョン 13.1.0。代わりに Grid の moving プロパティを使用してください。

parent: any = null

親列を取得または設定します。

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;

次のメンバー

IgxColumnComponent

resizable: boolean = false

列のサイズ変更が可能かどうかを取得または設定します。 デフォルト値は false です。

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>

次のメンバー

IgxColumnComponent

rowEnd: number

現在のフィールドが終了する行のインデックスです。 rowStart と rowEnd の間の行数によって、そのフィールドまでの行数が決まります。

<igx-column-layout>
<igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

次のメンバー

IgxColumnComponent

rowStart: number

フィールドの開始位置となる行インデックスです。

<igx-column-layout>
<igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

次のメンバー

IgxColumnComponent

searchable: boolean = true

列が検索可能 (searchable) かどうかを設定または取得します。 デフォルト値は true です。

let isSearchable =  this.column.searchable';
 <igx-column [searchable] = "false"></igx-column>

次のメンバー

IgxColumnComponent

sortable: boolean = false

列のソートが可能かどうかを取得または設定します。 デフォルト値は false です。

let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>

次のメンバー

IgxColumnComponent

sortingIgnoreCase: boolean = true

列ソートが大文字と小文字を区別するかどうかを取得または設定します。 デフォルト値は true です。

let sortingIgnoreCase = this.column.sortingIgnoreCase;
<igx-column [sortingIgnoreCase] = "false"></igx-column>

次のメンバー

IgxColumnComponent

summaryFormatter: ((summary, summaryOperand) => any)

summaryFormatter は、列集計の表示を書式設定するために使用されます。

この例では、列名が OrderDate であるかどうかを確認してから、summaryFormatter として、日付のロケールを 「fr-FR」 に変更するメソッドを提供します。カウント キーの集計はスキップされるため、数値として表示されます。

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

Type declaration

title: string = ''

title 値を設定または取得します。

let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>

次のメンバー

IgxColumnComponent

メソッド

  • get groupingComparer(): ((a, b, currRec?, groupRec?) => number)
  • グループ化する値を比較する関数を取得します。

    let groupingComparer = this.column.groupingComparer'
    

    次のメンバー

    IgxColumnComponent

    返却 ((a, b, currRec?, groupRec?) => number)

      • (a, b, currRec?, groupRec?): number
      • パラメーター

        • a: any
        • b: any
        • Optional currRec: any
        • Optional groupRec: any

        返却 number

  • set groupingComparer(funcRef): void
  • グループ化される値を比較するためにカスタム関数を設定します。 ソート済みのデータ内の次の値のために 0 が返されられた場合、この値はグループ化されたという意味です。

    this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }
    

    次のメンバー

    IgxColumnComponent

    パラメーター

    • funcRef: ((a, b, currRec?, groupRec?) => number)
        • (a, b, currRec?, groupRec?): number
        • パラメーター

          • a: any
          • b: any
          • Optional currRec: any
          • Optional groupRec: any

          返却 number

    返却 void

メソッド

  • 列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。

    @ViewChild('grid') grid: IgxGridComponent;
    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    column.autosize();

    次のメンバー

    IgxColumnComponent

    パラメーター

    • byHeaderOnly: boolean = false

      ヘッダーのコンテンツのみに基づいて列を自動サイズ変更するかどうかを設定します。

    返却 void

  • 列を指定した表示インデックスに移動します。渡されたインデックスが無効な場合、 または移動後に列が異なる表示インデックスを受け取る場合、 移動は実行されません。渡されたインデックスが列を別の列グループに移動する場合、移動は実行されません。

    column.move(index);
    

    次のメンバー

    IgxColumnComponent

    パラメーター

    • index: number

    返却 void

  • ピン固定領域で指定したインデックスに列をピン固定します。 提供されていない場合、デフォルトでインデックス 0 またはピン固定領域の初期インデックスになります。 列が正常にピン固定された場合、true を返します。列をピン固定できない場合、false を返します。 列をピン固定できない原因:

    • 列はすでにピン固定されています。
    • index 引数は範囲外です。
    • ピン固定領域はグリッドの幅の 80% を超えます。
    let success = this.column.pin();
    

    次のメンバー

    IgxColumnComponent

    パラメーター

    • Optional index: number

    返却 boolean

  • 列をピン固定解除してピン固定されない領域で指定したインデックスに配置します。 設定されない場合、デフォルトのインデックスは 0 です。 列のピン固定が正常に解除された場合、true を返します。列のピン固定を解除できない場合、false を返します。 列のピン固定を解除きない原因:

    • ピン固定はすでに解除されています。
    • index 引数は範囲外です。
    let success = this.column.unpin();
    

    次のメンバー

    IgxColumnComponent

    パラメーター

    • Optional index: number

    返却 boolean