IgxGridForOfDirective

Constructors

new IgxGridForOfDirective(): IgxGridForOfDirective

Returns IgxGridForOfDirective

Properties

_virtScrollPosition

Inherited from: IgxForOfDirective

Internal track for scroll top that is being virtualized

_virtScrollPosition: number = 0

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:282

beforeViewDestroyed

Inherited from: IgxForOfDirective

beforeViewDestroyed: EventEmitter<EmbeddedViewRef<any>>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:236

cdr

Inherited from: IgxForOfDirective

cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:93

chunkLoad

Inherited from: IgxForOfDirective

An event that is emitted after a new chunk has been loaded.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template>

loadChunk(e){
alert("chunk loaded!");
}

chunkLoad: EventEmitter<IForOfState>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:199

chunkPreload

Inherited from: IgxForOfDirective

An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount. Can be used for implementing remote load on demand for the igxFor data.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template>

chunkPreload(e){
alert("chunk is loading!");
}

chunkPreload: EventEmitter<IForOfState>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:251

contentSizeChange

Inherited from: IgxForOfDirective

An event that is emitted after the rendered content size of the igxForOf has been changed.

contentSizeChange: EventEmitter<any>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:219

dataChanged

Inherited from: IgxForOfDirective

An event that is emitted after data has been changed.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template>

dataChanged(e){
alert("data changed!");
}

dataChanged: EventEmitter<IForOfDataChangeEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:233

igxForContainerSize

Inherited from: IgxForOfDirective

Sets the px-affixed size of the container along the axis of scrolling. For "horizontal" orientation this value is the width of the container and for "vertical" is the height.

<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'"
     [igxForScrollOrientation]="'horizontal'">
</ng-template>

igxForContainerSize: any

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:167

igxForItemSize

Inherited from: IgxForOfDirective

Sets the px-affixed size of the item along the axis of scrolling. For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row.

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template>

igxForItemSize: any

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:185

igxForScrollContainer

Inherited from: IgxForOfDirective

Optionally pass the parent igxFor instance to create a virtual template scrolling both horizontally and vertically.

<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data"
      [igxForScrollOrientation]="'vertical'"
      [igxForContainerSize]="'500px'"
      [igxForItemSize]="'50px'"
      let-rowIndex="index">
      <div [style.display]="'flex'" [style.height]="'50px'">
          <ng-template #childContainer igxFor let-item [igxForOf]="data"
              [igxForScrollOrientation]="'horizontal'"
              [igxForScrollContainer]="parentVirtDir"
              [igxForContainerSize]="'500px'">
                  <div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div>
          </ng-template>
      </div>
</ng-template>

igxForScrollContainer: any

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:155

igxForScrollOrientation

Inherited from: IgxForOfDirective

Specifies the scroll orientation. Scroll orientation can be "vertical" or "horizontal".

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>

igxForScrollOrientation: string = 'vertical'

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:133

igxForSizePropName

Inherited from: IgxForOfDirective

Sets the property name from which to read the size in the data object.

igxForSizePropName: any

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:123

igxGridForOfUniqueSizeCache

igxGridForOfUniqueSizeCache: boolean = false

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1627

igxGridForOfVariableSizes

igxGridForOfVariableSizes: boolean = true

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1630

state

Inherited from: IgxForOfDirective

The current state of the directive. It contains startIndex and chunkSize. state.startIndex - The index of the item at which the current visible chunk begins. state.chunkSize - The number of items the current visible chunk holds. These options can be used when implementing remote virtualization as they provide the necessary state information.

const gridState = this.parentVirtDir.state;

state: IForOfState

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:267

Accessors

displayContainer

Inherited from: IgxForOfDirective

get displayContainer(): HTMLElement

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:350

Returns HTMLElement

igxForOf

Inherited from: IgxForOfDirective

Sets the data to be rendered.

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>

get igxForOf(): U & T[]

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:108

Returns U & T[]

set igxForOf(value: U & T[]): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:112

Parameters

value: U & T[]

Returns void

igxForTotalItemCount

Inherited from: IgxForOfDirective

The total count of the virtual data items, when using remote service. Similar to the property totalItemCount, but this will allow setting the data count into the template.

