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

row merge > Q&A | 토론

본문 바로가기

ReactJS row merge

페이지 정보

작성자 jaylee 작성일 2024-04-19 16:44 조회 157회 댓글 0건
제품 버전 : 5.20241.9
컨트롤 이름 : wijmo

본문

안녕하세요.

그리드 row merge관련하여 문의드립니다.


아래 그림과같이 


1. MergeManager 첫번째 두번째 줄의 Serl Cell 머지가 필요합니다.

ex) 아래 그림의 1번 2번 row의 첫번째 Cell인 Serl 머지하여 체크박스가 하나로 변경되어야함

예제소스가 있으면 가이드 부탁드립니다.


2. 아래 그림에 3번(빨간색박스)과 같이 홀수인 경우 cell 머지를 하였습니다.

 이 경우 해당 Cell에 데이터 설정방법에 대한 예제소스도 가이드 부탁드립니다.



 


MergeManager 예제소스

class CustomMergeManager extends MergeManager {
getMergedRange = (panel: GridPanel, row: number, col: number, clip = true): any => {
const test = 0

const rng = new CellRange(row, col)
if (panel.cellType === CellType.Cell) {
// 짝수인경우
if (rng.row % 2 === 0) {
for (let i = rng.col; i < panel.columns.length - 1; i++) {
if ([0, 1, 2, 3].includes(i)) {
return rng
}
if (i < 13 && i > 3) {
rng.col2 = 12
rng.col = 4
return rng
}
}
}

return rng
}

if (panel.cellType === CellType.ColumnHeader) {
const rng = new CellRange(row, col)
// expand left/right
for (let 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 (let 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
}

// expand up/down
for (let i = rng.row; i < panel.rows.length - 1; i++) {
if (
panel.getCellData(i, rng.col, true) !== panel.getCellData(i + 1, rng.col, true)
) {
break
}

rng.row2 = i + 1
}

for (let i = rng.row; i > 0; i--) {
if (
panel.getCellData(i, rng.col, true) !== panel.getCellData(i - 1, rng.col, true)
) {
break
}

rng.row = i - 1
}

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

댓글목록

등록된 댓글이 없습니다.

3 답변

ReactJS Re: row merge

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-04-22 13:48 댓글 0건

본문

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


문의하신 내용에 대한 확인 요청 및 답변드립니다.


1번 데이터 병합 문의

=> 공유해주신 이미지의 1, 2 영역(검정 박스 영역 즉 Serl 열)에서 병합 처리를 원하는 셀 데이터가 각기 다른 것을 확인할 수 있습니다. 일반적으로 데이터가 동일한 값을 가질 때 병합 처리가 되며 별도로 동일 데이터로 설정하시지 않으면 병합 처리가 되지 않습니다.


따라서 셀이 병합될 수 있도록 별도 데이터 변경을 원하시는 것인지 더불어 어떤 데이터 기준으로 병합 처리를 원하시는 것인지 등에 대한 디테일한 단계를 공유해주신다면 저희 쪽에서 확인 후 안내 드리겠습니다.


2번 병합된 셀의 데이터 입력

=> 병합된 셀에 데이터를 설정하기 위해서는 setCellData 메서드를 통해 구현할 수 있습니다. 


자세한 코드는 아래의 데모 샘플을 확인하여 주시기 바랍니다.

- 사용자 정의 병합 (React)


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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: row merge

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

페이지 정보

작성자 jaylee 작성일 2024-04-22 15:01 댓글 0건

본문

안녕하세요.

질문에 대한 답변드립니다.


1번 데이터 병합 문의

1개의 ROW 데이터를 

아래 그림과 같이 한줄에 뿌리지만 

특정 셀은 검정색 네모박스 처럼 아래 위로 셀 나누기를 해야하는 상황입니다.

특정 컬럼들을 병합하는 느낌보다는 특정 컬럼 셀 나누기를 하는 느낌과 비슷합니다. 


ex) 첫번째 데이터 row -> {A,B,C,D,E,F,G,H,I,J,K,L,N,M,O}


이와 같이 셀을 그리기 위한 가이드가 필요합니다. e69929e745a333735c3acd9f31fbd4eb_1713765284_1225.png

감사합니다. 



2번 병합된 셀의 데이터 입력


답변 감사드립니다.

혹시 setCellData 함수 외 아래 소스와 같이 binding으로 병합된 셀에 대해 표현할수있는 방법이 있을까요?


const getEpiGridHeaders = () => [
{
binding: 'serialnoSeqno',
header: printGridColumnLabel('SERL'),
align: 'center',
width: 100,
isReadOnly: false
},
{
binding: 'partTypecd',
header: printGridColumnLabel('CMPT'),
align: 'center',
width: 80,
isReadOnly: false
},
{
binding: '',
header: printGridColumnLabel('Description'),
align: 'center',
allowMerging: true,
columns: [
{
binding: 'constraintName2',
header: 'Detail',
align: 'center',
width: 200,
isReadOnly: false
},
{
binding: 'planFoundingUseforQueryContent1',
header: 'Title',
align: 'center',
width: 80,
isReadOnly: false
}
]
},
{
binding: '',
header: printGridColumnLabel('Condition'),
align: 'center',
columns: [
{
binding: 'applyStartDate',
header: 'Date-Start',
align: 'center',
width: 160,
allowMerging: true,
isReadOnly: false
},
{
binding: 'applyEndDate',
header: 'Date-End',
align: 'center',
width: 160,
isReadOnly: false
},
{
binding: 'applyStartSeqno',
header: 'SERL-Start',
align: 'center',
width: 160,
isReadOnly: false
},
{
binding: 'applyEndSeqno',
header: 'SERL-End',
align: 'center',
width: 160,
isReadOnly: false
},
{
binding: 'constraintName2',
header: 'EPI-Val',
align: 'center',
width: 100,
isReadOnly: false
},
{
binding: 'constraintName2',
header: 'EPI-Val',
align: 'center',
width: 100,
isReadOnly: false
},
{
binding: 'constraintName2',
header: 'EPI-Val',
align: 'center',
width: 100,
isReadOnly: false
},
{
binding: 'constraintName2',
header: 'EPI-Val',
align: 'center',
width: 100,
isReadOnly: false
},
{
binding: 'constraintName2',
header: 'EPI-Val',
align: 'center',
width: 100,
isReadOnly: false
}
]
},
{
binding: '',
header: printGridColumnLabel('Title'),
align: 'center',
width: 156,
isReadOnly: false
}
]

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: row merge

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-04-23 09:44 댓글 0건

본문

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


문의하신 내용에 대해 답변 및 확인 요청 드립니다.


1번 데이터 병합 문의

=> 문의하신 내용의 경우, 기존의 Serl 열에 대한 병합 처리가 아닌 별도로 셀 나누기가 가능한 지에 대한 문의로 파악됩니다. 


기본적으로 Wijmo 그리드에선 셀 나누기 기능을 지원하지 않고 있으며 공유해주신 이미지와 같이 그리드 셀을 설정하고 싶은 경우, 셀 병합 기능을 적용하시면 됩니다.

각 행에 맞는 데이터를 아래 코드와 같이 바인딩해주시면 원하시는 기능을 구현할 수 있습니다.

let data = [
      {
        id: 0,
        country: 'US',
        downloads: 10,
        sales: 10,
        expenses: 10,
      },
      {
        id: 0,
        country: 'US',
        downloads: 200,
        sales: 300,
        expenses: 400,
      },
    ];


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



2번 병합된 셀에 대한 표현 방법

=> 공유해주신 코드의 경우, 일반 셀이 아닌 ColumnHeader의 처리를 요하시는 것으로 파악됩니다. 다만 어떠한 형태로 표현하고 싶으신지는 공유가 되지 않아 답변이 어렵습니다.

관련하여 저희 쪽으로 표현하고 싶은 결과 이미지를 공유해주신다면 확인 후 답변드리겠습니다.


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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

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