TREE GRID 오류

트리 그리드에 사용되는 데이터의 순서만 다르고 내용은 서로 똑같은 2개의 데이터 셋인데 하나는 트리 그리드가 정상적으로 출력되는 반면 다른 하나는 오류가 나옵니다.

정상출력 데이터셋

[{"categoryId":{"categoryType":"01","categoryCode":"A"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"원자재","upperCategoryCode":null,"terminalYn":"N","orderNo":1,"csrSectorCode":"C02","eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A"},
 {"categoryId":{"categoryType":"01","categoryCode":"A01"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"농산물","upperCategoryCode":"A","terminalYn":"N","orderNo":2,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A01"},
 {"categoryId":{"categoryType":"01","categoryCode":"A0101"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A0101","upperCategoryCode":"A01","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A0101"},
 {"categoryId":{"categoryType":"01","categoryCode":"A02"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A02","upperCategoryCode":"A","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A02"}
]

에러 데이터 셋

[{"categoryId":{"categoryType":"01","categoryCode":"A"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"원자재","upperCategoryCode":null,"terminalYn":"N","orderNo":1,"csrSectorCode":"C02","eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A"},
 {"categoryId":{"categoryType":"01","categoryCode":"A0101"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A0101","upperCategoryCode":"A01","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A0101"},
 {"categoryId":{"categoryType":"01","categoryCode":"A02"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A02","upperCategoryCode":"A","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A02"},
 {"categoryId":{"categoryType":"01","categoryCode":"A01"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"농산물","upperCategoryCode":"A","terminalYn":"N","orderNo":2,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A01"}
]

아래는 트리 그리드 config 입니다.

    var mdGrid = new ax5.ui.grid();
    mdGrid.setConfig({
        target: $('[data-ax5grid="first-grid"]'),
        header : {align:"center"},
        showRowSelector: true,
        columns: [
          {key: "categoryId.categoryType", width: 150, align: 'left',   label: '<spring:message code="fsstcm004.categoryType" />',
              formatter : function() {
                  return '['+this.value+'] ' + this.item.categoryType.codeName;
              }
          },
          {key: "categoryId.categoryCode", width: 150, align: 'left',   label: '<spring:message code="fsstcm004.categoryCode" />' ,
              treeControl: true
          },
          {key: "categoryName",            width: 100, align: 'left',   label: '<spring:message code="fsstcm004.categoryName" />',
              editor: {type: "text"},      
          },
          {key: "terminalYn",              width: 100, align: 'left',   label: '<spring:message code="fsstcm004.terminalYn" />',
              editor: {type: "select", 
                       config: {
                              columnKeys: {
                                  optionValue: "CD", optionText: "NM"
                              },
                              options: [
                                  {CD: 'Y', NM: '<spring:message code="button.yes"/>'},
                                  {CD: 'N', NM: '<spring:message code="button.no"/>'},
                              ]}
              }, 
          },
          {key: "orderNo",                 width: 100, align: 'left',   label: '<spring:message code="fsstcm004.orderNo" />',
              editor: {type: "text"}, 
          },
          {key: "csrSectorCode",           width: 100, align: 'left',   label: '<spring:message code="fsstcm004.csrSectorCode" />',
              editor: {type: "select", 
                       config: {
                             columnKeys: {
                                 optionValue: "CD", optionText: "NM"
                             },
                             options: csrSectors}
              }, 
              formatter : function() {
                  var val = this.value;
                  var item = csrSectors.find(function(item){return item.CD == val});
                  if (item)
                      return item.NM;
                  else
                      return '';
              }
          },
          {key: "eqSectorCode",            width: 100, align: 'left',   label: '<spring:message code="fsstcm004.eqSectorCode" />',
              editor: {type: "select", 
                       config: {
                              columnKeys: {
                                  optionValue: "CD", optionText: "NM"
                              },
                              options: equitySectors}
              }, 
              formatter : function() {
                  var val = this.value;
                  var item = equitySectors.find(function(item){return item.CD == val});
                  if (item)
                      return item.NM;
                  else
                      return '';
              }
          },
          {key: "defaultCsrBucketCode",    width: 100, align: 'left',   label: '<spring:message code="fsstcm004.defaultCsrBucketCode" />',
              editor: {type: "select", 
                       config: {
                             columnKeys: {
                                 optionValue: "CD", optionText: "NM"
                             },
                             options: defaultBuckets}
              }, 
              formatter : function() {
                  var val = this.value;
                  var item = defaultBuckets.find(function(item){return item.CD == val});
                  if (item)
                      return item.NM;
                  else
                      return '';
              }
          },
          {key: "modifyUserId",            width: 120, align: 'center', label: '<spring:message code="fs.grid.modifyUserId" />'},
          {key: "modifyTime",              width: 150, align: 'center', label: '<spring:message code="fs.grid.modifyTime" />' ,
            formatter : function() {
                if (this.value) {
                    var d = new Date(this.value);
                    return d.format('yyyy-mm-dd HH:MM:ss');
                } else
                    return "";
            }
          }
        ],
        tree: {
            use: true,
            indentWidth: 10,
            arrowWidth: 15,
            iconWidth: 18,
            icons: {
                openedArrow: '<i class="fa fa-minus" aria-hidden="true"></i>',
                collapsedArrow: '<i class="fa fa-plus" aria-hidden="true"></i>',
                groupIcon: '',
                collapsedGroupIcon: '',
                itemIcon: ''
            },
            columnKeys: {
                parentKey: "upperCategoryCode",
                selfKey: "categoryCode"
            }
        },
        body: {
            onDataChanged: function () {
                if (this.key == 'csrSectorCode') {
                    this.self.updateChildRows(
                            this.dindex, 
                            {csrSectorCode: this.item.csrSectorCode},
                            {filter: function(){
                                return this.item.csrSectorCode == undefined;
                            }});
                }
                else if (this.key == 'eqSectorCode') {
                    this.self.updateChildRows(
                            this.dindex, 
                            {eqSectorCode: this.item.eqSectorCode},
                            {filter: function(){
                                return this.item.eqSectorCode == undefined;
                            }});
                }
                else if (this.key == 'defaultCsrBucketCode') {
                    this.self.updateChildRows(
                            this.dindex, 
                            {defaultCsrBucketCode: this.item.defaultCsrBucketCode},
                            {filter: function(){
                                return this.item.defaultCsrBucketCode == undefined;
                            }});
                }
                else if(this.key == '__selected__'){
                    this.self.updateChildRows(this.dindex, {__selected__: this.item.__selected__});
                }
            }
        },
    });

정상 출력화면

개발자도구 오류 로그 캡처
image

혹시 데이터 순서를 지켜야 하는 건지 아니면 버그인지 알고 싶습니다.