Skip to main content

DataSource and Events

DataSource API​

export class CollectionViewDataSource {
  id = `ds-${getUniqueViewId()}`;
  // rowsById, rows, versions, callbacks, pendingChanges...
  constructor(initialRows: ICollectionViewDataSourceRow[]) { /* ... */ }
}

Common operations:

appendItemsToRow(rowId: string, items: any[], applyNow = false)
removeItemsFromRow(rowId: string, startIndex: number, endIndex: number, applyNow = false)
ChangeRowHidden(rowId: string, isHidden: boolean, applyNow = false)
changeRowEnabled(rowId: string, isEnabled: boolean, applyNow = false)
removeRow(rowId: string, applyNow = false)
moveRowToIndex(rowId: string, newIndex: number, applyNow = false)
updateItem(rowId: string, itemIndex: number, newItem: IIdentifiable, applyNow = false)

Events from CollectionView​

export interface CollectionViewEvent extends ViewEvent<CollectionViewView> {
  type: CollectionEventType;
  rowIndex: number;
  itemIndex?: number;
  percent?: number;
  direction?: CollectionViewDirection;
}

Attach listeners on the view:

CollectionView({ id: 'collectionView' })
  .dataSource(this.dataSource)
  .onItemSelected((event: CollectionViewEvent) => {
    const item = event.view.getFocusedDataSourceItem();
    console.info('Selected:', event.rowIndex, event.itemIndex, item?.id);
  })
Tip: Apply Immediately

Pass applyNow = true when mutating the data source to see row changes right away during demos.