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

Multi > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론 - PureJS

PureJS Multi

페이지 정보

작성자 김로치
프로필 보기 쪽지 보내기
작성일 2022-10-07 11:26 조회 1,490회 댓글 2건
제품 버전 : 5.20211.794
컨트롤 이름 : MultiRow

본문

MultiRow Grid 에서 allowMerging 속성을 true 로 줬는데도 아래 캡처 처럼 머징이 되지 않습니다.


이름이 같은 Header 는 자동으로 머지되는 속성으로 알고있는데 다 따로따로 표시되고 있습니다.


방법이 있을까요 ?




 

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

댓글목록

GCK다이애나님의 댓글

GCK다이애나
프로필 보기 쪽지 보내기
작성일

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

문의 주신 내용에 대해 현재 확인 중에 있으며 확인되는 대로 답변 드리도록 하겠습니다.
답변이 지연되어 죄송합니다.

감사합니다.
그레이프시티드림

GCK루시님의 댓글

GCK루시
프로필 보기 쪽지 보내기
작성일

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

문의하신 내용과 관련하여 추가 회신이 없어 완료 처리하도록 하겠습니다.
다른 궁금하신 점이 있다면, Q&A 게시판에 새 글을 등록 및 문의 주시기 바랍니다.

감사합니다.
그레이프시티 드림

9 답변

PureJS Re: Multi

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

페이지 정보

작성자 톡톡
프로필 보기 쪽지 보내기
작성일 2022-10-12 17:50 댓글 1건

본문

첨부파일

저희가 사용하는버전하고 다르시겠지만

MultiGrid는 일반 그리드처럼 설정 하시면 안됩니다.

아래처럼 작성하시고 테스트 해 보시고 분석 해 보시면 됩니다.

나머지는 일반 그리드라 같다고 보시면 됩니다.




//layout 작성

let layout = new wijmo.collections.CollectionView([

        {

            def: [

                {

                    header: '보험료', colspan: 4, align: 'center', cells: [

                        { binding: 'sequence', header: '건강', dataType: 'String', width: 75, isReadOnly: true },

                        { binding: 'name', header: '고용', dataType: 'String', width: 70, isReadOnly: true, cssClass: 'txt' },

                        { binding: 'hiredday', header: '보장성', dataType: 'Date', format: 'yyyy-MM-dd', isReadOnly: true },

                        { binding: 'position', header: '장애인', dataType: 'String', isReadOnly: true }

                    ]

                },

                {

                    header: '의료비', colspan: 5, align: 'center', cells: [

                        { binding: 'salary', header: '일반', dataType: 'Number', format: 'n0', width: 88, isReadOnly: false },

                        { binding: 'bonus', header: '난임', dataType: 'Number', format: 'n0', width: 88, isReadOnly: false },

                        { binding: 'allowance', header: '미숙아', dataType: 'Number', format: 'n0', width: 88, isReadOnly: false },

                        { binding: 'monthly', header: '65세이상', dataType: 'Number', format: 'n0', width: 88, isReadOnly: false },

                        { binding: 'meals', header: '실손', dataType: 'Number', format: 'n0', width: 88, isReadOnly: false }

                    ]

                }

            ]

        }

    ]);


//그리드 설정

let grid = new wijmo.grid.multirow.MultiRow("#theGrid", {

        layoutDefinition: layout.currentItem.def, // <== 요기

        collapsedHeaders: null  //<== 요기

    });

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

답변 감사드립니다 위의 소스는 헤더 한줄을 layoutDefinition 의 header 이름으로 한줄 추가하는것 같습니다.
제가 원했던것은  header: '보험료', colspan: 4, align: 'center', cells: [ 부분에서 colspan 을 2로 줄였을때   건강 고용 / 보장성 장애인 으로 나오는 2줄 중 위의 건강 고용 2개의 컬럼을 Merge 하고싶었습니다.

PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-10-13 11:58 댓글 1건

본문

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


먼저 답변이 지연되어 죄송합니다.

문의 주신 내용에 대해 추가적으로 답변 드립니다.

FlexGrid 컨트롤의 MergeManager 클래스를 확장하여 정의한 클래스를 MultiRow 컨트롤의 mergeManager 속성에 할당하여 데이터가 동일한 셀을 병합할 수 있습니다. 

이와 관련된 데모 및 API 문서를 전달해 드리오니 참고해 보시기 바랍니다.

- 사용자 정의 병합 데모

- mergeManager API 문서


자세한 코드는 아래의 샘플에서 확인해 보시기 바랍니다.


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


감사합니다.


그레이프시티 드림

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

확인 감사드립니다!
올려주신 코드 확인중 궁금한점 있어 다시 질문 드립니다.
현재 올려주신 소스에서는 FlexGrid 의 allowMerging 속성에 All 을 준것처럼
row data 영역도 같은값이면 머징이 됩니다.
allowMerging 의  ColumnHeaders 처럼 헤더부분만 머지도 가능한지 확인 부탁드립니다.

PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-10-20 13:39 댓글 4건

본문

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


문의 주신 MultiRow 컨트롤의 mergeManager 속성을 이용하여 열 헤더만 병합하는 방법에 대해 답변 드립니다.

조건문을 이용해 GridPanel 컨트롤의 cellType 속성이 'ColumnHeader' 인 경우 데이터가 동일한 셀을 병합하는 코드를 구현하여 FlexGrid 컨트롤의 열 헤더만 병합할 수 있습니다.

아래의 샘플을 참고해 보시기 바랍니다.


- cellType API 문서

- CellType Enumeration ColumnHeader API 문서


API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

확인 감사드립니다!
올려주신 코드 확인중 궁금한점 있어 한번만 더 질문 드립니다.
아래 캡쳐 처럼 0, 1, 2, 3 번째 컬럼은 rowSpan 이 되어있었는데 MergeManager 의 영향을 받아 rowSapn 이 풀립니다.





하여 Cell 일 경우에 0, 1 , 2 ,3 번째는 위아래로 병합 될수있게 아래 캡쳐 처럼 변경 하였습니다.



위 처럼 한다면 .. 값이 같다면 병합이 되는데 동일값과 무관하게 무조건 3 Row 씩 끊어서 병합하려고 합니다 ..

for (var i = rng.row; i < panel.rows.length - 1; i++) {
      if(rng.row % 3 == 0 || rng.row % 3 == 1){
            rng.row2 = i + 1;
       }
}


이렇게 해봤는데 잘 안되네요 도움 부탁드립니다.

GCK다이애나님의 댓글

GCK다이애나
프로필 보기 쪽지 보내기
작성일

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

동일값과 무관하게 무조건 3Row 씩 끊어서 병합하는 방법에 대한 말씀은, 셀의 값과는 상관 없이 특정 열에 존재하는 셀들을 상하로 3개씩 병합하는 방법에 대한 것으로 이해하면 될까요?
정확한 답변을 드리기 위해 요청 드리며 확인 후, 회신하여 주시기 바랍니다.

감사합니다.
그레이프시티 드림

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

네 본래의 의도는 원래 MultiRow 의 RowSpan 처럼 사용하려고 합니다.

MergeManager 의 영향으로 RowSpan과 무관하게 값이 같으면 병합이 이루어지니

행추가시 값이 "" 이거나 null 인 새행은 자연스럽게 병합이 됩니다.

MergeManager 를 사용하면서 RowSpan 도 사용할수 있게 되면 될것같습니다!

GCK다이애나님의 댓글

GCK다이애나
프로필 보기 쪽지 보내기
작성일

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

문의 주신 내용에 대해 현재 확인 중에 있으며, 확인되는 대로 답변 드리로록 하겠습니다.
답변이 지연되어 죄송합니다.

감사합니다.
그레이프시티 드림.

PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-10-28 15:45 댓글 1건

본문

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


먼저 답변이 지연되어 죄송합니다.

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

아래의 코드와 같이 특정 열에 존재하는 셀의 dataItem 속성 값을 상하로 비교하여 동일하면 병합하는 코드를 MultiRow 컨트롤의 mergeManager 속성에 작성해 보시기 바랍니다.

샘플의 36~53라인에서 확인해 보실 수 있습니다.

if (rng.col == 2) {
  for (var i = r; i < panel.rows.length - 1; i++) {
    if (panel.rows[i].dataItem == panel.rows[i + 1].dataItem) {
      rng.row2 = i + 1;
    } else {
      break;
    }
  }
  for (var i = r; i > 0; i--) {
    if (panel.rows[i].dataItem == panel.rows[i - 1].dataItem) {
      rng.row = i - 1;
    } else {
      break;
    }
  }
}


자세한 코드는 아래의 샘플에서 확인해 보시기 바랍니다.


- dataItem API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

안녕하세요 답변 주셔서 감사합니다.
해당 코드 추가 후 rowspan 기능 구현 되는점 확인하였습니다 감사합니다.

추가적으로 colspan 의 경우엔 어떤식으로 코딩 해야하는지 문의 드리고자 합니다 도움 부탁드립니다.


PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-11-09 11:02 댓글 3건

본문

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


문의 주신 MultiRow 컨트롤의 mergeManager 속성을 이용하여 행의 셀을 병합하는 방법에 대해 답변 드립니다.

아래의 코드와 같이 GridPanel 컨트롤의 cellType 속성이 'Cell' 인 경우 데이터가 동일한 셀을 좌우로 병합하는 코드를 구현하여 병합할 수 있습니다.

샘플의 35~47번 라인에서 아래의 코드를 확인해 보실 수 있습니다.

// 그리드 패널의 cellType이 Cell일 때 
if(panel.cellType==1){
  // 왼쪽/오른쪽으로 확장
  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;
  }
}

자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.


- cellType API 문서

- CellType Enumeration Cell API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

삭제된 댓글

김로치
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

삭제된 댓글

김로치
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

답변 감사합니다.
이번 질문도 rowSpan 때와 비슷하게 말씀주신 코드로 작성시 값이 같으면 무조건 병합하게 됩니다.
원하는 방향은 이전 질문처럼 2, 3, 4번 열만 row 병합하듯이
3, 4번 열의 첫번쨰 행만 col 병합 되게 하고 싶습니다.



PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-11-09 16:41 댓글 3건

본문

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


문의 주신 MultiRow 컨트롤의 mergeManager 속성을 이용하여 특정 행과 열에 속하는 셀을 병합하는 방법에 대해 답변 드립니다.

CellRange 컨트롤을 이용하여 불러온 셀 범위 값과 조건문을 이용하여 특정 열과 행에 속하는 셀을 병합하는 코드를 구현해 병합할 수 있습니다.

이때 데이터가 동일한 셀을 병합하고 싶으신 경우, getCellData 메서드를 이용하여 특정 열과 행에 속하는 셀들의 데이터가 동일한지 확인 후 동일하다면 셀들을 병합하는 코드를 작성하시면 됩니다.

만약 셀의 값에 상관 없이 셀을 병합하고 싶으신 경우, 특정 열과 행에 속하는 셀들의 binding 속성 값을 비교하여 동일하면 병합하는 코드를 작성해 병합할 수 있습니다.

자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.

샘플에서는 셀의 데이터 동일 여부와는 상관 없이 특정 위치에 존재하는 셀을 병합하는 코드를 구현하였습니다.


- CellRange API 문서

- getCellData API 문서

- columns API 문서

- binding API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

안녕하세요 올려주신 코드로 가로로 병합 하였습니다 근데 모양이 조금 이상합니다



allowAddNew 속성을 true 로 사용중이여서 데이터가 없는 Row 에 한줄이 추가된것처럼 보이는데

데이터가 있는 로우는 잘 병합 되었지만 캡쳐에 보여드린것처럼 allowAddNew 되어있는 Row 는 보더가 안잡힙니다 .

원인이 무엇일까요 ㅜㅜ..

GCK다이애나님의 댓글

GCK다이애나
프로필 보기 쪽지 보내기
작성일

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

문의 주신 내용과 관련하여 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 
따라서 저희 쪽으로 재현 가능한 샘플 혹은 allowAddNew 속성 값이 true 인 MultiRow 컨트롤을 mergeManager 속성을 이용하여 병합하는 과정에 대한 디테일한 단계 및 코드를 회신해주시기 바랍니다. 
공유해주신 내용을 바탕으로 재현 및 디버깅 후, 안내 드리도록 하겠습니다.

감사합니다.

그레이프시티 드림

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

안녕하세요 해당 과정 절차순으로 회신 드립니다.
1. initialize

sheetGrid2 = new wijmo.grid.multirow.MultiRow('#sheetGrid2Div', {
    autoGenerateColumns: false
    ,imeEnabled: true
    ,headersVisibility: 'Column'
    ,keyActionTab: 'Cycle'
    ,allowMerging: 'All'
    ,allowAddNew: true
    //,collapsedHeaders: null
    ,columns: [
        { binding: 'SEL_CHECK', dataType: 'Boolean', header: '', width: '2*', minWidth: 35, align: "left", isRequired: false}
        ,{ binding: 'R_NUMBER', header: 'No', width: '2*', minWidth: 35, align: "center", isReadOnly: true }
        ,{ binding: 'FAM_JOIN', header: '연말정산<br>관계', width: '8*', minWidth: 70, dataMap: gridMap4, align: "left", isRequired: true}
        ,{ binding: 'FAM_NAME', header: '성명', width: '12*', minWidth: 30, align: "left", isRequired: false}
        ,{ binding: 'FAM_AGE', dataType: 'Number', header: '나이', width: '5*', minWidth: 10,mask:"000", align: "center", isRequired: false}
        ,{ binding: 'GIBON_CHK', header: '기본공제', width: '5*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
        ,{ binding: 'WOMAN_CHK', header: '부녀자', width: '5*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
        ,{ binding: 'AGED_CHK', header: '경로<br>우대<br>(70세)', width: '5*', minWidth: 35, dataMap: gridMap5, align: "left", isRequired: false}
        ,{ binding: 'SUPP_CHK', header: '자녀', width: '5*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
        //두번째줄
        ,{ binding: 'NATION_GUBUN', header: '내/<br>외국인', width: '8*', minWidth: 40, dataMap: gridMap3, align: "left", isRequired: false}
        ,{ binding: 'REG_NUM_TYPE', header: '주민(외국인)<br>등록번호', width: '4*', minWidth: 40, dataMap: new wijmo.grid.DataMap(gridMap11, 'id', 'name'), align: "left", isRequired: false}
        ,{ binding: 'JUMIN_NO', header: '주민(외국인)<br>등록번호', width: '8*', minWidth: 60, mask: "000000-0000000", align: "center", isRequired: false
            , editor: new wijmo.input.InputMask(document.createElement("div"), { isRequired: false, value: null, mask: '000000-0000000'})
        }
        ,{ binding: 'INCOME_STD_EX', header: '소득<br>기준<br>초과', width: '5*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
        ,{ binding: 'HOUSE_HOLD_YN', header: '세대주', width: '5*', minWidth: 45, dataMap: gridMap9, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'SINGLE_CHK', header: '한부모', width: '5*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
        ,{ binding: 'DEFORM_GRADE', header: '장애인', width: '5*', minWidth: 70, dataMap: gridMap6, align: "left", isRequired: false}
        ,{ binding: 'CHILD_NO', header: '당해<br>출산<br>입양', width: '5*', minWidth: 55, dataMap: gridMap7, align: "left", isRequired: false}
        ,{ binding: 'N_GUBUN', header: '구분', width: '4*', minWidth: 8, align: "center", isReadOnly: true }
        ,{ binding: 'N_HINSUR_AMT', header: '보험료', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_HIRE_AMT', header: '보험료', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_INSUR_AMT', header: '보험료', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_DINSUR_AMT', header: '보험료', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CM_MED_AMT', header: '의료비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_IFT_MED_AMT', header: '의료비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_ICB_MED_AMT', header: '의료비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_AGE_MED_AMT', header: '의료비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_MED_EXP_AMT', header: '의료비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_EDU_TYPE', header: '교육비', width: '4*', minWidth: 45, dataMap: gridMap12, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CM_EDU_AMT', header: '교육비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_DEFORM_EDU_AMT', header: '교육비', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CARD_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CHECK_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CASH_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CULT_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_F_TP_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_S_TP_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_PRE_TOT_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_PRE_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CUR_TOT_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_CUR_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'N_GIFT_AMT', header: '기부금', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        //두번째줄
        ,{ binding: 'E_GUBUN', header: '구분', width: '4*', minWidth: 8, align: "center", isReadOnly: true }
        ,{ binding: 'E_HINSUR_AMT', header: '건강', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_HIRE_AMT', header: '고용', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_INSUR_AMT', header: '보장성', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_DINSUR_AMT', header: '장애인<br>전용', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CM_MED_AMT', header: '일반', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_IFT_MED_AMT', header: '난임', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_ICB_MED_AMT', header: '미숙아<br>선천성<br>이상아', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_AGE_MED_AMT', header: '65세이상<br>장애인<br>건보산정', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_MED_EXP_AMT', header: '실손', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_EDU_TYPE', header: '구분', width: '4*', minWidth: 45, dataMap: gridMap12, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CM_EDU_AMT', header: '일반', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_DEFORM_EDU_AMT', header: '장애인<br>특수', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CARD_AMT', header: '신용카드', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CHECK_AMT', header: '직불카드등', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CASH_AMT', header: '현금영수증', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CULT_AMT', header: '도서공연등<br>(총급여<br>7천만원이하)', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_TRD_AMT', header: '전통시장', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_F_TP_AMT', header: '대중교통<br>(1월~6월)', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_S_TP_AMT', header: '대중교통<br>(7월~12월)', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_PRE_TOT_AMT', header: '2021년<br>전체', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_PRE_TRD_AMT', header: '2021년<br>전통시장', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CUR_TOT_AMT', header: '2022년<br>전체', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_CUR_TRD_AMT', header: '2022년<br>전통시장', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'E_GIFT_AMT', header: '기부금', width: '4*', minWidth: 45, align: "center", isRequired: false, isReadOnly: true}
        ,{ binding: 'YEAR_YYYY', visible: false, isRequired: true}
        ,{ binding: 'SITE_CODE', visible: false, isRequired: true}
        ,{ binding: 'EMP_CODE', visible: false, isRequired: true}
        ,{ binding: 'FAM_NO', dataType: "String", visible: false}
        ,{ binding: 'JUMIN_EFF', visible: false}
        ,{ binding: 'USE_YN', visible: false}
        ,{ binding: 'CHANGE_YN', visible: false}
        ,{ binding: 'G_STATUS', visible: false}
    ]
    ,layoutDefinition: [
        {
            header: 'FAM', colspan: 10, cells: [
                //첫번째줄
                { binding: 'SEL_CHECK', rowspan: 2, dataType: 'Boolean', header: '', width: '2*', minWidth: 35, align: "left", isRequired: false}
                ,{ binding: 'R_NUMBER', rowspan: 2, header: 'No', width: '2*', minWidth: 35, align: "center", isReadOnly: true }
                ,{ binding: 'FAM_JOIN', header: '연말정산<br>관계', width: '8*', minWidth: 140, dataMap: gridMap4, align: "left", isRequired: true}
                ,{ binding: 'FAM_NAME', colspan:2, header: '성명', width: '12*', minWidth: 210, align: "left", isRequired: false}
                ,{ binding: 'FAM_AGE', dataType: 'Number', header: '나이', width: '4*', minWidth: 70,mask:"000", align: "center", isRequired: false}
                ,{ binding: 'GIBON_CHK', header: '기본공제', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                ,{ binding: 'WOMAN_CHK', header: '부녀자', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                ,{ binding: 'AGED_CHK', header: '경로<br>우대<br>(70세)', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                ,{ binding: 'SUPP_CHK', header: '자녀', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                //두번째줄
                ,{ binding: 'NATION_GUBUN', header: '내/<br>외국인', width: '8*', minWidth: 140, dataMap: gridMap3, align: "center", isRequired: false}
                ,{ binding: 'REG_NUM_TYPE', header: '주민(외국인)<br>등록번호', width: '4*', minWidth: 70, dataMap: new wijmo.grid.DataMap(gridMap11, 'id', 'name'), align: "left", isRequired: false}
                ,{ binding: 'JUMIN_NO', header: '주민(외국인)<br>등록번호', width: '8*', minWidth: 140, mask: "000000-0000000", align: "center", isRequired: false
                    , editor: new wijmo.input.InputMask(document.createElement("div"), { isRequired: false, value: null, mask: '000000-0000000'})
                 }
                ,{ binding: 'INCOME_STD_EX', header: '소득<br>기준<br>초과', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                ,{ binding: 'HOUSE_HOLD_YN', header: '세대주', width: '4*', minWidth: 70, dataMap: gridMap9, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'SINGLE_CHK', header: '한부모', width: '4*', minWidth: 70, dataMap: gridMap5, align: "left", isRequired: false}
                ,{ binding: 'DEFORM_GRADE', header: '장애인', width: '4*', minWidth: 70, dataMap: gridMap6, align: "left", isRequired: false}
                ,{ binding: 'CHILD_NO', header: '당해<br>출산<br>입양', width: '4*', minWidth: 70, dataMap: gridMap7, align: "left", isRequired: false}

            ]
        },
        {
            header: 'FAM_DATA', colspan: 25, cells: [
                //첫번쨰줄
                { binding: 'N_GUBUN', header: '구분', width: '4*', minWidth: 70, align: "center", isReadOnly: true }
                ,{ binding: 'N_HINSUR_AMT', header: '보험료', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_HIRE_AMT', header: '보험료', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_INSUR_AMT', header: '보험료', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_DINSUR_AMT', header: '보험료', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CM_MED_AMT', header: '의료비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_IFT_MED_AMT', header: '의료비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_ICB_MED_AMT', header: '의료비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_AGE_MED_AMT', header: '의료비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_MED_EXP_AMT', header: '의료비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_EDU_TYPE', header: '교육비', width: '4*', minWidth: 70, dataMap: gridMap12, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CM_EDU_AMT', header: '교육비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_DEFORM_EDU_AMT', header: '교육비', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CARD_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CHECK_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CASH_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CULT_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_F_TP_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_S_TP_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_PRE_TOT_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_PRE_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CUR_TOT_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_CUR_TRD_AMT', header: '신용카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'N_GIFT_AMT', header: '기부금', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                //두번째줄
                ,{ binding: 'E_GUBUN', header: '구분', width: '4*', minWidth: 70, align: "center", isReadOnly: true }
                ,{ binding: 'E_HINSUR_AMT', header: '건강', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_HIRE_AMT', header: '고용', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_INSUR_AMT', header: '보장성', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_DINSUR_AMT', header: '장애인<br>전용', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CM_MED_AMT', header: '일반', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_IFT_MED_AMT', header: '난임', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_ICB_MED_AMT', header: '미숙아<br>선천성<br>이상아', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_AGE_MED_AMT', header: '65세이상<br>장애인<br>건보산정', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_MED_EXP_AMT', header: '실손', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_EDU_TYPE', header: '구분', width: '4*', minWidth: 70, dataMap: gridMap12, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CM_EDU_AMT', header: '일반', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_DEFORM_EDU_AMT', header: '장애인<br>특수', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CARD_AMT', header: '신용카드', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CHECK_AMT', header: '직불카드등', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CASH_AMT', header: '현금영수증', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CULT_AMT', header: '도서공연등<br>(총급여<br>7천만원이하)', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_TRD_AMT', header: '전통시장', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_F_TP_AMT', header: '대중교통<br>(1월~6월)', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_S_TP_AMT', header: '대중교통<br>(7월~12월)', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_PRE_TOT_AMT', header: '2021년<br>전체', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_PRE_TRD_AMT', header: '2021년<br>전통시장', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CUR_TOT_AMT', header: '2022년<br>전체', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_CUR_TRD_AMT', header: '2022년<br>전통시장', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
                ,{ binding: 'E_GIFT_AMT', header: '기부금', width: '4*', minWidth: 70, align: "center", isRequired: false, isReadOnly: true}
            ]
        }
    ]
    ,itemsSource: new wijmo.collections.CollectionView([] , {trackChanges: true})
    ,rowAdded: function(s, e) {
        s.rows[e.row].dataItem["SEL_CHECK"] = false;
        s.rows[e.row].dataItem["G_STATUS"] = "Added";
        s.rows[e.row].dataItem["SITE_CODE"] = sheetGrid1.collectionView.currentItem.SITE_CODE;
        s.rows[e.row].dataItem["YEAR_YYYY"] = sheetGrid1.collectionView.currentItem.YEAR_YYYY;
        s.rows[e.row].dataItem["EMP_CODE"] = sheetGrid1.collectionView.currentItem.EMP_CODE;
        if(e.row != 0){
            s.rows[e.row].dataItem["FAM_NAME"] = "";
            s.rows[e.row].dataItem["NATION_GUBUN"] = "1";
            s.rows[e.row].dataItem["REG_NUM_TYPE"] = "1";
            s.rows[e.row].dataItem["JUMIN_EFF"] = "1";
            s.rows[e.row].dataItem["FAM_AGE"] = "0";
            s.rows[e.row].dataItem["JUMIN_NO"] = "";
            s.rows[e.row].dataItem["HOUSE_HOLD_YN"] = "";
            s.rows[e.row].dataItem["INCOME_STD_EX"] = "2";
            s.rows[e.row].dataItem["FAM_JOIN"] = "";
            s.rows[e.row].dataItem["GIBON_CHK"] = "2";
        }
        s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
        s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
        s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
        s.rows[e.row].dataItem["AGED_CHK"] = "2";
        s.rows[e.row].dataItem["CHILD_NO"] = "2";
        s.rows[e.row].dataItem["SUPP_CHK"] = "2";
        s.rows[e.row].dataItem["USE_YN"] = "1";
    }
    ,formatItem: function(s, e) {
        fncGridCommFormatItem(s, e);

        if (e.panel == s.columnHeaders) {
            if (s.getBindingColumn(e.panel, e.row, e.col).binding == 'SEL_CHECK') {
                e.cell.innerHTML = '<input tabindex="-1" type="checkbox" value="false" class="allCheck" '+nowGridHeader.SEL_CHECK+'>';
            }
            e.cell.innerHTML = e.cell.textContent;
        }else if (e.panel == s.cells) {
            if (e.row == 0 && e.col == 0){
                e.cell.innerHTML = "";
            }

            var binding = s.getBindingColumn(e.panel, e.row, e.col).binding;
            var item = s.rows[e.row].dataItem;

            if (item != null) {
                if (binding == "JUMIN_NO") {
                    if (item.JUMIN_EFF == "0") {
                        wijmo.addClass(e.cell, "wj-font-red");
                    } else {
                        wijmo.removeClass(e.cell, "wj-font-red");
                    }
                }
            }
        }
    }
    ,cellEditEnding: function (s, e) {
        fncMultiRowStatusChange(s, e);

        var oldVal = s.rows[e.row].dataItem[s.getBindingColumn(e.panel, e.row, e.col).binding],
            newVal = s.activeEditor.value;

        var col = s.getBindingColumn(e.panel, e.row, e.col);
        var item = s.rows[e.row].dataItem;

        if (col.binding == "JUMIN_NO" && (item.REG_NUM_TYPE == "1" || item.REG_NUM_TYPE == "2") && item.FAM_JOIN != "0") {
            if (oldVal != newVal) {
                //주민번호 유효성 체크
                if (check_juminno(newVal.substring(0,6)+newVal.substring(7))) {
                    s.rows[e.row].dataItem["JUMIN_EFF"] = "1";
                    juminChk = true;
                } else {
                    s.rows[e.row].dataItem["JUMIN_EFF"] = "0";
                    s.select(e.row, "JUMIN_NO");
                    juminChk = false;
                }
                //계산된 나이 셋팅
                s.rows[e.row].dataItem["FAM_AGE"] = commonAgeCalc.getAge(item.YEAR_YYYY, newVal);

                if (s.rows[e.row].dataItem["FAM_AGE"] < 0) {
                    alert("나이가 0보다 작습니다. 주민등록번호를 다시 확인해주세요.");
                    setTimeout(function () {
                        s.select(e.row, "JUMIN_NO");
                    }, 10);
                }

                // console.log("[FAM_AGE]");
                if (item.JUMIN_NO.replaceAll('-','').length == 13 && item.FAM_AGE <= Number("20")) {
                    s.rows[e.row].dataItem["FAM_JOIN"] = "4";
                }
                s.rows[e.row].dataItem["INCOME_STD_EX"] = "2";
                if (item.FAM_JOIN == "0") {
                    s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                } else {
                    s.rows[e.row].dataItem["GIBON_CHK"] = "2";
                }
                s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                s.rows[e.row].dataItem["AGED_CHK"] = "2";
                s.rows[e.row].dataItem["CHILD_NO"] = "2";
                s.rows[e.row].dataItem["SUPP_CHK"] = "2";

            }
        }

        if (oldVal != newVal) {
            if (col.binding == "FAM_JOIN") {
                s.rows[e.row].dataItem["INCOME_STD_EX"] = "2";
                if (item.FAM_JOIN == "0") {
                    s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                } else {
                    s.rows[e.row].dataItem["GIBON_CHK"] = "2";
                }

                s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                s.rows[e.row].dataItem["AGED_CHK"] = "2";
                s.rows[e.row].dataItem["CHILD_NO"] = "2";
                s.rows[e.row].dataItem["SUPP_CHK"] = "2";
            }
        }
    }
    ,cellEditEnded: function (s, e) {
        sheetGrid2.layoutDefinition[0].cells[10].dataMap.collectionView.sourceCollection = gridMap11;

        var col = s.getBindingColumn(e.panel, e.row, e.col);
        var item = s.rows[e.row].dataItem;

        if (item != null) {
            // console.log(item.FAM_AGE);
            if (!fIsNull(item.FAM_AGE)){
                // console.log("1");
                if (col.binding == "JUMIN_NO") {
                    if (item.JUMIN_NO.length == 13 && item.FAM_AGE <= Number("20")) {
                        s.rows[e.row].dataItem["FAM_JOIN"] = "4";
                    }
                }

                //기본공제 '여' 자동세팅
                // console.log("[GIBON_CHK]");
                // console.log(item.FAM_AGE);
                // console.log(item.FAM_JOIN);
                // console.log(col.binding);
                if (col.binding == "JUMIN_NO" || col.binding == "FAM_JOIN") {
                    if (item.FAM_JOIN == "1" || item.FAM_JOIN == "2") {
                        if (item.FAM_AGE >= Number("60")) {
                            s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                            if (item.FAM_AGE >= Number("70")) {
                                s.rows[e.row].dataItem["AGED_CHK"] = "1";
                            }
                        }
                    } else if (item.FAM_JOIN == "4" || item.FAM_JOIN == "5" || item.FAM_JOIN == "8") {
                        if (item.FAM_AGE <= Number("20")) {
                            s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                            if (item.FAM_AGE >= Number("7")) {
                                s.rows[e.row].dataItem["SUPP_CHK"] = "1";
                            }
                            if (item.FAM_JOIN == "4" && item.FAM_AGE == "0") {
                                s.rows[e.row].dataItem["CHILD_NO"] = "3";
                                //첫째 자동세팅 후 중복체크
                                var cnt = 0;
                                for (var i = 0; i < sheetGrid2.collectionView.items.length; i++) {
                                    if (sheetGrid2.collectionView.items[i]["CHILD_NO"] == item.CHILD_NO) {
                                        cnt++;
                                    }
                                }

                                // console.log(cnt);
                                if (cnt > 1) {
                                    alert("첫째가 중복되었습니다.");
                                    s.rows[e.row].dataItem["CHILD_NO"] = "2";
                                }
                            }
                        }
                    } else if (item.FAM_JOIN == "6") {
                        if (item.FAM_AGE >= Number("60") || item.FAM_AGE <= Number("20")) {
                            s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                        }
                    } else if (item.FAM_JOIN == "3" || item.FAM_JOIN == "7") {
                        s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                    }
                }
            }

            if (col.binding == "INCOME_STD_EX") {
                if (item.INCOME_STD_EX == "1") {
                    s.rows[e.row].dataItem["GIBON_CHK"] = "2";
                    s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
                    s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
                    s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                    s.rows[e.row].dataItem["AGED_CHK"] = "2";
                    s.rows[e.row].dataItem["SUPP_CHK"] = "2";
                    s.rows[e.row].dataItem["CHILD_NO"] = "2";
                }
            }

            if (col.binding == "GIBON_CHK" && item.FAM_JOIN != "0") {
                if (item.GIBON_CHK == "1") {
                    if (!check_gibon(item.FAM_JOIN, item.FAM_AGE)) {
                        jConfirm2("해당 부양가족은 기본공제 대상 나이요건을 충족하지 않습니다.<br>해당 부양가족이 장애인 공제 대상입니까?", "", function (cfrm) {
                            if (cfrm) {
                                s.rows[e.row].dataItem["GIBON_CHK"] = "1";
                                s.rows[e.row].dataItem["DEFORM_GRADE"] = "1";
                                if ((item.FAM_JOIN == "4" || item.FAM_JOIN == "8") && item.FAM_AGE > 20) {
                                    s.rows[e.row].dataItem["SUPP_CHK"] = "1";
                                }
                            } else {
                                s.rows[e.row].dataItem["GIBON_CHK"] = "2";
                                s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                                s.rows[e.row].dataItem["SUPP_CHK"] = "2";
                            }
                        });
                    } else {
                        s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                    }

                    //경로우대
                    if (item.FAM_AGE >= Number("70")) {
                        s.rows[e.row].dataItem["AGED_CHK"] = "1";
                    } else {
                        s.rows[e.row].dataItem["AGED_CHK"] = "2";
                    }

                    //자녀
                    if (item.FAM_JOIN == "4" || item.FAM_JOIN == "8") {
                        if (item.FAM_AGE >= Number("7") && item.FAM_AGE <= Number("20")) {
                            s.rows[e.row].dataItem["SUPP_CHK"] = "1";
                        } else {
                            s.rows[e.row].dataItem["SUPP_CHK"] = "2";
                        }
                    }

                    //당해출산입양
                    if (item.FAM_JOIN == "4") {
                        if (item.FAM_AGE == Number("0") &&
                            (item.JUMIN_NO.substring(7,8) == "3" || item.JUMIN_NO.substring(7,8) == "4" ||
                                item.JUMIN_NO.substring(7,8) == "7" || item.JUMIN_NO.substring(7,8) == "8" )){
                            s.rows[e.row].dataItem["CHILD_NO"] = "3";
                        }
                    }
                } else {
                    s.rows[e.row].dataItem["INCOME_STD_EX"] = "2";
                    s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
                    s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
                    s.rows[e.row].dataItem["DEFORM_GRADE"] = "4";
                    s.rows[e.row].dataItem["AGED_CHK"] = "2";
                    s.rows[e.row].dataItem["SUPP_CHK"] = "2";
                    s.rows[e.row].dataItem["CHILD_NO"] = "2";
                }
            }

            if (col.binding == "WOMAN_CHK") {
                if (item.FAM_JOIN == "0") {
                    if ((item.JUMIN_NO.substring(7, 8) == "2" || item.JUMIN_NO.substring(7, 8) == "4") &&
                        Number(earnIncomeAmt) <= 30000000 &&
                        check_woman()) {
                        if (item.SINGLE_CHK == "1") {  //한부모공제 우선
                            s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
                        }
                    } else {
                        s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
                    }
                } else {
                    s.rows[e.row].dataItem["WOMAN_CHK"] = "2";
                }
            }

            if (col.binding == "SINGLE_CHK") {
                if (item.FAM_JOIN == "0") {
                    if (check_single()) {
                        if (item.WOMAN_CHK == "1") {
                            s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
                        }
                    } else {
                        s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
                    }
                } else {
                    s.rows[e.row].dataItem["SINGLE_CHK"] = "2";
                }
            }

            if (item.GIBON_CHK == "1" && item.FAM_JOIN == "0") { //기본공제 '여' && 본인 && 경로우대 조건
                if (item.FAM_AGE >= Number("70")) {
                    s.rows[e.row].dataItem["AGED_CHK"] = "1";
                } else {
                    s.rows[e.row].dataItem["AGED_CHK"] = "2";
                }
            }

            //첫째, 둘째 중복체크
            if (col.binding == "CHILD_NO") {
                if (item.CHILD_NO == "3" || item.CHILD_NO == "4") {
                    //grid내 첫째, 둘째 중복체크
                    // console.log("[child_no]");
                    var msg = "";
                    var childDataMap = sheetGrid2.layoutDefinition[0].cells[16].dataMap.collectionView.items;

                    for (var i = 0; i < childDataMap.length - 1; i++) {
                        if (childDataMap[i].id == item.CHILD_NO) {
                            msg = childDataMap[i].name;
                        }
                    }
                    // console.log(msg);
                    var cnt = 0;
                    for (var i = 0; i < sheetGrid2.collectionView.items.length; i++) {
                        if (sheetGrid2.collectionView.items[i]["CHILD_NO"] == item.CHILD_NO) {
                            cnt++;
                        }
                    }

                    // console.log(cnt);
                    if (cnt > 1) {
                        alert(msg + "가 중복되었습니다.");
                        s.rows[e.row].dataItem["CHILD_NO"] = "2"
                    }
                }
            }

            //주민번호 초기화 시 나이 초기화
            if (col.binding == "JUMIN_NO" && item.JUMIN_NO == "") {
                s.rows[e.row].dataItem["FAM_AGE"] = "";
            }

        }
        sheetGrid2.refresh();
    }
    ,beginningEdit: function (s, e) {
        var col = s.getBindingColumn(e.panel, e.row, e.col);
        var item = s.rows[e.row].dataItem;

        if (col.binding == "REG_NUM_TYPE") {
            if (item.G_STATUS == "Added") {
                sheetGrid2.layoutDefinition[0].cells[10].dataMap.collectionView.sourceCollection = gridMap8;
            } else {
                sheetGrid2.layoutDefinition[0].cells[10].dataMap.collectionView.sourceCollection = gridMap11;
            }
        }

        if(item.FAM_NO == "0"){
            sheetGrid2.layoutDefinition[0].cells[2].dataMap.collectionView.filter = function(item){
                return item;
            }
        }else {
            sheetGrid2.layoutDefinition[0].cells[2].dataMap.collectionView.filter = function(item){
                return item.id != "0";
            }
        }

        e.cancel = false;

        if (item.FAM_JOIN == "0") {
            if (col.binding == "FAM_NAME" || col.binding == "REG_NUM_TYPE" || col.binding == "NATION_GUBUN" ||
                col.binding == "JUMIN_NO" || col.binding == "FAM_AGE" || col.binding == "FAM_JOIN" || col.binding == "INCOME_STD_EX" ||
                col.binding == "GIBON_CHK" || col.binding == "HOUSE_HOLD_YN" || col.binding == "CHILD_NO" || col.binding == "SUPP_CHK"
            ) {
                e.cancel = true;
            } else if (col.binding == "SINGLE_CHK") {
                if (item.WOMAN_CHK == "2") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else if (col.binding == "WOMAN_CHK") {
                if (item.SINGLE_CHK == "2") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            }else {
                e.cancel = false;
            }
        } else if (item.FAM_JOIN == "1"||item.FAM_JOIN == "2"||item.FAM_JOIN == "3"||
            item.FAM_JOIN == "6"||item.FAM_JOIN == "7"){
            if (col.binding == "HOUSE_HOLD_YN" || col.binding == "WOMAN_CHK" || col.binding == "SINGLE_CHK" ||
                col.binding == "CHILD_NO" || col.binding == "SUPP_CHK") {
                e.cancel = true;
            } else if (col.binding == "DEFORM_GRADE") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else {
                e.cancel = false;
            }
        } else if (item.FAM_JOIN == "4"){
            if (col.binding == "HOUSE_HOLD_YN" || col.binding == "WOMAN_CHK" ||
                col.binding == "SINGLE_CHK" || col.binding == "AGED_CHK") {
                e.cancel = true;
            } else if (col.binding == "DEFORM_GRADE") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else if (col.binding == "SUPP_CHK") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else if (col.binding == "CHILD_NO") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else {
                e.cancel = false;
            }
        } else if (item.FAM_JOIN == "5"){
            if (col.binding == "HOUSE_HOLD_YN" || col.binding == "WOMAN_CHK" || col.binding == "SINGLE_CHK" ||
                col.binding == "AGED_CHK" || col.binding == "CHILD_NO" || col.binding == "SUPP_CHK") {
                e.cancel = true;
            } else if (col.binding == "DEFORM_GRADE") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else {
                e.cancel = false;
            }
        } else if (item.FAM_JOIN == "8"){
            if (col.binding == "HOUSE_HOLD_YN" || col.binding == "WOMAN_CHK" || col.binding == "SINGLE_CHK") {
                e.cancel = true;
            } else if (col.binding == "DEFORM_GRADE") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else if (col.binding == "SUPP_CHK") {
                if (item.GIBON_CHK == "1") {
                    e.cancel = false;
                } else {
                    e.cancel = true;
                }
            } else {
                e.cancel = false;
            }
        }

        //경로우대 : 70세이상은 연말관계상관없이 기본공제가 여인 경우 활성화
        if (col.binding == "AGED_CHK") {
            if (item.GIBON_CHK == "1" && item.FAM_AGE >= Number("70")) {
                e.cancel = false;
            } else {
                e.cancel = true;
            }
        }

        if (col.binding == "GIBON_CHK") {
            if (item.INCOME_STD_EX == "1") {
                item.GIBON_CHK = "2";
                e.cancel = true;
            }
        }
    }
});

2. collectionView 에 데이터 입력 후 병합

var resData2 = null;
wijmo.httpRequest(url, {
    data: {
        'year_yyyy': data.YEAR_YYYY
        , 'site_code': data.SITE_CODE
        , 'emp_code': data.EMP_CODE
    },
    async: false,
    success: function (xhr) {
        var response = JSON.parse(xhr.response);
        resData2 = response.DATA;
        sheetGrid2.collectionView.sourceCollection = resData2;

        for(var i=0; i < resData2.length; i++) {

            resData2[i]["SEL_CHECK"] = false;

            if (resData2[i].JUMIN_NO != undefined) {
                resData2[i]["JUMIN_NO"] = resData2[i].JUMIN_NO.substring(0, 6) + "-" + resData2[i].JUMIN_NO.substring(6);
            }
        }
        sheetGrid2.mergeManager = new CustomMergeManager();
    }
});

3. mergeManager 객체 선언 

class CustomMergeManager extends wijmo.grid.MergeManager {
    getMergedRange(panel, r, c, clip = true) {
        //
        // 기본 셀 범위 생성
        var rng = new wijmo.grid.CellRange(r, c);
        // 그리드 패널의 cellType이 ColumnHeader일 때
        if(panel.cellType == wijmoGrid.CellType.ColumnHeader){
            //
            // 왼쪽/오른쪽으로 확장
            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;
            }
            //
            // 위/아래로 확장
            for (var 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 (var 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;
            }
        }else if (panel.cellType == wijmoGrid.CellType.Cell){
            if(rng.col == 0 || rng.col == 1 || rng.col == 20){

                for (var i = r; i < panel.rows.length - 1; i++) {
                    if (panel.rows[i].dataItem == panel.rows[i + 1].dataItem) {
                        rng.row2 = i + 1;
                    } else {
                        break;
                    }
                }
                for (var i = r; i > 0; i--) {
                    if (panel.rows[i].dataItem == panel.rows[i - 1].dataItem) {
                        rng.row = i - 1;
                    } else {
                        break;
                    }
                }
            }

            if(rng.col == 3 || rng.col == 4){
                if(rng.row % 2 == 0){
                    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;

                        /*if (panel.columns[i].binding == panel.columns[i + 1].binding) {
                            rng.col2 = i + 1;
                        } else {
                            break;
                        }*/
                    }

                    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;

                        /*if (panel.columns[i].binding == panel.columns[i - 1].binding) {
                            rng.col = i - 1;
                        } else {
                            break;
                        }*/
                    }
                }
            }
        }

        //
        // 마무리
        return rng;
    }
}

이외 확인한 바로는  f12 의 개발자 모드로 확인했을때 div 자체가 생성이 되지 않았습니다.


PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-11-16 08:34 댓글 0건

본문

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


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

전달해 주신 샘플 코드 및 이미지를 확인해 본 결과, 특정 열 및 행에 속하는 셀과 인접한 셀 중 데이터가 동일한 셀을 병합하는 코드로 인해 발생한 현상으로 보입니다.

해당 코드는 셀이 특정 열 및 행에 속할 때, 반복문을 통해 그리드에 속하는 모든 셀에 대하여 인접해 있는 셀의 데이터가 동일한 경우 모두 병합하도록 작성되었습니다.

MultiRow 컨트롤의 mergeManager 속성에 특정 열 및 행에 속하는 셀들의 binding 속성 값을 비교하여 동일하면 병합하는 아래의 코드를 이용해 보시기 바랍니다.

샘플의 40~53번 라인에서 아래의 코드를 확인해 보실 수 있습니다.

// 셀의 binding 속성이 동일한 경우 왼쪽/오른쪽으로 확장
for (var i = rng.col; i < panel.columns.length - 1; i++) {
  if (panel.columns[i].binding == panel.columns[i + 1].binding) {
    rng.col2 = i + 1
  } else {
    break;
  }
}
for (var i = rng.col; i > 0; i--) {
  if (panel.columns[i].binding == panel.columns[i - 1].binding) {
    rng.col = i - 1;
  } else {
    break;
  }
}

자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.


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


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-11-18 16:17 댓글 1건

본문

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


유선으로 문의 주신 MultiRow 컨트롤의 특정 행과 열에 속하는 셀 병합 시 getCellData 메서드 혹은 binding 속성이 아닌 다른 방법으로 셀을 병합하는 대해 답변 드립니다.

셀의 행 index 속성을 이용하여 해당 셀이 특정 열에 속하는 경우 셀을 병합하는 코드를 mergeManager 속성에 구현해 보시기 바랍니다.

아래의 코드를 참고해 보시기 바랍니다.

// 그리드 패널의 cellType이 Cell일 때 
if(panel.cellType==1){
  // 첫번째 혹은 두번째 열 일때
  if (rng.col == 0 || rng.col==1) {
    // 각 행에서 첫번째 혹은 3번째 순서에 있는 행 일때
    if(rng.row%3==0 || (rng.row+1) % 3 ==0){
      for (var i = rng.col; i < panel.columns.length - 1; i++) {
         // 그리드의 첫번째 열인 경우 병합
        if (panel.columns[i].index==0) {
          rng.col2 = i + 1;
        } else {
          break;
        }
      }

      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;

        // binding 속성이 동일하면 병합
        // if (panel.columns[i].binding == panel.columns[i - 1].binding) {
        //   rng.col = i - 1;
        // } else {
        //   break;
        // }
      }
    }
  }
}


- index API 문서


API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

김로치님의 댓글

김로치
프로필 보기 쪽지 보내기
작성일

안녕하세요 해당 코드로 작성시 이전과 같은 문제가 발생합니다




binding 속성이 같을시 병합은 값이 없을떈 병합 된것처럼 보이다가 값이 입력될때 (rowAdd 도 마찬가지) 다시 분리 됩니다. 확인부탁드립니다.


PureJS Re: Multi

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

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-11-22 15:02 댓글 0건

본문

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


이전에 안내 드렸듯이 문의 주신 이슈와 관련하여 저희 측에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다.

따라서, 간단한 샘플을 공유 드리오니 문제가 발생하는 영역의 코드와 비교 및 추가하여 공유 드린 샘플에서도 문제가 발생하는지 확인 부탁드립니다. 

샘플에서 동일한 문제가 발생하신다면 해당 샘플을 저희 쪽으로 전달해주시기 바랍니다.


공유해주신 샘플을 바탕으로 재현 및 디버깅 후, 답변 드릴 수 있도록 하겠습니다.

정확한 답변을 드리기 위해 요청 드리며 확인 후, 회신하여 주시기 바랍니다.


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

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