Kendo UI Grid 사용방법 (영상)

 

안녕하세요.

오늘은 Kendo UI에서 grid 부분을 사용하는 방법에 대해 이야기해보겠습니다.

grid는 자료의 필터링, 글웁화, 정렬 등의 기능을 적용할 수 있는 라이브러리입니다.

많은 자료들이 없는듯하여 간단히 포스팅하니 참고만 해주시면 될 것 같습니다.

 

 

제가 구현한 영상입니다.

자바에서 JSON 데이터를 내려서 스크립트로 Grid를 적용한 작업을 진행하였습니다.

 

 

 

엑셀 다운로드나 필터링 등의 기능들이 있는데 사이트에 가보면 더 많은 기능들이 있으니 

필요한 부분이 있으면 가이드를 확인하시면 됩니다.

 

 

https://www.telerik.com/kendo-ui

JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI

 

 

 

 

 

Controller

 

String [] header = new String[12];
header = textCf.headerArray(header);
 
List<stats_01> list = storeService.textDataList(st1);
 
//====================== Header Json ===========================
JSONArray jsonHeader =  new JSONArray();
for(String s : header) {
    JSONObject obj = new JSONObject();
    String field = s.replaceAll("\\(", "").replaceAll("\\)", "");
 
    obj.put("field", field);
    obj.put("title", s);
    String widthSize = "130px";
    obj.put("width", widthSize);
    jsonHeader.add(obj);
}
model.addAttribute("jsonHeader", jsonHeader);
//====================== Header Json ===========================
 
//====================== Body Json =============================
JSONArray jsonBody =  new JSONArray();
jsonBody = JSONArray.fromObject(list);
 
model.addAttribute("jsonBody", jsonBody);
//====================== Body Json =============================

 

해더와 바디 데이터가 필요합니다.

두개의 부분을 배열형태로 json으로 변형해주었습니다.

 

 

 

 

 

 

 

Script

 

<div id="grid"></div>
 
 
 
<script>
 
var jsonBody =${jsonBody};
var jsonHeader = ${jsonHeader};
 
 
$(document).ready(function() {
 
$("#grid").kendoGrid({
    
    toolbar: ["excel"],
    excel: {
        fileName: "statisticsExcel.xlsx",
        proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
        allPages: true,
        filterable: true
    },
    columns : jsonHeader,
    dataSource:{
        type: "odata",
        data : jsonBody,
        pageSize: 20
    },
    height: 550,
    filterable: {
        mode: "row"
    },
    scrollable: {
        endless: true
    }
    
});
 
});
    
</script>
    

 

스크립트는 jquery, angular, react, vue 를 선택할 수 있습니다.

이중에서 저는 제이쿼리로 구현하였습니다.

 

 

• excel부분에 파일명만 설정해주고 필요 옵션을 넣어주면 자동으로 구현,
• 컬럼에는 해더의 정보와
• 데이터소스에 바디 정보를 넣어주면 됩니다.
• 그리고 스크롤 기능을 사용해주면 페이징이 필요없이 데이터가 있을때까지 자동 스크롤이 적용됩니다.

 

 

 

사용자 입장에서도 편리하고 기능적으로 풍부한 kendo ui의 grid 기능을

한번쯤은 사용해보는것도 나쁘지 않을 것 같습니다~