[Kendo UI] KendoGrid

page : 3 / pageSize : 20 일때  skip과 take는?
(자동계산)
skip = (page-1) * take = 2*20 = 40
take = pageSize = 20 이 된다. 

$("#grid").kendoGrid({
				dataSource: {
					data: null,
					transport: {
						read: {
							dataType: "json",
							contentType: "application/json; charset=utf-8",
							url: 'url주소',
							type: "POST",
							beforeSend: function(xhr) {
								xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
							}
						},
						parameterMap:function(options){
                            var param = $filter();

                            options.startDtTm =param.startDtTm;
                            options.endDtTm = param.endDtTm;
                            return JSON.stringify(options);

						}
					},
					schema: {
						data: "data",
						total: "total",
					},
					//page: 1, //초기화할때 첫 로딩 페이지 지정  
					serverPaging: true,// 이 위치에 있지 않으면 , parameterMap에 넘어가는 option 값에 페이지 관련 필드 안넘어감 .take,skip,page,pageSize
				},
				columns: [
					{ field: "sn", title: "순번", sortable: true, width: "65px",  template: "#=sn #" },
					{ field: "info",   title: "정보", width: "180px", template: "#= info != null ? info : '-' #", sortable: false},
					{
                        field: "file",title: "파일첨부",width: "50px",sortable:false,
                        template: function(data) {
                            if (data.file) {
                                return '<div class = "fileIcon" >'+
                                         '<img style="margin-inline: auto;" className="fileIco" src="' + contextPath + '/images/icons/ico_file.png" alt="파일다운로드 아이콘"/>'+
                                       '</div>'
                            } else {
                                return '파일없음';
                            }
                        }
					},
				],
                change: function(){}
                dataBound: function(e){
                              $('.fileIcon').click(function(){
                                  var grid = $('#grid').data("kendoGrid");
                                  var dataItem = grid.dataItem($(this).closest("tr"));
                                  var data = dataItem;
             					 .......
                },

				navigatable: true,
                sortable: {
                        mode: "single", // 단일 컬럼에 대한 정렬
                        allowUnsort: true  // 이 옵션을 통해 정렬 해제를 허용함으로 에러 해결  클릭순서대로 : asc>desc>정렬해제 순으로 진행됨
                },
				pageable: {
					pageSize: 10,
					buttonCount: 5,
				},
				noRecords: {
					template: "데이터가 없습니다."
				},
				editable: false,
				resizable: true,
				selectable: "row"
			});

transport?

• 요청 매개변수를 수신하고 데이터를 포함한 응답을 반환할 원격 엔드포인트이다.
• read : 요청 매개변수를 수신하는 항목
• parameterMap : 수신할때 필요한 데이터를 포함한 요청을 보내는 항목

columns> sortable : 컬럼 정렬 설정

sortable: true  

위처럼 true로 설정하면 아래와 같이 sort: Array(1)가 추가 되는것을 알 수있다.
.

sort 배열 안을 보면 클릭한 컬럼의 방향이 asc(오름차순)으로 설정 되는것을 확인 할 수 있다.

한번 더 해당 컬럼을 클릭하면

같이 desc(내림차순)으로 변경되는 것을 알 수 있다.
이것을 이용해 , 서버단에서 데이터를 정렬 가능하다.

  <foreach item="sortItem" collection="sort">
      <if test="sortItem.field != null and sortItem.dir != null">
        <choose>
          <when test="sortItem.dir == 'asc' and sortItem.field == 'sn'">
            user_id ASC,
          </when>
          <when test="sortItem.dir == 'desc' and sortItem.field == 'sn'">
            user_id DESC,
          </when>
        </choose>
    </if>
</foreach>

change?

• 해당 그리드에 클릭이벤트 등의 변경사항이 발생했을때 변경사항에 대해 함수처리 할 수 있다.
  예 ) 행 클릭

dataBound?

• 그리드에 DB에서 가져온 데이터가 바인딩 될 때를 발생하는 상황에 대해 함수처리 가능 하다.
  예 ) 총 데이터 수, 각 행의 첨부 파일 다운로드

serverPaging ?

• 디폴트값은 false로 클라이언트 데이터 항목을 페이징 한다.

• true로 활성화 설정되면 페이징 구현은 원격서비스에 맡긴다.
  - 활성화 되면

  1. page : 반환할 페이지

  2. pageSize : 반환할 앙목의 수

  3. skip : 건너뛸 데이터의 수

  4. take :반환할 데이터 항목 수 (=pageSize와 동일)

  5. 현재페이지와 페이지크기를 기반으로 skip과 take(가져오기) 값이 자동계산됨

     콘솔창 결과
     

• 그러나 pageable에 이 값을 true설정하게 되면 위의 페이지관련 정보가 parameterMap 으로 넘어가지 않으니 주의!
  

pageable ?

• 페이징 처리 설정
• pageSizes : 페이징 될 사이즈를 10개 ,20 개 50개 , 100 개 등 선택한 size만큼 데이터를 가져올 수 있음.
• buttonCount: 5, //버튼 수 지정

noRecords

• template: 데이터 없을때 표시될 메세지

selectable ?

• "row" : 선택 항목의 데이터를 행 기준으로 가져옴

⭐실행하면 생긴 이슈

1. 컬럼에 정렬을 넣었는데 3번째 클릭시 sort.Empty() 로 나타나고 sql에서 문제가 발생했다.

• 해결
  js는

sortable: {
  mode: "single", // 단일 컬럼에 대한 정렬
    allowUnsort: true  // 이 옵션을 통해 정렬 해제를 허용함으로 에러 해결  클릭순서대로 : asc>desc>정렬해제 순으로 진행됨
},

추가시켜 첫번째 클릭(ASC) 두번째 클릭(DESC) 세번째 클릭(정렬해제) 순으로 해주었고 ,
SQL 에서는

	<if test = "sort == null or sort.isEmpty">

sort.isEmpty 일때 별도의 정렬처리를 함으로써 에러를 해결 할 수 있었다.

참고자료
KendoGrid