Kendo UI의 그리드를 사용할떄
특정 값이 들어오면 그리드의 내용을 다른것으로 바꾸는 방법에 대해 알아보자.
예를들어 값이 0으로 들어오면 '미사용' 1로 들어오면 '사용' 이런식으로 말이다.
일반적으로 DB에서 값이 0으로 들어오면 0으로 1로 들어오면 1로 표기가 되는데
켄도의 템플릿(template) 기능을 사용하면 좀더 다양하게 활용이 가능 하다
일반적인 켄도 그리드의 컬럼 설정 스크립트이다.
1 2 3 4 5 | columns: [ {field: "code_ID", width:"80", title: "코드 ID"}, {field: "code_NAME", width:"130", title: "코드 명칭"}, {field: "code_TYPE", width:"80", title: "사용여부"} ] | cs |
위와 같이 필드 아이디와 타이틀 정도만 설정을 해주면
해당 오브젝트의 값이 그대로 들어가게 된다.
템플릿을 이용해 사용여부 code_TYPE에 값이 0으로 들어오면 미사용 1로 들어오면 사용 이라고 표현하기 위한 코드는
1 2 3 4 5 6 | columns: [ {field: "code_ID", width:"80", title: "코드 ID"}, {field: "code_NAME", width:"130", title: "코드 명칭"}, {field: "code_TYPE", width:"80", title: "사용여부", template:kendo.template("#if (code_TYPE == 0) {# #='미사용'# #} else if(code_TYPE== 1 ){# #='사'# #} else {# #='NFC'# #} #")} ] | cs |
컬럼을 만들어주는 객체에 template라는 것을 추가해고
위와 같이 코딩하게 되면 IF문을 사용하여 code_type의 값에 따라 다른 내용을 출력 할 수 있게 된다.
템플릿을 사용하면 그리드를 다양하게 활용 할 수가 있다.
'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글
| [kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마 (0) | 2017.02.27 |
|---|---|
| [css] css만으로 애니메이션 효과주는 방법 (0) | 2016.10.07 |
| [CSS] 선택자 브라우저별 지원여부 (0) | 2016.06.21 |
| [kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기 (0) | 2016.06.21 |
| [kendo ui] 켄도 ui 차트 색상 지정하기 (0) | 2016.06.21 |