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

treeview 및 selector 질문 > Q&A | 토론

본문 바로가기

ReactJS treeview 및 selector 질문

페이지 정보

작성자 포플러나무 작성일 2021-08-24 22:26 조회 3,264회 댓글 0건
제품 버전 : 알수없음

본문

1. treeview selectedItems 질문

- treeview를 구성하고 난 다음 , 노드를 선택한 상태에서 다시 itemsoruce를 재로딩했을때 이전에 선택한 노드를 자동적으로 선택하게 만들고 싶습니다. treeview의 selectedItem 속성을 사용해서 만들 수 있나요? 

1.1 treeview가 level이 하나인 일차적인 노드일때

1.2 treeview가 level이 여러개인 노드를 가질때

두가지 경우가 궁금합니다. 


2. selector을 사용해서 데이터를 추가하는 grid를 만들고 있는데 데이터를 추가할때 selector가 빈체크가 아니라 체크된 상태로 add하고 싶습니다. 


3. listbox를 사용해서 데이터를 구성하는데 onselectedChanged를 써서 그런지 첫번째 리스트에 있는 데이터가 바로 선택됩니다. treeview처럼 itemclicked를 사용해서 선택할 수 있게 하거나 리스트가 바로 선택되지 않는 방법은 없을까요?  

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

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: treeview 및 selector 질문

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

페이지 정보

작성자 GCK루시 작성일 2021-08-26 16:05 댓글 0건

본문

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


현재 문의가 급증하여 순차적으로 답변을 드리고 있습니다. 

업데이트가 되는 대로 안내 드리도록 하겠습니다.

답변이 지연되는 점 죄송합니다. 


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


감사합니다. 

그레이프시티 드림 


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

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: treeview 및 selector 질문

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

페이지 정보

작성자 GCK루시 작성일 2021-08-27 14:52 댓글 0건

본문

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



문의에 대한 답변을 드립니다.

1. treeview selectedItems 질문

=> 초기 상태 설정과 관련하여 트리 항목이 생성된 후, 발생하는 loadedItems 이벤트 내에서 TreeView의 selectedItem 속성에 값을 설정해주시면 됩니다. 사용자 정의 findItem 함수의 경우,  header를 통해 값을 선택하고 반환하기 때문에 1차 노드 혹은 다중 노드 인 경우에도 동일한 방식으로 적용하실 수 있습니다. 노드 선택과 관련된 내용은 노드 표시 및 선택 데모에서 초기 상태 설정과 관련 내용은 초기 상태 데모에서 확인하실 수 있습니다.

<wjNav.TreeView (...) itemsSource={this.state}  childItemsPath="items" initialized={this.initialized.bind(this)} loadedItems={this.theTreeSelectedLoadedItems.bind(this)}></wjNav.TreeView>
(...)
initialized(sender) {
    this._control = sender;
}

theTreeSelectedLoadedItems(s, e) {
    s.selectedItem = this.findItem(s.itemsSource, "Motorola");
}

findItem(items, str) {  
        for (var i = 0; items && i < items.length; i++) {
            if (items[i].header.indexOf(str) !== -1) {
                return items[i];
            }
            var result = this.findItem(items[i].items, str);
            if (result) {
                return result;
            }
        }
        return null;
}

노드 표시 및 선택 데모 : https://demo.grapecity.co.kr/wijmo/learn-wijmo/Nav/TreeView/Nodes/ShowingandSelectingNodes/purejs

초기 상태 데모https://demo.grapecity.co.kr/wijmo/learn-wijmo/Nav/TreeView/DataBinding/InitialState/purejs

loadedItems https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_nav.treeview.html#loadeditems

selectedItemshttps://demo.grapecity.co.kr/wijmo/api/classes/wijmo_nav.treeview.html#selecteditem


2. selector을 사용해서 데이터를 추가하는 grid를 만들고 있는데 데이터를 추가할때 selector가 빈체크가 아니라 체크된 상태로 add하고 싶습니다.

=> 해당 기능을 구현하기 위해서는 FlexGrid의  신규 행 템플릿을 편집함으로 새로운 항목을 유저가 생성할 때 발생하는 rowAdded 이벤트를 사용해서 신규 행의 isSelected 상태를 true로 설정시길 바랍니다.

 

rowAdded(s, e) {
    s.rows[e.row].isSelected = true;
}
render() {
    return (
     <div className="container-fluid">
         <FlexGrid allowAddNew={true}(...)
          rowAdded={this.rowAdded.bind(this)}
        >
         (...)
      </FlexGrid>


행 추가 및 제거https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Rows/AddingRemoving/purejs

rowAddedhttps://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#rowadded


3. listbox에서 treeview처럼 itemclicked를 사용해서 선택할 수 있게 하거나 리스트가 바로 선택되지 않는 방법은 없을까요?  

=> ListBox 컨트롤에서 현재 선택한 항목의 인덱스를 가져오거나 설정하는 selectedIndex를 -1로 설정해보시길 바랍니다.

theListBox.selectedIndex = -1;


seelctedIndex : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.listbox.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.