[Kendo UI] Kendo UI grid data source 하는 법과 주의할 것

---

Kendo ui 의 경우는 사용하기가 쉬운(?) 것 같다..

하지만..초보자의 입장에서 한국에서 많이 사용하지 않는 ui 이라 

 

이미 다른 선배분들이 갈고 닦아놓으신 자료들이 많이 보이지 않아

초반에 어떻게 해야지 많은 멘붕이 왔던 것도 사실이다..

 

우선 아직 많이 남아 있고 기록할 것들이 좀 있지만, 

할수 있을까라는 생각이 들었던 kendo ui grid 이다..

 

우선 kendo 의 설치 및 스프링 적용법은 아래 링크를 참고하면 될것 같다.

아직 부족한 부분이 있지만...

snepbnt.tistory.com/219?category=805038

[Kendo UI 설치] kendo UI 데모 버전 초기 설치 및 적용 방법 in Spring

 

그러면 kendo ui grid 적용법을 간단하게 적고자 한다.

이 적용법은 스프링의 JSON 파일 형식을 가지고 오는 법이다.

 

1. kendo Grid 를 만들어준다.

스프링에서 만들어준 json 형식은 기존 MVC 모델에서 db 를 통해 가져오는 binding to remote data 방식을 

사용했다. 위치는 아래 이미지와 같다.

링크는 아래를 참고하면 된다.

demos.telerik.com/kendo-ui/grid/remote-data-binding

Binding to remote data in jQuery Grid Widget Demo | Kendo UI for jQuery

$("#grid").kendoGrid 를 만들고 그 안에 dataSource 를 만드는 방법도 있지만, 나의경우에는

초반에 설정을 많이 해보았기 때문에 dataSource 를 따로 변수로 만들어주었다.

