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

MultiAutoComplete 항목 자동 추가 기능 > Q&A | 토론

본문 바로가기

Angular MultiAutoComplete 항목 자동 추가 기능

페이지 정보

작성자 111234 작성일 2023-07-05 11:06 조회 368회 댓글 0건
제품 버전 : 5.20222.877
컨트롤 이름 : MultiAutoComplete

본문

안녕하세요

MultiAutoComplete 기능 테스트 중

ComboBox의 항목 자동 추가 기능을 적용하고자 테스트를 진행하였는데,

생각했던것처럼 되지 않아 문의 드립니다.


1. 초기 MultiAutoComplete의 itemsSource에는 데이터가 없는 상태입니다.

2. 사용자가 MultiAutoComplete에 텍스트를 입력하고 엔터키를 누를 경우 아래 이미지와 같이 표시되었으면 합니다. (추가되는 데이터는 중복되지 않았으면 합니다.)


3. 즉, MultiAutoComplete의 itemsSource와 selectedItems는 항상 같습니다.


엔터키 이벤트를 사용하고자 keyup 이벤트를 사용하여 itemsSource와 selectedItems에 push하도록 구현해보았으나 데이터가 중복으로 들어가기도하면서 원하는 로직으로 구현이 되지 않습니다.


위 내용과 관련하여 구현 가능한 샘플 요청드립니다.

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

댓글목록

등록된 댓글이 없습니다.

4 답변

Angular Re: MultiAutoComplete 항목 자동 추가 기능

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

페이지 정보

작성자 GCK루시 작성일 2023-07-10 11:23 댓글 0건

본문

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


먼저 답변이 지연되어 죄송합니다.


해당 기능을 구현하기 위해서는 MultiAutoComplete의 _keydown 메서드를 재정의해주시면 됩니다. 


이벤트 내에서 컨트롤의 데이터를 관리하는 기능을 가진 CollectionView 클래스의 addNew 메서드를 호출하여 컬렉션에 아이템 추가해줍니다. 그 다음 selectecItems에 중복된 값이 없다면 selectedItems에도 항목 push 및 새 항목이 커밋될 수 있도록 CollectionView의 commitNew 메서드를 호출해주시면 됩니다.


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


 


- addNew API 문서

- commitNew API 문서


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


감사합니다.

그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

Angular Re: MultiAutoComplete 항목 자동 추가 기능

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

페이지 정보

작성자 111234 작성일 2023-07-11 10:47 댓글 1건

본문

첨부파일

우선 답변 감사합니다.


제공해주신 샘플코드로 테스트 해보려 하였으나

동일한 소스코드인데도 .ts 파일에서 오류가 발생하고있습니다.

총 3가지 오류인데  이유를 알 수 없어 다시 문의 드립니다.


1. 'IArguments' 형식의 인수는 '[e: KeyboardEvent]' 형식의 매개 변수에 할당될 수 없습니다.

2. 'ICollectionView<any>' 형식에 'addNew' 속성이 없습니다.

3. 'ICollectionView<any>' 형식에 'commitNew' 속성이 없습니다.


위 3가지 오류이며 작성한 소스는 사정상 사진 파일로 첨부드립니다.


그리고 하나 더 문의 드리겠습니다.

MultiAutoComplete 상에서 backspace나 x버튼 클릭 시 selectedItems에서 항목이 제거되는데 collectionview? 상에는 남아있는 것으로 보입니다.

collectionview에서도 제거되게 하려면 어떤 이벤트를 사용해야할까요?

댓글목록

GCK루시님의 댓글

GCK루시 작성일

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

현재 문의하신 오류 및 기능과 관련하여 추가적인 확인이 필요하여 본사 개발팀과 지속적으로 체크 중에 있습니다. 다만 말씀하신 오류가 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 
저희 쪽으로 오류 재현 가능한 샘플을 공유해주신다면 재현 및 디버깅 답변 드릴 수 있도록 하겠습니다.
답변이 지연되는 점 죄송합니다.

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

Angular Re: MultiAutoComplete 항목 자동 추가 기능

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

페이지 정보

작성자 111234 작성일 2023-07-24 15:01 댓글 0건

본문

첨부파일


유선상으로 요청하신 package.json 이미지 첨부드립니다.


댓글목록

등록된 댓글이 없습니다.

Angular Re: MultiAutoComplete 항목 자동 추가 기능

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

페이지 정보

작성자 GCK루시 작성일 2023-07-26 15:15 댓글 0건

본문

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


문의하신 내용에 대해 답변드립니다.


1. TypeScript 오류 발생

=> 먼저 CollectionView에서 속성이 없다고 나오는 경우, 아래 코드와 같이 collectionView를 별도 할당 후 사용해보시기 바랍니다.

let cv: any = this.collectionView;
var newItem = cv.addNew();
.
..
cv.commitNew();

매개 변수 전달 관련 오류의 경우, 아래 코드와 같이 변경해보시기 바랍니다.

_oldFn.apply(this, e);


2. MultiAutoComplete의 selectedItems 항목 제거시, collectionView의 항목도 동시에 제거하는 방법 

=> MultiAutoComplete의 hostElement에 click 또는 keydown 이벤트 추가한 뒤 삭제된 항목의 텍스트를 체크하여 CollectionView에서 해당 항목을 제거해보시기 바랍니다.


자세한 코드는 아래 샘플에서 확인하실 수 있습니다.



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


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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