クラス IgxColumnGroupComponent

階層

実装

  • AfterContentInit

Index

コンストラクタ

  • new IgxColumnGroupComponent(grid: GridType, _validators: Validator[], cdr: ChangeDetectorRef, platform: PlatformUtil): IgxColumnGroupComponent

プロパティ

additionalTemplateContext: any

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

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

IgxColumnComponent

autoSize: number
autosizeHeader: boolean = true

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

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

IgxColumnComponent

calcPixelWidth: number
cdr: ChangeDetectorRef
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;
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

collapsibleIndicatorTemplate: TemplateRef<any>

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

次のメンバー:

IgxColumnGroupComponent

dataType: GridColumnDataType = GridColumnDataType.String

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

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

IgxColumnComponent

defaultWidth: string

非表示

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: any, rowData?: any) => any)

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

grid: GridType
groupable: boolean = false

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

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

IgxColumnComponent

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
非推奨

バージョン 13.1.0。代わりに IgxGridComponent.moving を使用してください。 列が移動可能かどうかを設定または取得します。 デフォルトは false です。

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

IgxColumnComponent

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

IgxColumnGroupComponent

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: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any)

Type declaration

title: string = ''

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

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

IgxColumnComponent

widthSetByUser: boolean

非表示

アクセサー

  • get bodyTemplate(): TemplateRef<any>
  • get collapsible(): boolean
  • set collapsible(value: boolean): void
  • get columnGroup(): boolean
  • get columnLayout(): boolean
  • get columnLayoutChild(): any
  • get defaultMinWidth(): string
  • get editable(): boolean
  • set editable(editable: boolean): void
  • get errorTemplate(): TemplateRef<any>
  • set errorTemplate(template: TemplateRef<any>): void
  • 検証エラー テンプレートへの参照を返します。

    let errorTemplate = this.column.errorTemplate;
    

    返却 TemplateRef<any>

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

    <ng-template igxCellValidationError let-cell="cell" #errorTemplate >
    <div *ngIf="cell.validation.errors?.['forbiddenName']">
    This name is forbidden.
    </div>
    </ng-template>
    @ViewChild("'errorTemplate'", {read: TemplateRef })
    public errorTemplate: TemplateRef<any>;
    this.column.errorTemplate = this.errorTemplate;

    パラメーター

    • template: TemplateRef<any>

    返却 void

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

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

    IgxColumnGroupComponent

    返却 boolean

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

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

    IgxColumnGroupComponent

    パラメーター

    • value: boolean

    返却 void

  • get field(): string
  • set field(value: string): void
  • get filterCell(): IgxGridFilteringCellComponent
  • 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

  • get filters(): any
  • set filters(classRef: any): void
  • get gridColumnSpan(): number
  • get gridRowSpan(): number
  • get groupingComparer(): ((a: any, b: any) => number)
  • set groupingComparer(funcRef: ((a: any, b: any) => number)): void
  • グループ化する値を比較する関数を取得します。

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

    IgxColumnComponent

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

      • (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: ((a: any, b: any) => number)
        • (a: any, b: any): number
        • パラメーター

          • a: any
          • b: any

          返却 number

    返却 void

  • get hasSummary(): boolean
  • set hasSummary(value: boolean): void
  • get headerCell(): IgxGridHeaderComponent
  • get headerGroup(): IgxGridHeaderGroupComponent
  • 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

  • get hidden(): boolean
  • set hidden(value: boolean): void
  • get index(): number
  • get inlineEditorTemplate(): TemplateRef<any>
  • get isFirstPinned(): boolean
  • get isLastPinned(): boolean
  • get level(): number
  • get minWidth(): string
  • set minWidth(value: string): void
  • 列の最小の width を設定または取得します。 デフォルト値は 88 です。

    let columnMinWidth = this.column.minWidth;
    
    <igx-column [minWidth] = "'100px'"></igx-column>
    
    次のメンバー:

    IgxColumnComponent

    返却 string

  • 列の最小の width を設定または取得します。 デフォルト値は 88 です。

    let columnMinWidth = this.column.minWidth;
    
    <igx-column [minWidth] = "'100px'"></igx-column>
    
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: string

    返却 void

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

    DatePipe および/または DecimalPipe のオプション パラメーターを渡し、日付列と数値列の表示値を書式設定します。 formattimezonedigitsInfo プロパティのいずれかを持つ IColumnPipeArgs オブジェクトを受け取ります。 詳細については、https://angular.io/api/common/DatePipe および https://angular.io/api/common/DecimalPipe を参照してください。

    例:
    const pipeArgs: IColumnPipeArgs = {
    format: 'longDate',
    timezone: 'UTC',
    digitsInfo: '1.1-2'
    }
    <igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
    <igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>
    次のメンバー:

    IgxColumnComponent

    返却 IColumnPipeArgs

  • 備考:

    DatePipe および/または DecimalPipe のオプション パラメーターを渡し、日付列と数値列の表示値を書式設定します。 formattimezonedigitsInfo プロパティのいずれかを持つ IColumnPipeArgs オブジェクトを受け取ります。 詳細については、https://angular.io/api/common/DatePipe および https://angular.io/api/common/DecimalPipe を参照してください。

    例:
    const pipeArgs: IColumnPipeArgs = {
    format: 'longDate',
    timezone: 'UTC',
    digitsInfo: '1.1-2'
    }
    <igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
    <igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    返却 void

  • get rightPinnedOffset(): string
  • get selectable(): boolean
  • set selectable(value: boolean): void
  • get selected(): boolean
  • set selected(value: boolean): void
  • get summaries(): any
  • set summaries(classRef: any): void
  • get summaryTemplate(): TemplateRef<any>
  • set summaryTemplate(template: TemplateRef<any>): void
  • summaryTemplate への参照を返します。

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

    IgxColumnComponent

    返却 TemplateRef<any>

  • 集計テンプレートを設定します。

    <ng-template #summaryTemplate igxSummary let-summaryResults>
    <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
    <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
    </ng-template>
    @ViewChild("'summaryTemplate'", {read: TemplateRef })
    public summaryTemplate: TemplateRef<any>;
    this.column.summaryTemplate = this.summaryTemplate;
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

  • get topLevelParent(): any
  • get visibleIndex(): number
  • get visibleWhenCollapsed(): boolean
  • set visibleWhenCollapsed(value: boolean): void
  • 親が縮小される場合、列が表示になるかどうかを示します。

    <igx-column-group>
    <igx-column [visibleWhenCollapsed]="true"></igx-column>
    </igx-column-group>
    次のメンバー:

    IgxColumnComponent

    返却 boolean

  • 親が縮小される場合、列が表示になるかどうかを示します。

    <igx-column-group>
    <igx-column [visibleWhenCollapsed]="true"></igx-column>
    </igx-column-group>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: boolean

    返却 void

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

メソッド

  • 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

      Set if column should be autosized based only on the header content.

    返却 void

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

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

    IgxColumnComponent

    パラメーター

    • index: number

    返却 void

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

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

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean

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

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

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean