Kendo UI란?
Telerik에서 개발한 HTML5, CSS3, 그리고 Javascript 표준에 기반한 UI 라이브러리
Grid, Chart, Scheduler, DropDownList 등 다양한 기능을 지원하고 있다.
또한 jquery, react 등 여러 프레임워크 기준으로도 제공되고 있다.
Kendo UI 초기설정
1. 다운로드
https://www.telerik.com/kendo-jquery-ui 해당 페이지에 접속하여 다운로드
2. 프로젝트에 추가
다운로드한 파일 압축 해제하여 원하는 프로젝트 경로에 추가
html 파일에 해당 소스 추가
<link href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-main.css" rel="stylesheet" />
<!-- jquery 없을경우-->
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="kendo UI 저장경로/mjs/kendo.all.js" type="module"></script>
<script src="kendo UI 저장경로/js/kendo.all.min.js"></script>해당 페이지에서 라이센스 js파일 다운받고 파일 프로젝트에 추가 후
html 에서 스크립트 추가 해주면 됩니다.
Kendo Grid 사용법
1. 데이터 바인딩
그리드 초기화 전 데이터 설정
따로 설정할 내용이 없고 데이터를 그대로 사용하려면 그리드 초기화 에서 바로 dataSource에 데이터 넣어도 됨
//예시로 만든 데이터 - 추후 API로 조회 하여 받아오는 부분
var orderData = [{ "id": 1, "date": "11/20/2023", "price": 30358, "name": "dacreman0", "country": "Philippines", "city": "Banisilan", "product": "Appetizer - Lobster Phyllo Roll" }];
var gridDataSource = new kendo.data.DataSource({
data: orderData,
schema: {
model: {
fields: {
//데이터 key: { type: 데이터 타입 }
id: { type: "number" },
date: { type: "date" },
price: { type: "number" },
name: { type: "string" },
country: { type: "string" },
city: { type: "string" },
product: { type: "string" },
}
}
},
pageSize: 10,
sort: {
//기본 정렬 기준 key 값
field: "date",
dir: "desc"
},
//집계 표시를 위한 설정
aggregate: [{ field: "price", aggregate: "sum" }, { field: "price", aggregate: "average" }]
});2. 그리드 초기화
<div id="grid"></div>$("#grid").kendoGrid({
dataSource: gridDataSource
});3. 그리드 구성
$("#grid").kendoGrid({}); 안에 들어가는 속성값 정리
//데이터 소스
dataSource: gridDataSource
//열 정렬 설정 -> sortable: true
//다중 열 정렬 설정 -> sortable: { mode: "multiple" }
sortable: true
//페이징 설정
pageable: true
//열 크기 조정 설정
resizable: true
//상단 툴바 기능 설정
toolbar: ["excel", "pdf", "search"]
//컬럼 설정 - 따로 정리
columns : [{ field: "id", title: "Order ID" }]컬럼 설정
columns: [
{ field: "id", width: 100, footerTemplate: "집계" },
{ field: "date", format: "{0:yyyy-MM-dd HH:mm:ss}" },
{
field: "price", width: 200, format: "{0:#,###원}", template: "<div style='color:red;'>#: price #</div>"
// 집계 표시(gridDataSource 에서 먼저 설정 해주어야 함)
, aggregates: ["sum", "average"], footerTemplate: "<div>합계: #=sum# <br/>평균:#=average# </div>"
},
{ field: "name", width: 200 },
{ field: "country", width: 200 },
{ field: "city", width: 200 },
{ field: "product" }
]field : 데이터 key
title : 그리드에 보여질 컬럼명 (설정 하지 않으면 field 값으로 들어감)
width : 열 너비
foramt : 데이터 형식 (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.format 페이지에서 규칙 확인)
templat : 해당 컬럼 커스터마이징 할 수 있음 (데이터 값은 #=value# 의 형식으로 설정)
aggregates : 해당 열에 대한 집계설정 (데이터 바인딩 시 먼저 설정 해주어야함)
footerTemplate : 그리드 footer 해당 열 커스터마이징
Kendo DropDownList 사용법
DropDownList 초기화
$("#dropdownlist").kendoDropDownList({
dataSource: data,
// 화면에 보여줄 명칭
dataTextField: "ProductName",
// value 값
dataValueField: "ID",
height: "400px",
// 검색기능 - contains, startswith, endswith
filter: "contains",
size: "small"
});