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

콤보박스 데이터 그리드 형태로 보여주려면... > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론

VueJS 콤보박스 데이터 그리드 형태로 보여주려면...

페이지 정보

작성자 정현재
프로필 보기 쪽지 보내기
작성일 2022-06-03 10:39 조회 1,678회 댓글 0건
제품 버전 : 5.20213.824
컨트롤 이름 : wj-auto-complete

본문

첨부파일

안녕하세요.

콤보박스 데이터를 그리드 형태로 보여주고 싶은데 예제를 보아도 잘 모르겠어서 질문 남깁니다.


wj-auto-complete 데이터를 그리드 형태로 헤더와 데이터를 표시해서 선택하게 하고 싶습니다.

사이트에 있는 예제에서는 wj-item-template 을 사용하여,

header 를 제외한 row 별로 데이터를 css 로 구분하여 보여주고 있는 듯 합니다.

header를 포함한 그리드 형태로 콤보박스 데이터를 보여주려면 어떻게 해야할까요?


#콤보박스 #그리드
  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: 콤보박스 데이터 그리드 형태로 보여주려면...

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2022-06-07 15:39 댓글 2건

본문

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


문의 주신 헤더를 가진 다중 열 콤보박스를 생성하는 방법에 대해 안내 드립니다. 

먼저 wj-item-template에 단순하게 테이블 header 요소를 추가하는 경우에 각 항목마다 헤더가 별도로 생성되는 문제점이 있습니다. 


이를 해결 할 방법으로 콤보박스 데이터에 헤더가 될 item 항목을 맨 앞에 추가해주고 데이터 바인딩을 해줍니다. 그 다음 drop-down 리스트의 항목이 생성될 때 발생하는 formatItem 이벤트 내에서 해당 항목이 헤더인지 유무에 따라 template을 다르게 적용해주시면 됩니다.


아래 샘플을 공유 드리오니 참고 부탁 드립니다.



- formatItem : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.combobox.html#formatitem


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


감사합니다. 

그레이프시티 드림 

댓글목록

정현재님의 댓글

정현재
프로필 보기 쪽지 보내기
작성일

알려주신 방법을 해보았더니 row 별로 table 이 생성되는 것 같아서 css 적용하기가 어렵습니다.
row 데이터를 하나의 table 태그에 들어가게 할 방법은 없을까요? 

GCK루시님의 댓글의 댓글

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

@정현재님 안녕하세요 그레이프시티입니다.

해당 문의의 경우, 저희 쪽에서 확인 중에 있으며 업데이트 되는 대로 안내 드릴 수 있도록 하겠습니다.

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

VueJS Re: 콤보박스 데이터 그리드 형태로 보여주려면...

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2022-06-21 17:30 댓글 2건

본문

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


먼저 답변이 지연된 점 죄송드리며 문의 주신 내용에 답변 드립니다.

본사 개발팀에 추가로 확인해 본 결과 기능을 구현하기 위해서는 데이터를 사용하여 별도 HTML을 만들고 dropdown 요소에 제공하거나 FlexGrid 컨트롤을 dropdown에 데이터로 표시 할 수 있습니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.




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


감사합니다. 

그레이프시티 드림 


댓글목록

정현재님의 댓글

정현재
프로필 보기 쪽지 보내기
작성일

안녕하세요 답변 감사합니다.
적용해 본 결과 궁금한 점이 있습니다.


그리드로 데이터를 적용 후, 콤보 에서 text 로 입력시 검색되는 기능은 사용 불가능 한 걸까요?
wj-combo-box 가 아닌 wj-auto-complete 콤보를 사용할 경우,
text로 입력은 가능하나 list box 를 display none 상태로 만들어서 그런지 검색은 불가능한 것 같습니다.
가능한 방법이 있는지 확인 부탁드립니다..

GCK루시님의 댓글의 댓글

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

@정현재님 안녕하세요 그레이프시티입니다.

문의 주신 내용은 현재 확인 중에 있으며 업데이트 되는 대로 안내 드릴 수 있도록 하겠습니다.
답변이 지연되는 점 죄송드립니다.

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

VueJS Re: 콤보박스 데이터 그리드 형태로 보여주려면...

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2022-07-25 17:43 댓글 0건

본문

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


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


해당 현상의 경우 FlexGrid의 hostElement(컨트롤을 호스팅하는 DOM 요소를 가져오는 속성)를 AutoComplete 초기화 이벤트에서만 추가한 뒤 AutoComplete 컨트롤의 text 값이 업데이트될 때 FlexGrid의 hostElement가 dropdown에서 제거되고 재렌더링되어 나타난 현상입니다. 이슈 해결 및 기능 구현을 위해 AutoComplete 컨트롤의 listBox 속성에서 리스트 항목이 생성된 후 발생하는 loadedItems 이벤트를 사용하여 이벤트 내에서 FlexGrid의 hostElement가 다시 추가될 수 있도록 설정하시길 바랍니다.


자세한 코드는 아래 샘플을 참고하여 주시기 바랍니다.



- hostElement

- loadedItems


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


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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

카테고리

인기글

더보기

최신글

더보기

셀럽

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