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

grid에서 editor로 구현한 multiselect > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론

ReactJS grid에서 editor로 구현한 multiselect

페이지 정보

작성자 그리드맨
프로필 보기 쪽지 보내기
작성일 2024-06-11 15:34 조회 37회 댓글 0건
제품 버전 : 최신버전
컨트롤 이름 : grid

본문

안녕하세요


https://dev.mescius.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=2760 


이 질문의 연장선인데요.


아래 그림처럼

f7fefd23965efe18429fb29d438bd291_1718087281_8451.PNG
 

showFilterInput: true,옵션을 넣어서 파란색영역에 입력하여

multiselect 안에 있는 값들을 필터링하는 방법 말고


빨간색 영역의 grid에서 입력하여 엔터 시

showFilterInput옵션이 false라도  필터링된 아이템들이 보이게 할 순 없나요?


입력값 까진 받아올수 있는데 showFilterInput을 false로 해놓은 상태에서

필터할 값을 넣어주는 메소드를 못찾겠습니다.

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

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: grid 안에 multiselect 의 필터(검색)

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

페이지 정보

작성자 MESCIUS엘라
프로필 보기 쪽지 보내기
작성일 2024-06-13 09:44 댓글 1건

본문

안녕하세요 메시어스입니다.


MultiSelect 컨트롤과 함께 그리드 셀의 input을 이용하여 필터링을 적용하는 경우, showFilterInput 속성을 사용해 필터를 커스텀하여 구현할 수 있습니다.


showFilterInput 속성을 사용한 필터 커스터마이징은 아래와 같은 단계로 처리합니다.


1. input 요소를 생성하고 MultiSelect 컨트롤이 적용된 셀에 해당 요소를 추가합니다.

2. input에서 검색어가 입력되면 showFilterInput 속성에도 동일하게 해당 검색어가 입력되도록 설정합니다.

3. MultiSelect의 dropdown 변경을 감지하는 isDroppedDownChanged 이벤트를 사용하여 input 요소의 표시 여부를 설정합니다.

4.  input 요소에 검색어 입력 후 cell 편집이 종료될 때 발생하는 cellEditEnded 이벤트를 사용하여 enter key를 눌러 입력이 종료되면, 해당 input 요소의 value 값을 초기화합니다.

5. showFilterInput 속성은 CSS 스타일을 적용하여 화면에서 보이지 않도록 숨김 처리합니다.


샘플에서 위와 같이 설정한 다음 MultiSelect가 적용된 셀에서 검색어를 입력하고 enter key를 누르면, input 요소에 입력된 키워드로 필터링 처리가 되는 것을 확인할 수 있습니다.


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



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


감사합니다.

메시어스 드림


댓글목록

그리드맨님의 댓글

그리드맨
프로필 보기 쪽지 보내기
작성일

답변감사합니다!

제가 하려던 기능과는 순서가 좀 다른데요
위에 샘플은  multiselect dropdown을 열은 후에 입력을 하는것이고

제가 하려는것은
grid에 입력(multiselect dropdown이 닫힌상태) 한 값을 엔터 시, 
multiselect dropdown이 열리면서 엔터 누른 값으로 필터링 된 아이템들이 보이는 기능을 구현하려고 한것입니다.... 

이것도 가능한건가요?  설명해주신
2. input에서 검색어가 입력되면 showFilterInput 속성에도 동일하게 해당 검색어가 입력되도록 설정합니다.
이 기능을 드롭다운이 안펼쳐진상태에서 행해야 하는데 어려움이있습니다.

ReactJS Re: grid 안에 multiselect 의 필터(검색)

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

페이지 정보

작성자 MESCIUS엘라
프로필 보기 쪽지 보내기
작성일 2024-06-14 13:06 댓글 1건

본문

안녕하세요 메시어스입니다.


MultiSelect 컨트롤이 dropdown 되지 않은 상태에서 검색어 입력 후 필터링을 적용하는 경우, 편집 모드를 종료시키는 finishEditing 메서드를 사용하여 구현할 수 있습니다.


input에서 검색어를 입력하여 MultiSelect 컨트롤이 dropdown 된 다음 enter key를 누르면 dropdown이 닫히게 됩니다. dropdown이 닫혔을 때 그리드에 finishEditing 메서드를 적용하면 input 입력을 종료시키고 필터링을 적용할 수 있습니다.


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



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


감사합니다.

메시어스 드림


댓글목록

그리드맨님의 댓글

그리드맨
프로필 보기 쪽지 보내기
작성일

https://i.namu.wiki/i/OLdBSSBJMNH21szPTUEYFkEZ1lpF3mdwJ_IDE0K_uLrc3efa2Y3t2qgBrPheVf73yf0qektP47iaXEvGOF0bTw.webp

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

카테고리

인기글

더보기

최신글

더보기

셀럽

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