-
Notifications
You must be signed in to change notification settings - Fork 160
IgxForOfDirective specification
Many modern applications require displaying big data with high performance in a way that is seamless to the end user. For such scenarios, it is imperative to have a virtual rendering mechanism in place that allows the user to scroll through a large set of data smoothly with optimal performance.
The idea is to provide smooth rendering and scrolling experience by reducing the number of DOM objects in-memory.
Provide a directive, which creates a scrollable container and render only small chunks of the data. The directive usage should be similar to the usage of the structural directive *ngFor. The directive should be able to virtualize the igx-grid and igx-list. In addition, it should be usable for any custom template. Should be pluggable for both vertical and horizontal virtualization.
As developer, I want:
- to be able to use the igx-virtual-directive to render any set of components vertically, so that I can have smooth scrolling and rendering experience.
- to be able to use the igx-virtual-directive to render any set of components horizontally, so that I can have smooth scrolling and rendering experience.
- to be able to nest the igx-virtual-directive to have virtualization in both horizontal and vertical direction for any set of components, so that I can have smooth scrolling and rendering experience.
- to use igx-virtual-directive into igx-grid so that the grid remain usable with huge amount of the records and columns.
- to be able to use igx-virtual-directive into igx-list so that the grid remain usable with huge amount of the records and columns.
As an end user, I want:
- to be able to scroll up and down with the arrows any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
- to be able to scroll with the mouse wheel any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
- to be able to drag the thumb of any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
- to be able to scroll on touch devices any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
| Name | Type | Description |
|---|---|---|
| igxForItemSize | string | The px-affixed size of the item along the axis of scrolling |
| igxForScrollContainer | string | Only the strings vertical and horizontal are valid and specify the scroll orientation |
| igxForContainerSize | string | The px-affixed size of the container along the axis of scrolling |
| igxForScrollContainer | IgxForOf | Optionally pass the parent igxForOf instance to create a virtual template scrolling both horizontally and vertically |
| Name | Description |
|---|---|
| Event emitters | Notify for a change |
| OnChunkLoad | Used on chunk loaded. Emits after a new chunk has been loaded. |
| OnChunkPreload | Used 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. |
List of public accessors that the developers may use to get information from the igxFor:
| Name | Type | Description |
|---|---|---|
| id | string | Unique identifier of the directive |
| state | IgxForState | The current state of the directive it contains startIndex and chunkSize
|
| totalItemCount | number | The total count of the virtual data items, when using remote service |
| Signature | Description |
|---|---|
| scrollNext() | Scrolls by one item into the appropriate next direction |
| scrollPrev() | Scrolls by one item into the appropriate previous direction |
| scrollTo(index) | Scrolls to the specified index |