-
Notifications
You must be signed in to change notification settings - Fork 162
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 |
| Name | Description | Status |
|---|---|---|
| Content Height Limitation | Browsers currently have height limitation for DOM elements. Because of that the total height of all rows shouldn't exceed the height limitation for browsers. Otherwise there may be unexpected changes in behavior of igxForOf. For example IE11 has height limitation of 1 533 916 pixels, which for rows with height 50px mean no more than 30 678 rows | Already fixed |