[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용]

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

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

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

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

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

 

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;"
             }
       }]
   });

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

columns 의

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

이 부분이다.

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