$noticeLst.request = {
			
			getNoticeLst : function(){
				// 켄도 그리드에 연결할 datasource 설정
								
				var dataSource = new kendo.data.DataSource({
					type: "jsonp",
					transport:{
						
						read: {
							cache: true,
							url : "http://localhost:8080/practice/getLst.json",
                            # 위의 주소는 스프링 controller 에 설정한 주소를 바탕으로
                            # 작성한 주소이다.
							type: "POST",
							dataType : "json",

위 처럼 dataSource 변수를 만들어서 파라미터들을 설정한 다음에 아래와 같이 kendo Grid 에 넣었다.

$("#tbs1").kendoGrid({
					dataSource: dataSource,
                    
                    
					serverPaging: true,
					serverSorting: true,
					ServerFiltering: true,
					autoBind: false,

dataSource 를 따로 설정으로 넣어주었다.

 

2. 파일에서 가져올 부분을 kendo grid의 column 부분과 data source 부분의 schema 부분에 기입한다

 

어쩌면 이 부분이 중요할 수 있다.. 나도 다른 부분에서는 다 성공을 했었지만... 이 부분을 간과해서

빨리 끝낼 수 있었던 작업을 굉장히 오래 끌었었다.

 

이 부분에서 중요한 것은,

 

내가 가져오고자 하는 파일의 구조(어떻게 구성되어 있는지) 를 알고 있어야 한다는 것이다.

 

나는 json 파일을 가져와야 했기 때문에 특히 파일의 구조를 더욱 신경썼어야 했었다..

내가 가져오고자 했던 파일 json 의 형식은 아래와 같다

{"searchPage":1,"searchText":null,"errCd":"0","user_id":"s*******",
"searchType":null,"display":10,"start":0,
"noticeLst":[{"reg_ts":"2020-00-00","total":2,"view_cnt":179,"user_id":"s*******","user_nm":"***","id":13,"row":1,"title":" 가보겠습니다"},
{"reg_ts":"2015-12-23","total":2,"view_cnt":140,"user_id":"qwedcwq","id":12,"row":2,"title":"서비스를 실시 합니다."}]}

그리고 json 파일을 가져오기 위해 내가 설정한 column 부분과 schema 부분은 아래와 같다

# dataSource 의 shcema 부분

schema: {
	model:{
		fields: {
			searchPage: {type: "number"},
			user_id : {type: "string"},
			display : {type: "number"},
			noticeLst : {type : "string"}
		}
	}
}
        
        
# kendoGrid 의 column 부분

columns:[
	{field:'searchPage', title: '번호', filterable: false},
	{field:'user_id', title: '제목'},
	{field:'display', title: '작성일'},
	{field:'noticeLst', title: '조회수'}
]
 

json 파일의 key 부분을 적절히 활용하여 가져왔다. 

해당 부분의 key 를 잘못 기입할 경우에는 데이터가 가져와져도

값이 뜨지 않을 수 있으니..조심할 것...

 

이게 원활히 되었다면 아래와 같이 뜬다.

(아래는 우선 실험을 위해 대충 설정해 놓은거라서 제대로된 결과물은 아니지만

답이 나오는 과정은 위와 같기에 크게 상관이 없다고 본다)

 

3.  아래 전체 코드 공유

 

아래 전체 코드 내용 공유하니 나중에 참고하면 될것 같다.

(function(W,D){
	W.$noticeLst = W.$noticeLst || {};
	$(document).ready(function(){
		$noticeLst.request.getLst();

	});
	
	$noticeLst.request = {
			
			getLst : function(){
				// 켄도 그리드에 연결할 datasource 설정
								
				var dataSource = new kendo.data.DataSource({
					type: "jsonp",
					transport:{
						
						read: {
							cache: true,
							url : "http://localhost:8080/haha/getLst.json",
							type: "POST",
							dataType : "json",
							success: function(result){
								// notify the data source that the request succeeded
						        options.success(result);
							},
							error: function(result){
								// notify the data source that the request failed
						        options.error(result);
							},
							contentType: "application/json"
						}
					},
					
                    # 가져오고 싶은 데이터를 추출하기 위해서는 datasource 에서는 아래의
                    # schema 설정이 중요하다
                    schema: {
						model:{
							fields: {
								searchPage: {type: "number"},
								user_id : {type: "string"},
								display : {type: "number"},
								noticeLst : {type : "string"}
							}
						}
					}
				});
				
				
				
				$("#tbs1").kendoGrid({
					dataSource: dataSource,
					serverPaging: true,
					serverSorting: true,
					ServerFiltering: true,
					autoBind: false,
					selectable: true,
					navigatable: false,
					pageable:{
						refresh: true,
						pageSizes: true
					},
					scrollable: true,
					columnMenu: false,
					
                    # datasource 에서 가져온 데이터를 노출하기 위해서는 아래의
                    # columns 설정이 중요하다
                    columns:[
						{field:'searchPage', title: '번호', filterable: false},
						{field:'user_id', title: '제목'},
						{field:'display', title: '작성일'},
						{field:'noticeLst', title: '조회수'}
					]
				});
				
		}
	};
	
}(window,document));

 

설정한 javascript 를 바탕으로 update, delete 등 다양한 설정을 늘려갈 예정이다.

 

참고로 json 포맷의 데이터가 nested json 일 경우에는 아래 링클를 참고해서 schema를 작성하면 좋을 것 같다

snepbnt.tistory.com/237

[Kendo UI] Kendo UI grid json 포멧 처리하는 법

 

 

아래 링크는 내가 위 코드를 짜기 위해서 참고한 사이트들이다.

kendo ui 의 api reference 를 많이 참고했다.

 

참고 링크

demos.telerik.com/kendo-ui/grid/remote-data-binding

Binding to remote data in jQuery Grid Widget Demo | Kendo UI for jQuery

stackoverflow.com/questions/11248478/how-to-bind-data-to-a-kendoui-grid-from-an-ajax-query

How to bind data to a kendoui grid from an ajax query?

--> 위 링크는 ajax 사용법인데 혹시나 해서 첨부했지만, dataSource 의 transport.read 파라미터는 

      자동으로 ajax 설정을 해주기 때문에 ajax 를 쓰지 않아도 된다.

 

docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read

transport.read - API Reference - Kendo UI DataSource | Kendo UI for jQuery

--> 중요한 파라미터인 read 에 대한 설명이다. 해당 부분을 읽으면서 작업을 진행하는 것이 좋다.