[kendo ui] grid command destroy 안되는 현상 해결 방법

kendo ui의 grid 기능중 해당 라인을 삭제(제거) 하는 버튼을 추가 할수 있도록

 

command 의 destory가 있다.

 

그런데 해당 버튼을 클릭해도 dataSource의 destory가 아닌 create가 호출 되는 현상이 있는데

 

dataSource의 schema model에 지정하는 id값이 올바르지 못해서 그런것이다.

 

특히나 vo로 받아오는 경우엔 앞단어가 소문자로 치환되서 받아지는 것에 유의 하여야 한다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
schema : {
            model : {
                id : "facility_ID",
                fields : {
                    fields : {
                        FACILITY_NM : {},
                        ASSET_CODE : {},
                        ENERGY_USE_ID : {},
                        CM_STANDARD : {},
                        INSTALLATION_DT : {},
                        EXPECTED_DAY : {},
                        PREVICOUS_DT : {},
                        EXPECTED_DT : {},
                    }
                }
            }
 cs

 

저기서 id라고 쓰여져 있는 부분에 id필드명이 정확히 입력이 되어야

 

destory가 호출이 된다.

저작자표시

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기  (0) 2018.02.28
[kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마  (0) 2017.02.27
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12

[kendo ui] 켄도 ui bar, column 차트 모서리 radius 효과 넣기 






회사에서 가장 자주 사용하는 ui 플러그인은 kendo ui 이다.


주로 개발하는게 BEMS EMS같은 에너지 관리 시스템 개발인데


여기에 차트들이 굉장히 많이 들어간다.


kendo ui가 일단 기본디자인이 이쁘고 첫회사를 다닐때부터 사용했던 터라


익숙해서 개발에 소요되는 시간이 가장 짧기 때문에


새로운 회사에 들어가면 kendo ui를 사용하자고 어필을 많이 하기 떄문이다.





기본 디자인으로 사용을 하다가 이번에 새로운 프로젝트의 디자인 시안에


켄도 차트의 막대 부분에 radius 효과가 들어가는 부분이 있는데



예전에 구현해놨던 소스를 참고하려고 해도 그떄 구현했던건 윗부분이 볼록해 보이게 하는 효과였고


모서리에 radius 효과를 주는 부분은 없었다.




반나절쯤 구글링을 하다가 힌트가 될 소스를 발견하고 예전에 구현해놨던 코드와 접목시켜서


완성을 했다.


역시 구글신은 정답을 알고 계신다.




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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
$("#mChart").kendoChart({
         legend: {
                position: "bottom",
                orientation: "horizontal"
              },
              seriesDefaults: {
                  overlay: { gradient: "none" },
                  visual: function (e) {
                        return createColumn(e.rect, e.options.color);
                    }
                },
         series: [{
             type: "column",
             data: data1,
             stack: true,
             name: "on battery",
             color: "#d2d2d2",
             axis: "kWh"
         },{
             type: "line",
             data: data2,
             name: "mpg",
             color: "#ec5e0a",
             axis: "mpg"
         }, {
             type: "line",
             data: data3,
             name: "l/100 km",
             color: "#4e4141",
             axis: "l100km"
         }],
         valueAxes: [{
             name: "kWh",
             title: { text: "kWh" },
             min: 0, 
             max: 161,
             majorUnit: 32,
             color: "#006ef0"
         }, {
             name: "mpg",
             title: { text: "℃" },
             color: "#ec5e0a"
         }, {
             name: "l100km",
             title: { text: "%" },
             color: "#4e4141"
         }],
         categoryAxis: {
             categories: category,
             // Align the first two value axes to the left
             // and the last two to the right.
             //
             // Right alignment is done by specifying a
             // crossing value greater than or equal to
             // the number of categories.
             axisCrossingValues: [0, 24, 24]
         }
     });
 
 
 
 
 
function createColumn(rect, color) {
    var center = rect.center();
    var origin = rect.origin;
    
    var curveDistance = rect.size.width / 3;
    var x = rect.origin.x;
    var y = rect.origin.y;
    var bottomRight = rect.bottomRight();
    var bottomRightX = bottomRight.x;
    var bottomRightY = bottomRight.y;
    
    
    
    var gradient = new drawing.LinearGradient({
        stops: [{
            offset: 0,
            color: color
        }]
    });
 
    var path = new drawing.Path({
            fill: gradient,
            stroke: {
                color: "none"
            }
        }).moveTo(bottomRightX - curveDistance, y)
        .curveTo([bottomRightX, y], [bottomRightX, y], [bottomRightX, y + curveDistance])
        .lineTo([bottomRightX, bottomRightY - curveDistance])
        .curveTo(bottomRight, bottomRight, [bottomRightX - curveDistance, bottomRightY])
        .lineTo([x + curveDistance, bottomRightY])
        .curveTo([x, bottomRightY], [x, bottomRightY], [x, bottomRightY - curveDistance])
        .lineTo(x, y + curveDistance)
        .curveTo([x, y], [x, y], [x + curveDistance, y])
        .close();
    
    var topArcGeometry = new geometry.Arc([center.x, origin.y], {
      /*  startAngle: 0,
        endAngle: 360,
        radiusX: radiusX,
        radiusY: radiusY  */             
    });
 
    var topArc = new drawing.Arc(topArcGeometry, {
        fill: {
            color: color
        },
        stroke: {
            /*color: "#ebebeb"*/
        }
    });
    var group = new drawing.Group();
    
   // group.append(path, topArc);
    group.append(path);
    return group;
}
 
 
 
 
cs






비쥬얼의 크리에이트컬럼 펑션으로 들어가


막대부분 패스를 재설정 해준 후 렌더링 해준다.




저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] grid command destroy 안되는 현상 해결 방법  (0) 2021.03.30
[kendo ui] treeView 선택된 노드 정보 가져오기  (0) 2018.05.15
[kendo ui] Y축 값이 1 이하일땐 소수점 이상일땐 자연수, 천단위 콤마  (0) 2017.02.27
[css] css만으로 애니메이션 효과주는 방법  (0) 2016.10.07
[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12

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

켄도 ui 라인차트의 bullet(라인 사이의 동그라미)을 없애는 방법 입니다.


라인을 그려줄때 동그란 마커 없이 깔끔하게 그려주고 싶을때 사용 합니다.


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
 $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth \n /GDP annual %/"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "line",
                    style: "smooth",
                   markers:{
                                  size:1
                                  }
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                  
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
cs



이전과 같은 켄도 ui 라인차트 데모페이지의 첫번째 소스 입니다.


저기에서 


seriesDefaults 속성에


 markers:{
           size:1
       }


markers 라는 속성을 추가 하였고 사이즈는 1로 지정 하였습니다.


0으로 지정하면 마우스오버 되었을때 엄청 커다란 동그라미가 생기네요


시리즈 디폴트에 마커스 사이즈를 1로 지정해 놓으면 모든 라인에 bullet가 사라지게 됩니다.


혹은 특정 라인에만 bullet를 없애고 싶을땐




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                      markers:{
                              size:1
                           }
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727],
                  markers:{
                           size:1
                         }
                },{
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                },{
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
cs



시리즈에 들어가는 속성에 마커스를 따로 지정해 주면 됩니다.


저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[Kendo UI] 템플릿을 사용해 그리드 값 IF문 사용 하기( grid value use template for 'if')  (2) 2016.08.12
[CSS] 선택자 브라우저별 지원여부  (0) 2016.06.21
[kendo ui] 켄도 ui 차트 색상 지정하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용]  (0) 2016.06.20

켄도 그리드를 생성시에 들어가는 값이 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 변수값을 넣는다는 설정이다.

저작자표시 비영리

'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글

[kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기  (0) 2016.06.21
[kendo ui] 켄도 ui 차트 색상 지정하기  (0) 2016.06.21
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기  (0) 2016.06.20
[켄도ui] 차트 배경 없애는 방법, 배경 투명으로 만들기  (0) 2015.07.13
[CSS 퍼블리싱] ul li 간격 없애기  (2) 2015.06.19

+ Recent posts

티스토리툴바