クラス IgxColumnComponent

Ignite UI for Angular Column - ヘルプ

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

階層

Hierarchy

実装

コンストラクタ

プロパティ

additionalTemplateContext: any

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

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

Memberof

IgxColumnComponent

autosizeHeader: boolean = true

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

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

Memberof

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>

Memberof

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>

Memberof

IgxColumnComponent

children: QueryList<IgxColumnComponent>

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

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

Memberof

IgxColumnComponent

colEnd: number

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

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

Memberof

IgxColumnComponent

colStart: number

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

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

Memberof

IgxColumnComponent

dataType: GridColumnDataType = GridColumnDataType.String

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

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

Memberof

IgxColumnComponent

disableHiding: boolean = false

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

let isHidingDisabled =  this.column.disableHiding;

Memberof

IgxColumnComponent

disablePinning: boolean = false

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

let isPinningDisabled =  this.column.disablePinning;

Memberof

IgxColumnComponent

filterable: boolean = true

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

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

Memberof

IgxColumnComponent

filteringIgnoreCase: boolean = true

列セルに条件付きスタイル プロパティを設定します。 デフォルト値は true です。

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

Memberof

IgxColumnComponent

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

Type declaration

    • (value: any, rowData?: any): any
    • Applies display format to cell values in the column. Does not modify the underlying data.

      Remark

      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.

      Example

      columnInit(column: IgxColumnComponent) {
      if (column.field == "Salary") {
      column.formatter = (salary => this.format(salary));
      }
      }

      format(value: number) : string {
      return formatCurrency(value, "en-us", "$");
      }

      Example

      const column = this.grid.getColumnByName('Address');
      const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
      column.formatter = addressFormatter;

      Memberof

      IgxColumnComponent

      パラメーター

      • value: any
      • オプション rowData: any

      返却 any

grid: GridType
groupable: boolean = false

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

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>

Memberof

IgxColumnComponent

header: string = ''

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

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

Memberof

IgxColumnComponent

headerClasses: string = ''

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

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

Memberof

IgxColumnComponent

headerGroupClasses: string = ''

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

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

Memberof

IgxColumnComponent

headerGroupStyles: any = null

列ヘッダー グループ ラッパーに条件付きスタイル プロパティを設定します。

ngStyle と同様、キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。

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

Memberof

IgxColumnComponent

headerStyles: any = null

列ヘッダーに条件付きスタイル プロパティを設定します。

ngStyle と同様、キーがスタイル プロパティであり、 値が評価用の式であるオブジェクト リテラルを受け入れます。

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

Memberof

IgxColumnComponent

maxWidth: string

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

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

Memberof

IgxColumnComponent

movable: boolean = false

Deprecated

バージョン 13.1.0。代わりに IgxGridComponent.moving を使用してください。

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

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

Memberof

IgxColumnComponent

parent: any = null

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

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

Memberof

IgxColumnComponent

resizable: boolean = false

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

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

Memberof

IgxColumnComponent

rowEnd: number

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

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

Memberof

IgxColumnComponent

rowStart: number

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

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

Memberof

IgxColumnComponent

searchable: boolean = true

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

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

Memberof

IgxColumnComponent

sortable: boolean = false

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

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

Memberof

IgxColumnComponent

sortingIgnoreCase: boolean = true

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

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

Memberof

IgxColumnComponent

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

Type declaration

    • (summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): any
    • 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;
      }

      Memberof

      IgxColumnComponent

      パラメーター

      返却 any

title: string = ''

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

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

Memberof

IgxColumnComponent

アクセサー

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

    let groupingComparer = this.column.groupingComparer'
    

    Memberof

    IgxColumnComponent

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

      • (a: any, b: any, currRec?: any, groupRec?: any): number
      • Gets the function that compares values for grouping.

        let groupingComparer = this.column.groupingComparer'
        

        Memberof

        IgxColumnComponent

        パラメーター

        • a: any
        • b: any
        • オプション currRec: any
        • オプション groupRec: any

        返却 number

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

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

    Memberof

    IgxColumnComponent

    パラメーター

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

          • a: any
          • b: any
          • オプション currRec: any
          • オプション groupRec: any

          返却 number

    返却 void

メソッド

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

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

    Memberof

    IgxColumnComponent

    パラメーター

    • byHeaderOnly: boolean = false

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

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

    返却 void

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

    Example

    column.move(index);
    

    Memberof

    IgxColumnComponent

    パラメーター

    • index: number

    返却 void

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

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

    Memberof

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean

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

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

    Memberof

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean