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

3개의 상태를 가지는 체크박스 구현 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론

VueJS 3개의 상태를 가지는 체크박스 구현

페이지 정보

작성자 죠이러버
프로필 보기 쪽지 보내기
작성일 2021-11-15 11:10 조회 4,004회 댓글 2건
제품 버전 : 5.20211.781
컨트롤 이름 : Grid 사용자정의셀

본문

체크박스를 항목을 가지는 Grid 를 구현중인데요.


아래는 기존에 FlexGrid C# 제품에서 구현되어 있는 화면입니다.


bffb1b356a1033fb454597e83f3af10f_1636942325_5986.png
 


위와 같이 체크박스가 3개의 상태를 갖도록 wijmo 로 구현하고 싶습니다.

v 체크된 상태와, x 체크된 상태, 체크가 안되어 있는 상태 이렇게 3가지 상태를 가지는 체크박스를 구현하고 싶은데

어떻게 구현하면 좋을지 문의드립니다. 

꼭 3상 체크박스가 아니더라도 3개의 상태를 표현하고 설정할 수 있는 더 좋은 입력 UI가 있다면 알려주시면 도움이 될것 같습니다. 콤보박스도 생각해보았으나 클릭하고 선택하는 방식이 구현하고자 하는 기능에 좀 안맞는거 같아서 일단 다른 방법이 없다면 최후의 수단으로는 생각하고 있습니다.


혹시 답변에 샘플을 주신다면 위 그림처럼 이중 헤더 형태로 주시면 저희입장에서는 1타 쌍피 많은 도움이 될것 같습니다. 


답변 부탁드립니다.

감사합니다.


#사용자정의셀 #체크박스 #Tri-state
  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

죠이러버님의 댓글

죠이러버
프로필 보기 쪽지 보내기
작성일

이중헤더보다 왼쪽을 헤더처럼 표시하는 부분이 가능한지 궁금합니다.

죠이러버님의 댓글

죠이러버
프로필 보기 쪽지 보내기
작성일

기존 c# 소스를 보니 이미지 3개를 설정하고 값에따라 보여주는 방식인 것 같습니다. 그런 기능이 wijmo 에 있나요? 이미지 셀을 쓰면 되나요?

3 답변

VueJS Re: 3개의 상태를 가지는 체크박스 구현

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2021-11-17 15:08 댓글 0건

본문

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


먼저, 문의 주신 내용에 답변이 늦어진 점 죄송합니다.


1. 3개의 상태를 가지는 체크박스 구현

=> checkbox를 3가지 상태로 표시하고 싶으신 경우, 이미지 삽입보다는 formatItem 이벤트 핸들러와 클릭 이벤트에서 input의 value를 이용하시기 바랍니다. 해당 이벤트 내에서 기본 checkbox input의 value의 유니코드를 value 값에 따라 변경하여 3가지 상태를 나타나는 UI를 설정하실 수 있습니다. 자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.


2. rowHeader에 텍스트 추가 

=> rowHeader에 텍스트를 추가하기 위해서는 formatItem에서 해당 영역이 rowHeader인지 판별한 다음, 셀의 textContent에 값을 부여하시면 됩니다. 해당 코드 또한 샘플에서 확인 가능하십니다.


 


 

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


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

VueJS Re: 3개의 상태를 가지는 체크박스 구현

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

페이지 정보

작성자 죠이러버
프로필 보기 쪽지 보내기
작성일 2021-11-19 11:32 댓글 0건

본문

첨부파일

안녕하세요 답변 감사드립니다.


보내주신 방법으로 했을 때 초기 데이터가 없을때는 괜찮은데, 그리드에 데이터를 넣고 시작하면 클릭 이벤트가 한두번 안먹고 모양도 좀 안좋은데요. 혹시 svg 이미지를 넣는 방식으로 할 수 있을까요?


데모사이트에 나와있는 이미지 버튼을 사용하는 방법을 적용해보려 해도 잘 안되네요.


저희가 사용하려는 이미지 첨부해 드립니다.

꼭 좀 답변 부탁드립니다.

감사합니다.

댓글목록

등록된 댓글이 없습니다.

VueJS Re: 3개의 상태를 가지는 체크박스 구현

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2021-11-23 11:40 댓글 0건

본문

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


cellMaker.makeImage 메서드를 이용하여 svg 파일을 추가할 때 makeImage 메서드의 click 이벤트 내에서 조건을 통해 row의 dataItem 중 변경하고 싶은 항목의 값을 변경해 주시면 됩니다. 변경 후, 그리드에 적용하기 위해서 refresh() 메서드를 사용해 주시기 바랍니다. 자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.


 


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


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다

댓글목록

등록된 댓글이 없습니다.

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

카테고리

인기글

더보기

최신글

더보기

셀럽

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