クラス IgxColumnComponent

Ignite UI for Angular Column - ヘルプ

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

階層

実装

  • AfterContentInit
  • OnDestroy

Index

コンストラクタ

constructor

プロパティ

additionalTemplateContext

additionalTemplateContext: any

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

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>
@次のメンバー:

IgxColumnComponent

autosizeHeader

autosizeHeader: boolean = true

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

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
@次のメンバー:

IgxColumnComponent

calcPixelWidth

calcPixelWidth: number

cdr

cdr: ChangeDetectorRef

cellClasses

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

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

children: QueryList<IgxColumnComponent>

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

let columnChildren = this.column.children;
this.column.children = childrenColumns;
@次のメンバー:

IgxColumnComponent

colEnd

colEnd: number

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

<igx-column-layout>
  <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
@次のメンバー:

IgxColumnComponent

colStart

colStart: number

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

<igx-column-layout>
  <igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
@次のメンバー:

IgxColumnComponent

dataType

dataType: GridColumnDataType = ...

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

let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
@次のメンバー:

IgxColumnComponent

defaultWidth

defaultWidth: string

非表示

disableHiding

disableHiding: boolean = false

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

let isHidingDisabled =  this.column.disableHiding;
@次のメンバー:

IgxColumnComponent

disablePinning

disablePinning: boolean = false

ピン留めが無効かどうかを取得します。

let isPinningDisabled =  this.column.disablePinning;
@次のメンバー:

IgxColumnComponent

filterable

filterable: boolean = true

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

let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
@次のメンバー:

IgxColumnComponent

filteringIgnoreCase

filteringIgnoreCase: boolean = true

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

let filteringIgnoreCase = this.column.filteringIgnoreCase;
<igx-column [filteringIgnoreCase] = "false"></igx-column>
@次のメンバー:

IgxColumnComponent

formatter

formatter: function

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

@備考

注: フォーマッタは Excel スタイルのフィルタリング ダイアログなどの場所で使用されるため、 特定のシナリオ (リモート フィルタリングなど) では、行データ引数が undefined になる場合があります。 この例では、列名が Salary かどうかを確認してから、 値を通貨文字列にフォーマットするための列フォーマッタとしてのメソッドを提供します。

@例:
const column = this.grid.getColumnByName('Address');
const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
column.formatter = addressFormatter;
@例:
const column = this.grid.getColumnByName('Address');
const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
column.formatter = addressFormatter;
@次のメンバー:

IgxColumnComponent

Type declaration

    • (value: any, rowData?: any): any
    • グループ化する値を比較する関数を取得します。

      let groupingComparer = this.column.groupingComparer'
      
      @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;
      
      @次のメンバー:

      IgxColumnComponent

      パラメーター

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

      返却 any

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>

groupable

groupable: boolean = false

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

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
@次のメンバー:

IgxColumnComponent

header

header: string = ''

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

let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
@次のメンバー:

IgxColumnComponent

headerClasses

headerClasses: string = ''

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

let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
@次のメンバー:

IgxColumnComponent

headerGroupClasses

headerGroupClasses: string = ''

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

let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
@次のメンバー:

IgxColumnComponent

headerGroupStyles

headerGroupStyles: any = null

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

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerGroupStyles]="styles"></igx-column>
@次のメンバー:

IgxColumnComponent

headerStyles

headerStyles: any = null

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

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerStyles]="styles"></igx-column>
@次のメンバー:

IgxColumnComponent

maxWidth

maxWidth: string

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

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
@次のメンバー:

IgxColumnComponent

movable

movable: boolean = false

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

let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
@次のメンバー:

IgxColumnComponent

parent

parent: any = null

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

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
@次のメンバー:

IgxColumnComponent

resizable

resizable: boolean = false

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

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
@次のメンバー:

IgxColumnComponent

rowEnd

rowEnd: number

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

<igx-column-layout>
  <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
@次のメンバー:

IgxColumnComponent

rowStart

rowStart: number

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

<igx-column-layout>
  <igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
@次のメンバー:

IgxColumnComponent

searchable

searchable: boolean = true

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

let isSearchable =  this.column.searchable';
 <igx-column [searchable] = "false"></igx-column>
@次のメンバー:

IgxColumnComponent

sortable

sortable: boolean = false

列の並べ替えが可能かどうかを設定または取得します。 デフォルトは false です。

let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
@次のメンバー:

IgxColumnComponent

sortingIgnoreCase

sortingIgnoreCase: boolean = true

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

let sortingIgnoreCase = this.column.sortingIgnoreCase;
<igx-column [sortingIgnoreCase] = "false"></igx-column>
@次のメンバー:

IgxColumnComponent

summaryFormatter

summaryFormatter: function

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

title: string = ''

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

let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
@次のメンバー:

IgxColumnComponent

widthSetByUser

widthSetByUser: boolean

非表示

アクセサー

allChildren

