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

FlexGrid Checkbox&Pagination > Q&A | 토론

본문 바로가기

VueJS FlexGrid Checkbox&Pagination

페이지 정보

작성자 볶음이 작성일 2021-06-15 14:40 조회 5,016회 댓글 0건
제품 버전 : 5.20211.781

본문

안녕하세요. wijmo를 사용하여 개발하는 중입니다.

문제의 상황은 아래와 같습니다.


FlexGrid의 Selection 체크박스와 페이징을 함께 사용하면 체크박스에 체크하고 다음 페이지로 넘어갈 경우 

초기화가 되어 이전 페이지로 다시 돌아가면 체크했던 Row가 체크 해제 된 상태가 됩니다.

(체크박스 참고 : https://demo.grapecity.co.kr/wijmo/learn-wijmo/Grid/Selection/CheckboxSelection/vue)


그래서 이를 해결하기 위해 데이터에 checked:false를 추가하여 체크박스를 만들었지만 컬럼 헤더에 전체체크하는 부분이 없어 cell-template를 이용하여 컬럼 헤더에 전체 체크하는 부분을 만들었더니 

컬럼 헤더의 전체 체크를 잘못 클릭하면 정렬이 되어 문제가 됩니다.


질문은 

1. Selection 체크박스와 페이징을 함께 사용할수 있는 방안이 있을까요?

2. 없다면, 컬럼 별 정렬을 사용할지, 사용하지 않을지 설정할 방안과 

컬럼 별 엑셀 스타일의 필터링을 사용할지, 사용하지 않을지 설정할 방안이 있을까요?

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

댓글목록

등록된 댓글이 없습니다.

2 답변

VueJS Re: FlexGrid Checkbox&Pagination

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

페이지 정보

작성자 GCK루시 작성일 2021-06-18 18:09 댓글 0건

본문

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


현재 문의 주신 사항은 본사 개발팀과 함께 확인 중에 있으며 업데이트 되는 건이 있는 대로 안내 드리도록 하겠습니다. 답변이 늦어지는 점 죄송합니다.


감사합니다.


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


감사합니다. 

그레이프시티 드림 


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

댓글목록

등록된 댓글이 없습니다.

VueJS Re: FlexGrid Checkbox&Pagination

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

페이지 정보

작성자 GCK루시 작성일 2021-06-21 10:19 댓글 0건

본문

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



1. Selection 체크박스와 페이징을 함께 사용할수 있는 방안이 있을까요? 

=> dataItem(행 선택 여부를 확인)을 사용하여 해당 기능을 수행할 수 있습니다. 행이 selector를 통해 선택할 때마다 FlexGrid 행의 isSelected 속성이 true로 전환되고  이를 dataItem에서  isSelected 속성을 설정해야 합니다. collectionView의 pageChanging 이벤트에서 dataItem을 설정할 수 있으며 selector 상태를 복원하기 위해서 collectionView의 pageChanged 이벤트를 사용하면 됩니다. 자세한 코드는 아래 샘플을 참고하시기 바랍니다.






2. 없다면, 컬럼 별 정렬을 사용할지, 사용하지 않을지 설정할 방안과 

컬럼 별 엑셀 스타일의 필터링을 사용할지, 사용하지 않을지 설정할 방안이 있을까요?

=> 추가적으로 해당 문의에 답변 드립니다. 해당 기능은 열의 정렬 허용 유무를 결정하는 allowSorting을  통해 구현하실 수 있습니다. 아래는 product 열의 정렬을 방지하는 코드입니다.

 

\<wj-flex-grid-column header="Product" binding="product" width="2*" :allowSorting=false></wj-flex-grid-column>커


컬럼 별 엑셀 스타일 필터링 적용 유무는 FlexGridFilter 클래스에서 필터를 가질 열의 바인딩 또는 이름 값을 포함한 filterColumns 속성을 사용하시면 됩니다. 아래는 id 열에 대해서만 필터를 적용하는 코드입니다.

  <wj-flex-grid-filter :initialized="initialized"></wj-flex-grid-filter>
(...)

initialized: function(filter) {
            this.filter = filter;
            this.filter.filterColumns= ["id"]
 }

[pageChanged]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html#pagechanged 


[pageChanging]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html#pagechanging 


[allowSorting]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.column.html#allowsorting 


[filterColumns]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#filtercolumns 


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


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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(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.