! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

사용자 정의 병합 함수 무한 호출 문제 > Q&A | 토론

본문 바로가기

VueJS 사용자 정의 병합 함수 무한 호출 문제

페이지 정보

작성자 mnmn 작성일 2022-06-28 11:24 조회 1,504회 댓글 0건
제품 버전 : 5.20211.781
컨트롤 이름 : CustomMergeManager

본문

안녕하세요. 저희 코드에서 사용자 정의 병합을 쓰고있는데요, 

CustomMergeManager.prototype.getMergedRange = function(p, r, c, clip)


이쪽 함수 안에 로그를 찍어보면 계속 무한으로 호출되고 있습니다.

그리드의 크기가 변경이 되거나 업데이트 될 때, 새롭게 렌더링을 하는 과정에서 발생된다고 하셨는데요,

움직임이 없어도 계속 호출되고 있습니다.


지난번 주신 샘플 코드 안에서도 로그를 찍어보니 계속 호출 되더라구요.

https://codesandbox.io/s/wijmo-binkan-rowheader-sel-byeonghab-bangji-tifdpf?from-embed=&file=/src/components/HelloWorld.vue


데모 페이지에서 로그를 찍어보면 무한으로 호출되지는 않고 있습니다.

https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Merging/CustomMerging/purejs


한번 그리드를 띄운 상태로 아무 동작(스크롤바를 내린다던지 하는 동작)이 없어도 무한으로 호출되는게 맞나요?

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

4 답변

VueJS Re: 사용자 정의 병합 함수 무한 호출 문제

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2022-06-28 17:23 댓글 2건

본문

안녕하세요 그레이프시티입니다.


문의 주신 이슈와 관련하여 mergeManager와 함께 formatItem 이벤트를 사용하고 계실까요? 셀을 나타내는 요소가 생성되었을 때 발생하는 formatItem의 경우에도 그리드가 업데이트 되거나 렌더링이 되는 과정에서 이벤트가 발생하게 됩니다. 따라서 사용자 정의한 mergeManager와 formatItem을 동시에 사용하시는 경우, 지속적인 변경 사항이 있다고 FlexGrid에 전달되어 해당 이슈가 나타난 것으로 추측됩니다. 별도 formatItem 이벤트를 같이 사용한 것이 맞으신지 확인 후, formatItem 내에서 설정하신 내용에 대해서 회신 주시면 저희 쪽에서도 추가 방법이 있는지 체크한 후, 안내 드릴 수 있도록 하겠습니다.


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림


댓글목록

mnmn님의 댓글

mnmn 작성일

<wj-flex-grid
        class="grid-box outputs-grid"
        :itemFormatter="itemFormatter"
      >


itemFormatter를 사용하여 이미지를 넣어주고 있습니다.

itemFormatter(panel, r, c, cell) {
      if (panel.cellType == wjGrid.CellType.Cell && c == 1) {
        let value = cell.innerHTML;
        if (value == "releasedactivity") {
          var tmp = this.data[r]["to_date"].split(" ");
          const d1 = new Date(tmp[0]);
          tmp = this.data[r]["finish_date"].split(" ");
          const d2 = new Date(tmp[0]);
          // console.log("release d1: ", d1, "   d2: ", d2);
          if (d1.getTime() < d2.getTime()) {
            // 노랑
            cell.innerHTML = `<div style="text-align : center;"><img src='${dot_blue}' id='img' class="imageAdd" onClick={this.click} /></div>`;
          } else {
            cell.innerHTML = `<div style="text-align : center;"><img src='${dot_gray}' id='img' class="imageAdd" onClick={this.click} /></div>`;
          }
        } else if (value == "workingactivity" || value == "waitingactivity") {
          var tmp2 = this.data[r]["to_date"].split(" ");
          const d1 = new Date(tmp2[0]);
          var d2 = new Date();
          if (this.data[r]["finish_date"] != null) {
            tmp2 = this.data[r]["finish_date"].split(" ");
            d2 = new Date(tmp2[0]);
          }
          // console.log("  d1: ", d1, "   d2: ", d2);
          if (d1.getTime() < d2.getTime()) {
            cell.innerHTML = `<div style="text-align : center;"><img src='${dot_red}' id='img' class="imageAdd" onClick={this.click} /></div>`;
          } else {
            cell.innerHTML = `<div style="text-align : center;"><img src='${dot_green}' id='img' class="imageAdd" onClick={this.click} /></div>`;
          }
        } else {
          cell.innerHTML = "";
        }
      }
    },

mnmn님의 댓글

mnmn 작성일

formatItem도 따로 쓰고 있습니다.

grid.formatItem.addHandler((s, e) => {
          if (e.panel.cellType === wjGrid.CellType.RowHeader) {
            for (let i = 0; i < this.data.length; i++) {
              if (e.row == i) {
                grid.cells.grid.rowHeaders.setCellData(i, maxLv, this.data[i].name);
                grid.cells.grid.rowHeaders.setCellData(i, 0, this.data[i].projectName);
              }
            }
          }
        });

VueJS Re: 사용자 정의 병합 함수 무한 호출 문제

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2022-07-04 10:43 댓글 1건

본문

안녕하세요. 그레이프시티입니다.


먼저 문의 답변이 지연된 점 죄송 드립니다.


공유 주신 내용을 바탕으로 본사 개발팀과 확인을 하였으며 이와 관련하여 안타깝게도 이벤트 트리거가 지속적으로 발생되는 것은 예상된 결과이며 별도로 이벤트를 중지시킬 수 있는 방법이 없다고 합니다.


먼저, rowHeader 콘텐츠를 업데이트하고 있으며 이에 따라 rowHeader 셀 요소가 다시 렌더링되고 있습니다. 여기서 렌더링이 될 때, formatItem/itemFormatter가 트리거되지 않을 경우 업데이트된 콘텐츠가 손실될 수 있습니다. 마찬가지로 그리드 요소의 병합을 수행하는 mergeManger는 최신 레이아웃으로 나타날 수 있도록 재렌더링하고 있습니다. 따라서 적절한 업데이트를 위해 재렌더링이 반복되는 것이며 사용자의 필요에 따라 시나리오를 중단할 방법은 구조 상 지원하고 있지 않다고 합니다. 원하시는 답변을 드리지 못한 점 죄송합니다.


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

mnmn님의 댓글

mnmn 작성일

이벤트가 지속적으로 발생하는 문제 때문에 CPU 점유율이 상당히 높아지고 해당 페이지 성능이 매우 떨어집니다. 일부 기능을 포기하더라도 CPU문제가 안 생기게 하고 싶은데, 다른 방법이 없을까요?

VueJS Re: 사용자 정의 병합 함수 무한 호출 문제

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2022-07-06 16:06 댓글 3건

본문

안녕하세요 그레이프시티입니다.


해당 내용 본사 개발팀과 재확인을 해본 결과 퍼포먼스 문제의 경우, 이벤트 호출 외에 여러 요인이 있을 수 있으며 공유해주신 내용을 바탕으로 확인해보았을 때 안타깝게도 본사 개발팀에서는 퍼포먼스 이슈가 재현이 되지 않고 있다고 합니다.


좀 더 정확한 답변을 위해 아래 기본 샘플을 공유 드리오니 샘플에서 재현 가능한 요소 추가 후, 회신 주시면 재현 및 디버깅 후 안내 드릴 수 있도록 하겠습니다. 더불어 어떤 브라우저를 사용하실 때 해당 이슈가 발생하시는지 공유 부탁드립니다.



추가적으로 퍼포먼스 개선을 원하신다면 먼저 DOM에 표시되는 셀 수를 제한하는 Paging(클릭하시면 데모를 확인하실 수 있습니다.) 을 추가하시거나 그 외의 방법을 설명 드린 블로그 글을 참고 부탁드립니다.


Wijmo FlexGrid 속도 개선 방법


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림


댓글목록

mnmn님의 댓글

mnmn 작성일

안녕하세요. 항상 상세한 답변 감사드립니다:)

브라우저는 크롬을 사용하고 있습니다.
https://codesandbox.io/s/wijmo-merge-formatitem-forked-tsdo4w?file=/src/components/HelloWorld.vue
샘플에 무한 루프 재현 코드를 추가하였습니다.
68번째 줄에 로그 주석을 해제하시면 무한으로 호출 되고 있는 현상을 보실 수 있습니다.

감사합니다!

죠이러버님의 댓글

죠이러버 작성일


안녕하세요 
전화상으로 말씀드린 방식으로 기존의 Merge 코드랑 formatItem 코드를 모두 주석처리하고

마지막에 하나만 남겨둔 코드샌드박스 링크를 보내드립니다.

https://codesandbox.io/s/wijmo-merge-formatitem-forked-povp4y

위 링크에서 HelloWorld.vue 의 234라인에 console.log 를 찍으면 무한이 로그가 찍힙니다.

확인 부탁드립니다.

GCK루시님의 댓글의 댓글

GCK루시 작성일

@죠이러버님 안녕하세요 그레이프시티입니다.

해당 건은 현재 본사 개발팀이 확인 중에 있으며 업데이트 되는 대로 안내 드릴 수 있도록 하겠습니다.

감사합니다.
그레이프시티 드림

VueJS Re: 사용자 정의 병합 함수 무한 호출 문제

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2022-07-20 15:54 댓글 1건

본문

안녕하세요 그레이프시티입니다.


먼저 문의 답변이 늦어진 점 죄송 드리며 업데이트 된 내용 안내 드립니다.


유선으로 안내 드린 것과 같이 공유해주신 샘플을 바탕으로 본사 개발팀과 확인해본 결과 formatItem과 mergeManger를 동시 사용하여 발생한 것이 아닌 formatItem 이벤트 내 refresh 이벤트를 발생 시키는 setCellData() 메서드가 원인이었습니다. 해당 메서드가 호출되고 새로고침이 수행될 때마다 customMergeManger가 다시 실행되고 그 다음 formatItem 이벤트가 발생하면서 결과적으로 무한 호출이 나타나게 됩니다. 


해당 문제를 해결하기 위해서 콘텐츠를 셀에 설정한 후 그리드가 새로 고침이 되지 않도록 setCellData()의 5번째 매개 변수를 false로 설정해주시면 됩니다.


또한 FlexGrid에 여러 formatItem 핸들러가 연결되어 있는데 성능 향상을 위해 formatItem 핸들러를 하나로 통합하여 사용하여 주시기 바랍니다.


아래 본사에서 전달해준 샘플과 기존에 저희 쪽으로 전달해주셨던 샘플 2가지를 아래 공유 드리오니 참고 부탁 드립니다.


- 본사 공유 샘플 



- 기존 공유 샘플




- setCellData


더불어 프리미엄 전환 이벤트와 관련하여 확인해본 결과 현재 계획 된 이벤트는 없으나 프리미엄 회원 전환 시 아래와 같은 혜택을 받아보실 수 있으니 참고 부탁 드립니다.

1. 포럼 기술 지원 시 우선 지원

2. 제품 정보 관리

3. 이벤트 시 우대 혜택 

프리미엄 회원 전환 방법 공지사항 글을 공유 드리오니 참고 부탁 드리며 앞으로도 더 다양한 이벤트로 혜택을 드릴 수 있도록 노력하겠습니다.

- 프리미엄 회원 전환 방법 및 혜택 안내


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

mnmn님의 댓글

mnmn 작성일

감사합니다. 위의 답변 참고하여 프로그램 개선에 많은 도움이 되었습니다:)

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.