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

위즈모 그리드 질문 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 위즈모 그리드 질문

페이지 정보

작성자 아린c 작성일 2024-02-21 16:44 조회 108회 댓글 1건
제품 버전 : 5.20231.904
컨트롤 이름 : 그리드

본문

이전 질문 가이드 받은 CustomMergeManager 적용 시 기존 병합되어있는 헤더가 풀림

예시 1번, 2번 모두 columnGroups 용 / mergeManager 적용 여부만 다름


1. mergeManager 적용 후에도 그룹헤더는 병합 유지된 상태 구현 방법 문의드립니다



화면예시1) grid.mergeManager 적용 전

external_image


화면예시2) grid.mergeManager 적용 후

external_image








그리드에서 특정 셀을 클릭해 편집모드로 들어가는 경우

textarea 팝업이 뜨면서 내용 편집이 가능하도록 기능 구현 필요


2. 기능 예시와 동일하게 구현 가능한 방법 문의드립니다


기능 예시) ag-grid의 Large Text Cell Editor (https://www.ag-grid.com/javascript-data-grid/provided-cell-editors-large-text)

화면 예시1) 그리드 셀 편집 비활성화 상태 ( textarea 팝업 미노출 )

external_image


화면 예시2) 그리드 셀 편집 활성화 상태 textarea 팝업 노출 )

external_image




3. 위즈모의 input.Popup를 활용해서 구현한 경우 MUI Dialog와 함께 사용했을때 화면 밖으로 짤리면서 스크롤 안생김

- input.Popup 사용하지 않고 1번문의에 적힌 기능이 그리드에서 구현가능한지 확인 부탁드립니다

external_image

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

댓글목록

MESCIUS루시님의 댓글

MESCIUS루시 작성일

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

현재 공유해주신 이미지 파일이 깨져 확인이 어렵습니다. 관련하여 정확한 답변을 위해 이미지 파일 재공유 요청드립니다.

감사합니다.
메시어스 드림

1 답변

ReactJS Re: 위즈모 그리드 질문

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-02-23 15:17 댓글 0건

본문

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


현재 이미지가 확인이 되지 않아 정확한 내용 파악이 어려우나 1,2번의 내용은 유추가 가능하여 안내드립니다.


1. mergeManger 적용 시, 기존 columnheader 병합이 풀리는 현상 문의

=> mergeManger가 적용 시 기존 설정되어 있는 병합이 풀릴 수 있으며 이를 위해 해당 병합 영역까지 범위 및 규칙을 설정해주셔야 합니다.


만일 아래 이미지와 같이 수평 병합이 처리되지 않는다면 기존 공유 드렸던 병합 처리 코드에서 수평 병합 처리를 하는 규칙을 추가하지 않았기 때문입니다.


cb6a34bb7c1256117d94fb4eee2fb864_1708668613_1227.png
 

이를 위해 기존에 안내드렸던 mergeManger 코드에 아래 샘플 코드를 추가로 입력해보시기 바랍니다.

class CustomMergeManager extends wjGrid.MergeManager {
  getMergedRange(panel, r, c, clip = true) {
    //
    // create basic cell range
    var rng = new wjGrid.CellRange(r, c);
   if ( panel.cellType === wjGrid.CellType.ColumnHeader || panel.cellType === wjGrid.CellType.TopLeft) {
///// 추가할 코드 시작 
     // expand left/right
        for (var i = rng.col; i < panel.columns.length - 1; i++) {
            if (panel.getCellData(rng.row, i, true) != panel.getCellData(rng.row, i + 1, true))
                break;
            rng.col2 = i + 1;
        }
        for (var i = rng.col; i > 0; i--) {
            if (panel.getCellData(rng.row, i, true) != panel.getCellData(rng.row, i - 1, true))
                break;
            rng.col = i - 1;
        }
///// 추가할 코드 끝


2. 셀 클릭 시 textarea 팝업을 통해 셀 내용 편집 문의

=> 해당 기능을 구현하기 위해서는 팝업 설정과 함께 그리드 셀에 click 이벤트를 추가해줍니다. 그 다음 hitTest를 통해 클릭한 셀의 정보를 가져온 뒤, CollectionView의 editItem, commitEdit을 통해 편집 처리해주시면 됩니다.


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



3번 문의는 앞서 말씀드린 것과 같이 내용 파악이 어려워 이미지 재업로드 및 디테일한 내용 공유를 해주신다면 확인 후 안내드리겠습니다.


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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