켄도 그리드를 생성시에 들어가는 값이 null 일때 '--' 라든가 '값없음' 이라던가 하는 내용을 넣어야 할 때가 있다.


물론 DB에서 쿼리로 뽑아올때 조건을 주어 null 일 경우 대체문자를 사용 할 수 있지만 


뽑아온 데이터 리스트끼리 사칙연산을 해야 하는 경우 중간에 들어가있는 string 문자열이 문제가 될 수도 있다.


혹은 쿼리에 손을 대지 못하는 경우도 있을 수 있다.



방법은 간단하다. 이런 기능이 있는줄 모르기 때문에 못쓰는 거지 있는줄 안다면 쉽게 사용이 가능하다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 

var nullTypeString = '--';

 $("#grid").kendoGrid({
       dataSource: {
           type: "odata",
           transport: {
               read: "데이터 가져올곳"
           },
           pageSize: 20
       },
       height: 550,
       groupable: true,
       sortable: true,
       pageable: {
           refresh: true,
           pageSizes: true,
           buttonCount: 5
       },
       columns: [{
           field: "record_DATE",
           title: msgData.data('elecdata'), //날짜
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       },{
           field: "tag_NAME",
           title: msgData.data('tagname'), //태그명
           locked: true,
           lockable: false,
           width: 120,
           attributes: {
               style: "text-align: left;"
             }
       }, {
           field: "sum_VAL",
           title: "Sum",
           locked: true,
           format:"{0:n2}",
           template:kendo.template("#if (sum_VAL != null) {# #=sum_VAL# #} else {# #="+nullTypeString+"# #}#"),
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }, {
           field: "avg_VAL",
           title: "Avg",
           format:"{0:n2}",
           template:kendo.template("#if (avg_VAL != null) {# #=avg_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       },{
           field: "min_VAL",
           title:"Min",
           format:"{0:n2}",
           locked: true,
           width: 120,
           template:kendo.template("#if (min_VAL != null) {# #=min_VAL# #} else {# #="+nullTypeString+"# #}#"),
           attributes: {
               style: "text-align: right;"
             }
       },  {
           field: "max_VAL",
           title: "Max",
           format:"{0:n2}",
           template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#"),
           locked: true,
           width: 120,
           attributes: {
               style: "text-align: right;"
             }
       }]
   });
cs




위와 같이 코딩하면 된다. 중요한건


columns 의


template:kendo.template("#if (max_VAL != null) {# #=max_VAL# #} else {# #="+nullTypeString+"# #}#")


이 부분이다.



해당 컬럼의 들어오는 필드의 값이 null이 아닐경우 값을 나타내고 그것이 아니라면 nulltypeString 변수값을 넣는다는 설정이다.

켄도 UI에서 제공하는 차트는 매우 유용합니다.


간단하고 예쁜 차트를 그릴수 있기 때문이죠


제 주변에선 유료 라이센스인 켄도UI를 사용하는 사람이 없기 때문에


혼자서 레퍼런스 뒤지고 삽질 하면서 배우고 있습니다 ㅎㅎ


켄도 UI에서 제공하는 차트의 배경색을 없애는 방법 입니다.


자바 스크립트에서의 코딩은 아래와 같이 작성 합니다.


 $("#kendoChart").kendoChart({

 chartArea: {

   height: 250,

   background: ""

 },

 });


위와 같이 background에 공백문자를 넣으면 배경이 사라집니다.


이것저것 막 해보다가 얻어걸렸는데 저게 정확한 사용법인지는 잘 모르겠습니다만


방법을 정말 모르겠으면 일단 되도록 만들어야겠죠? ㅎㅎ



이것때문에 돌아버리는줄 알았네요


패딩을 0을주고 마진을 0을주고 별것 다 해봤는데도 간격이 그대로 있길래


미치기 직전까지 가던 와중에 다른 방법을 발견 했습니다.


뭐 저도 구글링하면서 발견 한거지만요


<li>

내용

</li><!-- 


 --><li>내용</li> 


이런식으로 li태그 사이에 주석처리로 공백을 없애 주면 됩니다.


<li>

내용

</li><li>내용</li>


이런식으로 공백을 없애도 되지만 가독성이 너무 떨어지기 때문에 위와 같은 방법을 사용하는것이 좋을것 같습니다. 



+ Recent posts