bodyTemplate

  • get bodyTemplate(): TemplateRef<any>
  • set bodyTemplate(template: TemplateRef<any>): void
  • bodyTemplate への参照を返します。

    let bodyTemplate = this.column.bodyTemplate;
    
    @次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • 本文のテンプレートを設定します。

    <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

    パラメーター

    • template: TemplateRef<any>

    返却 void

cells

columnGroup

  • get columnGroup(): boolean

columnLayout

  • get columnLayout(): boolean

columnLayoutChild

  • get columnLayoutChild(): any

defaultMinWidth

  • get defaultMinWidth(): string

editable

  • get editable(): boolean
  • set editable(editable: boolean): void

field

  • get field(): string
  • set field(value: string): void

filterCell

  • get filterCell(): IgxGridFilteringCellComponent

filterCellTemplate

  • get filterCellTemplate(): TemplateRef<any>
  • set filterCellTemplate(template: TemplateRef<any>): void
  • filterCellTemplate への参照を返します。

    let filterCellTemplate = this.column.filterCellTemplate;
    
    @次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • クイック フィルター テンプレートを設定します。

    <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

    パラメーター

    • template: TemplateRef<any>

    返却 void

filteringExpressionsTree

filters

grid

gridColumnSpan

  • get gridColumnSpan(): number

gridRowSpan

  • get gridRowSpan(): number

groupingComparer

  • get groupingComparer(): function
  • set groupingComparer(funcRef: function): void
  • グループ化する値を比較する関数を取得します。

    let groupingComparer = this.column.groupingComparer'
    
    @次のメンバー:

    IgxColumnComponent

    返却 function

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

        let groupingComparer = this.column.groupingComparer'
        
        @memberof

        IgxColumnComponent

        パラメーター

        • a: any
        • b: any

        返却 number

  • グループ化される値を比較するためにカスタム関数を設定します。 並べ替え済みのデータ内の次の値のために 0 が返されられた場合、この値はグループ化されたという意味です。

    this.column.groupingComparer = (a: any, b: any) => { return a === b ? 0 : -1; }
    
    @次のメンバー:

    IgxColumnComponent

    パラメーター

    • funcRef: function
        • (a: any, b: any): number
        • パラメーター

          • a: any
          • b: any

          返却 number

    返却 void

hasSummary

  • get hasSummary(): boolean
  • set hasSummary(value: boolean): void

headerCell

  • get headerCell(): IgxGridHeaderComponent

headerGroup

  • get headerGroup(): IgxGridHeaderGroupComponent

headerTemplate

  • get headerTemplate(): TemplateRef<any>
  • set headerTemplate(template: TemplateRef<any>): void
  • ヘッダー テンプレートへの参照を返します。

    let headerTemplate = this.column.headerTemplate;
    
    @次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • ヘッダー テンプレートを設定します。 列ヘッダーの高さは固定されており、それより大きいコンテンツは切り捨てられます。

    <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

    パラメーター

    • template: TemplateRef<any>

    返却 void

hidden

  • get hidden(): boolean
  • set hidden(value: boolean): void

index

  • get index(): number

inlineEditorTemplate

  • get inlineEditorTemplate(): TemplateRef<any>
  • set inlineEditorTemplate(template: TemplateRef<any>): void
  • インライン エディター テンプレートへの参照を返します。

    let inlineEditorTemplate = this.column.inlineEditorTemplate;
    
    @次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • インライン エディター テンプレートを設定します。

    <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

    パラメーター

    • template: TemplateRef<any>

    返却 void

isFirstPinned

  • get isFirstPinned(): boolean

isLastPinned

  • get isLastPinned(): boolean

level

  • get level(): number

minWidth

  • get minWidth(): string
  • set minWidth(value: string): void

pinned

  • get pinned(): boolean
  • set pinned(value: boolean): void

pipeArgs

rightPinnedOffset

  • get rightPinnedOffset(): string

selectable

  • get selectable(): boolean
  • set selectable(value: boolean): void

selected

  • get selected(): boolean
  • set selected(value: boolean): void

sortStrategy

summaries

  • get summaries(): any
  • set summaries(classRef: any): void

topLevelParent

  • get topLevelParent(): any

visibleIndex

  • get visibleIndex(): number

visibleWhenCollapsed

  • get visibleWhenCollapsed(): boolean
  • set visibleWhenCollapsed(value: boolean): void

width

  • get width(): string
  • set width(value: string): void

メソッド

autosize

  • autosize(byHeaderOnly?: boolean): void
  • 列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。

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

    IgxColumnComponent

    パラメーター

    • byHeaderOnly: boolean = false

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

    返却 void

getFilledChildColumnSizes

getInitialChildColumnSizes

  • getInitialChildColumnSizes(children: QueryList<IgxColumnComponent>): MRLColumnSizeInfo[]

getResizableColUnderEnd

  • getResizableColUnderEnd(): MRLResizeColumnInfo[]

move

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

    @例:
    column.move(index);
    
    @次のメンバー:

    IgxColumnComponent

    パラメーター

    • index: number

    返却 void

pin

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

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

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean

unpin

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

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

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean