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

FlexGrid itemFormatter를 이용한 Cell 색상 변경 문의 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론

기타 FlexGrid itemFormatter를 이용한 Cell 색상 변경 문의

페이지 정보

작성자 Axxxx
프로필 보기 쪽지 보내기
작성일 2023-05-31 14:24 조회 644회 댓글 1건
제품 버전 : 5.20193.646
컨트롤 이름 : itemFormatter

본문

현재, itemFormatter를 이용하여 Cell 색상을 변경하고 있습니다.


그런데 사용하다 보니 Scroll X축(좌우방향)이 생성되었을 경우, 스크롤을 좌우로 움직이면 지정하지 않은 다른 Cell의 색상이 변경되고 있습니다.


- 변경하고자 하는 셀

ea9b4c41591d5616b92efb461262bd42_1685510530_9798.png
 

- 스크롤을 하게 되면 바뀌는 현상

ea9b4c41591d5616b92efb461262bd42_1685510551_3292.png
 

스크롤이 좀 더 길어질수록 같은 row에 여러 cell의 색상이 변경됩니다.

해결할 수 있는 방법이 있을까요?


https://stackblitz.com/edit/angular-xumy63?file=src%2Fapp%2Fapp.component.ts 


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

댓글목록

GCK루시님의 댓글

GCK루시
프로필 보기 쪽지 보내기
작성일

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

문의하신 내용의 경우, 현재 본사 개발팀과 함께 추가적으로 확인 중에 있습니다. 
관련하여 업데이트가 되는대로 안내드리도록 하겠습니다.
답변이 지연되어 죄송합니다.

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

1 답변

기타 Re: FlexGrid itemFormatter를 이용한 Cell 색상 변경 문의

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2023-06-08 15:55 댓글 1건

본문

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


먼저 답변이 지연된 점 죄송합니다.


문의하신 내용의 경우, 버그가 아닌 FlexGrid의 '재활용 셀'이라는 특징으로 인해 나타나는 현상입니다. 셀의 재활용은 그리드의 셀 요소가 한 번만 생성되고 그리드의 업데이트는 셀 요소 내부에서 변경되는 것을 의미합니다. 예를 들어, 그리드를 스크롤하면 셀 내부의 데이터가 업데이트되지만 셀 요소는 동일한 상태로 유지됩니다. 


따라서 해당 문제를 해결하기 위해 색을 reset하거나 


  if (panel.columns[colIndex].binding === "price") {
        color = "red";
      } else {
        color = null;
   }


값에 따라 toggleClass 메서드를 이용하여 CSS 클래스를 전환하여 스타일을 설정하시면 됩니다.


wjcCore.toggleClass(cell,"custom-class", panel.columns[colIndex].binding === "price");


자세한 코드는 아래 샘플에서 확인하시기 바랍니다.




- toggleClass API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면 문의 주시기 바랍니다. 


감사합니다.

그레이프시티 드림

댓글목록

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

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