재밌는 코딩 공부

특정 컬럼의 길이를 maxlength 길이만큼 제한합니다.

edit: function (e) {
                e.container.find("input[name=컬럼이름]").attr("maxlength", 5);

}

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema?_ga=2.159881789.1452820340.1638153350-1125006826.1618994660#schemaaggregates 

kendoGrid를 위해 사용되는 schema와 schema는 어떤 기능이 있는지 살펴보겠습니다.

schema

서버에서 보낸 응답을 파싱 하여 KendoGrid에 어떻게 데이터를 보여줄지 그리고 편집은 어떻게 할지 알려 줍니다.

schema.groups

그룹을 포함하는 서버 응답의 필드 응답에서 그룹을 반환하기 위해 호출되는 함수로 설정할 수 있습니다.

해당 옵션은 serverGrouping option에 true 값을 할당해야 사용할 수 있습니다.

위 내용은 공식 문서를 번역한 설명입니다. 내용이 조금 어려우니 아래 예시를 참조해주세요

직접 사용한 예를 보여드리겠습니다.

groups를 이용하여 아래 이미지와 같이 테이블을 ISVALID 속성의 값이 N인지 Y인지로 그룹을 만들었습니다.

위와 같이 사용하기 위한 코드를 설명하겠습니다. 우선 스키마 밖에서 그룹을 만들 때 구분 지어줄 필드를 지정합니다.

 group: [{ field: "ISVALID" }]

저는 그룹을 지어줄 필드로 ISVALID를 선택했습니다.그리고 스키마 안에서 serverGrouping, groups 필드에 아래 코드 블록의 값을 넣으면 됩니다.

serverGrouping: true,
groups: "groups"

해당 설정이 끝나면 위 이미지처럼 ISVALID로 그룹화된 테이블을 확인할 수 있습니다.

schema.data

데이터 항목이 포함된 서버 응답 필드. 응답에 대한 데이터 항목을 반환하기 위해 호출되는 함수로 설정할 수 있다고 공식 문서에 나와있습니다.

해당 함수는 현재 아래와 같이 사용하고 있습니다.

 data: "Data"

data에 "Data"라고 값을 할당해주는 이유는 서버 측 Response에 그리드에 표시에줄 값들이 있는 변수 를 매핑해주는 것입니다. 서버측의 리턴 타입을 보면 아래와 같습니다.

Resoponse라는 클래스에 Data라는 변수에 그리드에 표기할 값들을 담아 클라이언트에 전달합니다. 

Response값에 그리드에 표기할 값만 담는다면 위와같이 매핑 할 필요가 없지만 Response에 여러 변수를 사용한다면 매핑해주어야 합니다.

schema.total

총 데이터 항목 수를 포함하는 서버 응답의 필드. 응답에 대한 총 데이터 항목 수를 반환하기 위해 호출되는 함수로 설정할 수 있습니다.

스키마에 total 속성을 지정하지 않은 경우

스키마에 total 속성을 total: "Count"와 같이 지정한 경우 아이템의 인덱스와 총계수를 페이지 우측 하단에 나타냅니다.

schema.parse

서버 응답을 parse 에서 사전 처리하거나 구문 분석할 때 사용합니다. 해당 기능을 사용한 예시를 보여드리겠습니다. 아래 화면은 parse를 사용하기 전입니다. 저는 parse 기능을 사용해서 아이템 ID 값들에 아이템을 붙이고 수량은 각 수량마다 100을 더하여 보겠습니다.

아래 화면은 제가 원하는 것을 구현한 화면입니다. 아이템 ID에는 각 아이템 ID마다 아이템이라고 붙어있고 수량은

100씩 증가한 것을 확인할 수 있습니다.

서버의 데이터를 사용하기 전 파싱 하기 위해 사용한 함수는 아래와 같습니다.

    parse: function (response) {
        var boms = [];
        for (var i = 0; i < response.Data.length; i++) {
            var bom = {
                ITEMID: "아이템" + response.Data[i].ITEMID,
                ISVALID: response.Data[i].ISVALID,
                QTY: response.Data[i].QTY + 100
            };
            boms.push(bom);
        }
        response.Data = boms;
        return response;
    }

위와 같이 사용하기 위해서 파라미터 response 가 어떤 식으로 메서드로 들어오는지 확인하여야 합니다.

response 파라미터 값을 확인하기 위해 디버깅에 있는 조사식을 활용하였습니다.

위와 같이 ITEMID와, QTY 등의 값은 response의 data에 array형식으로 들어가 있음으로 response.Data 와 같은 형식으로 값에 접근할 수 있습니다.

schema.model

모델 객체를 통해서 속성의 자료형을 변경하거나 밸리데이션 체크 등의 기능을 수행할 수 있습니다.

예를 들어 ID 값을 사용자가 함부로 바꾸면 여러 가지 문제가 발생할 수 있습니다. 따라서 아래와 같이 해당 필드의 edit 여부를 허용해줄지 설정해줄 수 있으며 데이터의 올바른 입력을 위해서 validation check도 할 수 있습니다.

ex1

 model:
 {
     id: "ITEMID",
     fields:
     {
     	 // 아이템ID의 편집을 허가하지 않으며 null값 할당을 허용하지 않습니다.
         ITEMID: { editable: false, nullable: false },
         // 해당값을 UPDATE하거나 CREATE할때 validation을 체크하며 QTY값을 반드시 입력받도록 합니다.
         QTY: { validation: { required: true }, nullable: false },
         // ISVALID 값을 UPDATE나 CREATE할때 반드시 입력 받도록 하는 기능입니다.
         ISVALID: { validation: { required: true }, nullable: false }
 	 }
}

ex1처럼 코드를 만들면 아래 이미지와 같은 결과를 얻을 수 있습니다.

- 아이템ID의 경우 editable 값을 False로 할당하였기 때문에 편집이 되지 않아야 됩니다. 따라서 위 화면처럼 편집이 불가능하게 됩니다.

- QTY와 같은 경우 required값을 True로 주었습니다. 따라서 위와같이 공백을 입력할 경우 경고창이 나타나게 됩니다.

ex2

model: {
      id: "ProductID",
      fields: {
        ProductID: {
          //this field will not be editable (default value is true)
          editable: false,
          // a defaultValue will not be assigned (default value is false)
          nullable: true
        },
        ProductName: {
          //set validation rules
          validation: { required: true }
        },
        UnitPrice: {
          //data type of the field {number|string|boolean|date} default is string
          type: "number",
          // used when new model is created
          defaultValue: 42,
          validation: { required: true, min: 1 }
        }
      }
    }

2번째 예제는 공식문서의 예제입니다. 해당 예제를 통해 알수있는 점은 지정한 속성의 type과 기본 값 그리고 벨리데이션을 설정해줄 수 있습니다.

schema.aggregates

테이블의 원하는 속성을 선택해서 집계 함수를 적용하고 해당 결과를 Json 형태로 리턴해주는 객체입니다.

aggregate를 사용하려면 serverAggregates 값을 true로 바꿔주어야 됩니다.

      serverAggregates: true,
      aggregate: [
        { field: "unitPrice", aggregate: "max" },
        { field: "unitPrice", aggregate: "min" },
        { field: "ProductName", aggregate: "count" }
      ]

위와 같은 식으로 사용하면 unitPrice의 최댓값과 최솟값을 구할 수 있고 ProductName의 개수를 리턴 받을 수 있습니다.

리턴되는 형식은 아래와 같이 Json 형태이며 필드 이름 안에 집계 함수의 이름이 키값으로 결괏값이 value로 들어가 있습니다.

    {
      unitPrice: {
          max: 100,
          min: 1
      },
      productName: {
          count: 42
      }
    }

이제 직접 aggregate를 활용해서 사용해보겠습니다. 하지만 해당 예제는 aggregate를 schema 안에서 선언하지 않고 밖에서 선언하여 사용하였습니다.

우선 빠른 이해를 위해 결과를 먼저 보여드리겠습니다.

위와 같이 그룹을 지정후 count나 sum을 활용하기위한 코드

 , group: {
     field: "ISVALID", aggregates: [
         { field: "ITEMID", aggregate: "count" },
         { field: "QTY", aggregate: "sum" }
     ]
 },
 aggregate: [{ field: "ITEMID", aggregate: "count" },
             { field: "QTY", aggregate: "sum"}]

columns: [
    { field: "ITEMID", title: "아이템ID", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
    { field: "QTY", title: "수량", aggregates: ["sum"], groupFooterTemplate: "Sum: #=sum#" },
    "ISVALID",
    { command: ["edit", "destroy"], title: "" }
]

좀더 심화적으로 학습을 원하신다면 아래 링크를 참조해주시기 바랍니다.

https://demos.telerik.com/kendo-ui/grid/aggregates

KendoGrid Aggregate - JSFiddle - Code Playground

schema.errors

서버의 응답에 에러가 있으면 에러 이벤트를 발생시키는 필드입니다.

  schema: {
    data: "items",
    errors: function(response) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("errors as function", response.errors[0])
      return response.errors;
    }
  }

위 이미지와 같이 사용해 볼 수 있습니다.

schema.type

type을 통해 서버로부터 받는 데이터의 형식을 지정할 수 있습니다. 

지원하는 데이터의 종류로는 xml, json 이 있습니다.

디폴트 값이 존재하는데, 디폴트 값은 JSON입니다.

html 

            <select id="ISVALID" onchange="onChangeISVALID()">
                <option value="VALID">유효함</option>
                <option value="NOTVALID">유효하지않음</option>
            </select>

JavaScript

        function onChangeISVALID() {
            var select_ISVALID = document.getElementById("ISVALID");
            var selectValue = select_ISVALID.options[select_ISVALID.selectedIndex].value;
            console.log('selectValue: ' + selectValue);
        }

경험한 오류

1. 처음에selectedIndex를 selectindex라고 처서 오류가 발생했었다.

2. select tag에서 onchange 부분에 onclick 이벤트를 등록할 때 () 를 빼먹어서 오류가 발생했었다.

해당되는 리스트의 속성 list-style: none으로 설정한다.

list-style: none