クラス IgxColumnLayoutComponent

階層

実装

  • AfterContentInit

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;

childrenVisibleIndexes

childrenVisibleIndexes: any[] = []

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

collapsibleIndicatorTemplate

collapsibleIndicatorTemplate: TemplateRef<any>

展開/縮小インジケーターのカスタム テンプレートを定義できます。

@次のメンバー:

IgxColumnGroupComponent

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

列を自動生成するときは、基礎となるバインド値を変更せずにフォーマッタを使用して列データの表示をフォーマットします。

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

columnInit(column: IgxColumnComponent) {
  if (column.field == "Salary") {
    column.formatter = (salary => this.format(salary));
  }
}
format(value: number) : string {
  return formatCurrency(value, "en-us", "$");
}
@次のメンバー:

IgxColumnComponent

Type declaration

    • (value: any): any
    • パラメーター

      • value: 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

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.columnGroup.searchable;
 <igx-column-group [searchable] = "false"></igx-column-group>
@次のメンバー:

IgxColumnGroupComponent

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>

cells

collapsible

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

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

expanded

  • get expanded(): boolean
  • set expanded(value: boolean): void
  • グループが最初に展開または縮小されるかどうかを設定します。 Collapsible プロパティが true に設定された場合のみ適用します。 デフォルト値は true です。

     const state = false
     <igx-column-group [(expand)] = "state"></igx-column-group>
    

    返却 boolean

  • グループが最初に展開または縮小されるかどうかを設定します。 Collapsible プロパティが true に設定された場合のみ適用します。 デフォルト値は true です。

     const state = false
     <igx-column-group [(expand)] = "state"></igx-column-group>
    
    @次のメンバー:

    IgxColumnGroupComponent

    パラメーター

    • value: 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

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

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
      • パラメーター

        • 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

hasFirstPinnedChildColumn

  • get hasFirstPinnedChildColumn(): boolean

hasLastPinnedChildColumn

  • get hasLastPinnedChildColumn(): boolean

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>

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(): any
  • set width(val: any): 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