# CollectionViewNavigator

## Content

**CollectionViewNavigator** 컨트롤을 **CollectionView** 컨트롤과 함께 사용하면 사용자가 **CollectionView**의 항목을 페이지별 또는 항목별로 쉽게 탐색할 수 있습니다.

**CollectionViewNavigator**를 만들 때 설정해야 하는 세 가지 속성이 있습니다:

* **cv**: Collection View Navigator에 연결될 Collection View를 설정합니다.
* **byPage**: CollectionViewNavigator에서 사용자가 페이지별 또는 항목별로 탐색할 수 있는지 여부를 결정하는 부울(Boolean) 속성입니다.
* **headerFormat**: Collection View Navigator에 표시되는 텍스트를 설정합니다.

## 항목별 탐색

**CollectionView**에서 항목별로 탐색하려면, **CollectionViewNavigator**를 **CollectionView**에 연결하고 **byPage** 속성을 **false**로 설정해야 합니다:

```javascript
let view = new CollectionView(getData(), {});

new CollectionViewNavigator('#cv-nav', {
    cv: view,
    byPage: false,
    headerFormat: 'Item {currentItem:n0} of {itemCount:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```


![collectionviewnavigator-by-item.2774d3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/f0e94a5a-9d66-4b7c-8611-81d5cbaf01b7/collectionviewnavigator-by-item.2774d3.e92d5c.png)

## Navigating by Page

**CollectionView**의 페이지로 이동하려면, **CollectionViewNavigator**를 **CollectionView**에 연결하고, **byPage** 속성을 **true**로 설정해야 합니다:

```javascript
let view = new CollectionView(getData(), {
    pageSize: 5
});

new CollectionViewNavigator('#cv-page', {
    cv: view,
    byPage: true,
    headerFormat: 'Page {current:n0} of {count:n0}'
});

new FlexGrid('#cv-grid', {
    itemsSource: view,
    selectionMode: 'RowRange',
    showMarquee: true
})
```


![collectionviewnavigator-by-page.9c6bd4](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/f0e94a5a-9d66-4b7c-8611-81d5cbaf01b7/collectionviewnavigator-by-page.9c6bd4.1bb14e.png?width=732&caption=Wijmo%20CollectionViewNavigator%20By%20Item)