<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
 [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>

get igxForTotalItemCount(): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:318

Returns number

set igxForTotalItemCount(value: number): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:321

Parameters

value: number

Returns void

igxForTrackBy

Inherited from: IgxForOfDirective

Gets the function used to track changes in the items collection. By default the object references are compared. However this can be optimized if you have unique identifier value that can be used for the comparison instead of the object ref or if you have some other property values in the item object that should be tracked for changes. This option is similar to ngForTrackBy.

const trackFunc = this.parentVirtDir.igxForTrackBy;

get igxForTrackBy(): TrackByFunction<T>

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1206

Returns TrackByFunction<T>

Sets the function used to track changes in the items collection. This function can be set in scenarios where you want to optimize or customize the tracking of changes for the items in the collection. The igxForTrackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item.

this.parentVirtDir.igxForTrackBy = (index, item) => {
     return item.id + item.width;
};

set igxForTrackBy(fn: TrackByFunction<T>): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1221

Parameters

fn: TrackByFunction<T>

Returns void

igxGridForOf

get igxGridForOf(): U & T[]

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1622

Returns U & T[]

set igxGridForOf(value: U & T[]): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:1618

Parameters

value: U & T[]

Returns void

scrollPosition

Inherited from: IgxForOfDirective

Gets/Sets the scroll position.

const position = directive.scrollPosition;
directive.scrollPosition = value;

get scrollPosition(): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:373

Returns number

set scrollPosition(val: number): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:376

Parameters

val: number

Returns void

totalItemCount

Inherited from: IgxForOfDirective

The total count of the virtual data items, when using remote service.

this.parentVirtDir.totalItemCount = data.Count;

get totalItemCount(): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:331

Returns number

set totalItemCount(val: number): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:335

Parameters

val: number

Returns void

virtualHelper

Inherited from: IgxForOfDirective

get virtualHelper(): HTMLElement

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:354

Returns HTMLElement

Methods

addScroll

Inherited from: IgxForOfDirective

Shifts the scroll thumb position.

this.parentVirtDir.addScroll(5);

addScroll(add: number): boolean

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:643

Parameters

add: number
negative value to scroll previous and positive to scroll next;

Returns boolean

addScrollTop

Inherited from: IgxForOfDirective

Shifts the scroll thumb position.

this.parentVirtDir.addScroll(5);

addScrollTop(add: number): boolean

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:631

Parameters

add: number

Returns boolean

getIndexAtScroll

Inherited from: IgxForOfDirective

Returns the index of the element at the specified offset.

this.parentVirtDir.getIndexAtScroll(100);

getIndexAtScroll(scrollOffset: number): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:831

Parameters

scrollOffset: number

Returns number

getItemCountInView

Inherited from: IgxForOfDirective

Returns the total number of items that are fully visible.

this.parentVirtDir.getItemCountInView();

getItemCountInView(): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:775

Returns number

getScroll

Inherited from: IgxForOfDirective

Returns a reference to the scrollbar DOM element. This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation.

dir.getScroll();

getScroll(): HTMLElement

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:792

Returns HTMLElement

getScrollForIndex

Inherited from: IgxForOfDirective

Returns the scroll offset of the element at the specified index.

this.parentVirtDir.getScrollForIndex(1);

getScrollForIndex(index: number, bottom: boolean): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:819

Parameters

index: number
bottom: boolean

Returns number

getSizeAt

Inherited from: IgxForOfDirective

Returns the size of the element at the specified index.

this.parentVirtDir.getSizeAt(1);

getSizeAt(index: number): number

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:801

Parameters

index: number

Returns number

isIndexOutsideView

Inherited from: IgxForOfDirective

Returns whether the target index is outside the view.

this.parentVirtDir.isIndexOutsideView(10);

isIndexOutsideView(index: number): boolean

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:840

Parameters

index: number

Returns boolean

isScrollable

Inherited from: IgxForOfDirective

isScrollable(): boolean

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:420

Returns boolean

ngAfterViewInit

Inherited from: IgxForOfDirective

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

ngAfterViewInit(): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:515

Returns void

scrollNext

Inherited from: IgxForOfDirective

Scrolls by one item into the appropriate next direction. For "horizontal" orientation that will be the right column and for "vertical" that is the lower row.

this.parentVirtDir.scrollNext();

scrollNext(): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:722

Returns void

scrollNextPage

Inherited from: IgxForOfDirective

Scrolls by one page into the appropriate next direction. For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom.

this.parentVirtDir.scrollNextPage();

scrollNextPage(): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:746

Returns void

scrollPrev

Inherited from: IgxForOfDirective

Scrolls by one item into the appropriate previous direction. For "horizontal" orientation that will be the left column and for "vertical" that is the upper row.

this.parentVirtDir.scrollPrev();

scrollPrev(): void

Defined in projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts:735

Returns void

scrollPrevPage

Inherited from: IgxForOfDirective

Scrolls by one page into the appropriate previous direction. For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top.