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

Multi Select Header 변경 및 기본 선택 방법 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS Multi Select Header 변경 및 기본 선택 방법 문의

페이지 정보

작성자 토끼바람 작성일 2021-07-20 14:33 조회 4,613회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : MultiSelect 컨트롤 (react)

본문

1. Multi Select 에서 선택 후 보여지는 문자 형식을 변경하고 싶습니다.

현재 찾아보니 " 10 건" 이런식으로 나오는것이 아니라.

첫번째 선택한 값의 displaymemberpath + 외 4 건 -->"display 외 4건"

이런식으로 표현할 수있는 방법이 있나요?


2.기본적으로 조회 한 내용 중 특정 값 (10건 중 3건)을 로드 할때 부터 선택 되어있는 상태로 만들수는 없는지요?



3.combo에서 기본값 설정을 어떻게 해야 될까요?

init에서 axios를 통해 데이터를 조회 한 후에 특정한 값으로 기본값을 설정하고 싶은데 어떻게 해야 될런지요?


기본 샘플에 설정 부분을 확인할 수가 없어서 문의드립니다.


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

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: Multi Select Header 변경 및 기본 선택 방법 문의

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

페이지 정보

작성자 GCK루시 작성일 2021-07-21 14:53 댓글 0건

본문

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


문의 주신 내용에 답변 드립니다.


1. Multi Select 에서 선택 후 보여지는 문자 형식을 변경하고 싶습니다.

=> MultiSelect 컨트롤에서 항목을 선택 후, 보여지는 문자 형식의 경우, 헤더 내용을 작성하는데 사용되는 문자열 형식을 설정하거나 가져오는 headerFormat 속성을 사용하시면 됩니다. 다만, MultiSelect 컨트롤의 checkedItems의 첫번째 값은 변동이 될 수 있기 때문에 checkedItemsChanged 이벤트 에서 코드를 구현하였으며 아래 코드 스니펫을 참고하시기 바랍니다.


<wjInput.MultiSelect
(...)
  checkedItemsChanged={this.onCheckedItemsChanged}
></wjInput.MultiSelect>

(...)

onCheckedItemsChanged(sender) {
   (..)
    sender.headerFormat = sender.checkedItems[0].country + " 외 {count} 건";
  }

[headerFormat]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.multiselect.html#headerformat 


2.기본적으로 조회 한 내용 중 특정 값 (10건 중 3건)을 로드 할때 부터 선택 되어있는 상태로 만들수는 없는지요?

=>  헤당 기능의 경우, MultiSelect 컨트롤이 항목 선택 여부를 확인하기 위해 checkedMemberPath 설정이 필요하며 별도 checkedMemberPath 값이 없는 경우, checked 속성을 추가하고 조건에 따른 참,거짓 값을 할당 한 뒤, 해당 data 값을 바인딩하시면 됩니다. 

아래 샘플에서는 getInfo() 사용자 정의 함수에서 id 값이 3보다 작은 경우, checked 속성을 true로 설정해 초기에 값이 체크되도록 구현했습니다.





3.combo에서 기본값 설정을 어떻게 해야 될까요?

init에서 axios를 통해 데이터를 조회 한 후에 특정한 값으로 기본값을 설정하고 싶은데 어떻게 해야 될런지요?

=> Combobox 컨트롤의 initialized 이벤트에서 가져온 값을 할당한 후, 드랍다운 목록에서 현재 선택한 항목의 인덱스를 가져오거나 설정하는 selectedIndex 속성을 이용하여 초기 기본 값을 정하실 수 있습니다.  아래 코드를 참고하시기 바랍니다.

  async _initCombo(sender) {
    var temp = [];
    await axios
      .get(url)
      .then((res) => {
        var temp = res.data;
        (..)
        this.setState({ data: temp });
        sender.itemsSource = this.state.data;
        //sender.itemsSource = temp;
        sender.selectedIndex = 5;
      });

(..)
 } 

[selectedIndex]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.combobox.html#selectedindex 


도움말 문서도 같이 전달 드리오니 확인 부탁 드립니다.


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


감사합니다. 

그레이프시티 드림 


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


댓글목록

등록된 댓글이 없습니다.

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