kendo vitualization

켄도 드롭다운리스트(dropdownlist), 콤보박스(combobox) 등 위젯에서 서버페이징(serverPaging)을 적용하는 방법을 설명한다.

켄도 dataSource의 서버페이징은 페이징파라미터만 있으면 원하는 페이지를 파라미터로 전송 했을 때, 해당 페이지의 데이터만 가져오면 되지만,

드롭다운리스트나 콤보박스 경우에는 페이지가 아닌 스크롤을 이용해 해당 위치를 가늠하므로 작동 방식이 앞의 방식과는 약간 상이하다.

Front-End(view)

위젯를 선택하고 해당 옵션을 추가한다. 드롭다운리스트나 콤보박스나 작동하는 방식은 같다.

DropDownList or ComboBox

옵션값

1. height : 520 // 위젯 클릭시 하단으로 출력되는 아이템 컨테이너의 크기를 말한다. 기본으로 520이면 적당한 크기로 출력된다. 

datasource

기존의 datasource의 서버페이징과 같은 동작을 한다.

필수옵션값

1. serverPaing: true
2. pageSize : {int} //상위 옵션의 height와 virtul 항목의 itemHeight 값으로 권장값을 도출할 수 있다. 공식 ((height/itemHeight) * 4) . 레퍼런스 Set Page Size 항목 참조

선택옵션값

1. serverFiltering: true //필터링기능이 필요할시 정의

virtual

가장 중요한 항목이다.

옵션값

1. itemHeight : 26 // 아이템(row)하나의 높이 값. 자동으로 정의되어 필수값은 아니지만 켄도에서는 크리티컬 이슈를 피하기위해 입력하기를 권장함 

2. valueMapper : {}  // 드롭다운이나 콤보박스가 아닌 외부에서 select 메소드를 사용할 때, 반드시 정의되어야 하는 옵션.

주의사항

1) valueMapper 항목의 반환값은 select시, 선택한 Item의 전체 리스트에서 위치한 index값을 리턴해주면 된다.

2) 요청파라미터는 options.value을 기본으로 보내는데 드롭다운리스트/콤보박스에서 dataValueField의 값이다.

3) 만약 선택한 아이템이 없다면, null, [] 혹은 -1 값을 리턴해주면 된다.

    3. mapValueTo : "index" //기본값은 index이며, dataItem으로 선택시 valueMapper의 리턴값은 dataItem 형식이 될것이다.

virtualization process

1. 위젯에서 select 메소드가 사용되면 valueMapper 콜백함수가 불려지고,
2. dataValue값을 파라미터로 전송한다.
3. 서버단에서 해당 아이템의 index(전체리스트에서 위치하는 값) 을 구해서 반환하면
4. 위젯에 적용이 된다.
5. 적용된 index에 따라 자동적으로 page 값을 계산하게 되고, 
6. 데이터 소스에 해당 page값을 요청 파라미터로 전송해서
7. 해당 페이지의 아이템 리스트를 불러온다
8. 해당 값으로 적용.

Back-End(Controller/Service)

valueMapper의 서비스와, 페이징처리한 데이터를 리턴하는 컨트롤러와 서비스를 생성할 수 있도록 한다.

dataSource

paging파라미터를 가지는 아이템목록을 반환한다. (방법 생략)

valueMapper

위 dataSource와 동일한 아이템리스트에서 index를 반환해야한다.

오라클에서는 rownum를 이용해 해당 값을 출력했다.