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

MultiRow 에서 rowspan 시 header 가 위로 붙음 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론

PureJS MultiRow 에서 rowspan 시 header 가 위로 붙음

페이지 정보

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

본문

MultiRow 에서 rowspan 으로 수직 병합을했는데 병합한 Cell 의 header 가 위로 붙습니다 해결방법 있을까요 ?


 


 

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

댓글목록

GCK다이애나님의 댓글

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

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

문의 주신 내용이 재현 되지 않아 정확한 원인 파악이 되지 않고 있습니다.
저희 쪽으로 재현 가능한 샘플 혹은 코드를 공유해주신다면 재현 및 디버깅 후 답변 드릴 수 있도록 하겠습니다.

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

GCK다이애나님의 댓글

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

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

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

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

3 답변

PureJS Re: MultiRow 에서 rowspan 시 header 가 위로 붙음

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

페이지 정보

작성자 김로치
프로필 보기 쪽지 보내기
작성일 2022-10-06 14:19 댓글 0건

본문

레이아웃 데피니션 부분 공유 드립니다
,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: 8, align: "center", isReadOnly: true }
                    ,{ binding: 'FAM_JOIN', header: '연말정산<br>관계', width: '6*', minWidth: 70, dataMap: gridMap4, align: "left", isRequired: false}
                    ,{ binding: 'FAM_NAME', colspan: 2, header: '성명', width: '4*', minWidth: 30, align: "left", isRequired: false}
                    ,{ binding: 'FAM_AGE', dataType: 'Number', header: '나이', width: '3*', minWidth: 10,mask:"000", align: "center", isRequired: false}
                    ,{ binding: 'GIBON_CHK', header: '기본공제', width: '3*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
                    ,{ binding: 'WOMAN_CHK', header: '부녀자', width: '3*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
                    ,{ binding: 'AGED_CHK', header: '경로<br>우대<br>(70세)', width: '4*', minWidth: 35, dataMap: gridMap5, align: "left", isRequired: false}
                    ,{ binding: 'SUPP_CHK', header: '자녀', width: '3*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
                    //두번째줄
                    ,{ binding: 'NATION_GUBUN', header: '내/<br>외국인', width: '4*', minWidth: 40, dataMap: gridMap3, align: "center", isRequired: false}
                    ,{ binding: 'REG_NUM_TYPE', header: '주민(외국인)<br>등록번호', width: '4*', minWidth: 40, dataMap: gridMap11, align: "left", isRequired: false}
                    ,{ binding: 'JUMIN_NO', header: '주민(외국인)<br>등록번호', width: '7*', 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: '3*', minWidth: 55, dataMap: gridMap5, align: "left", isRequired: false}
                    ,{ binding: 'HOUSE_HOLD_YN', header: '세대주', width: '4*', minWidth: 45, dataMap: gridMap9, align: "center", isRequired: false, isReadOnly: true}
                    ,{ binding: 'SINGLE_CHK', header: '한부모', width: '3*', 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: '4*', minWidth: 55, dataMap: gridMap7, align: "left", isRequired: false}
                    
                ]
            },
            {
                header: 'FAM_DATA', colspan: 25, cells: [
                    //첫번쨰줄
                    { binding: 'N_GUBUN', rowspan: 2, header: '구분', width: '2*', 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, 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_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, 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}
                ]
            }
        ]
추가적으로 FlexGrid 처럼 컬럼을 안보이게 visible: false 처리 할수 없는지 질문드립니다.
        

        
    










    
댓글목록

        
등록된 댓글이 없습니다.










 
 

    

        

                        
            PureJS
            
                        
            Re: MultiRow 에서 rowspan 시 header 가 위로 붙음
        


        
         
                     


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

        
  


    

        
페이지 정보

        
        작성자 

        GCK다이애나
        

            프로필 보기
            쪽지 보내기
        

        
        작성일 2022-10-13 11:42        댓글 0건

                                     



    

        
본문


        
        

        
        
        

         
                
        

        



        

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

먼저 답변이 지연되어 죄송합니다.
문의 주신 내용에 대해 다음과 같이 답변 드립니다.

1. MultiRow 컨트롤에서 rowspan 속성 설정 시 열 헤더의 데이터가 상단에 위치하는 현상
MultiRow 컨트롤을 이용하여 기존의 그리드의 레이아웃을 확장하는 경우, 기본적으로 셀의 데이터는 중앙에 표시됩니다.
말씀하신 현상과 같이 열 헤더의 데이터가 상단에 위치하시는 경우, 아래의 코드를 이용하여 열 헤더의 데이터의 위치를 설정해보시기 바랍니다.
.wj-multirow .wj-colheaders .wj-cell.wj-center-vert:not(.wj-hasdropdown) div {
  vertical-align: center !important;
}

2. MultiRow 컨트롤의 특정 열의 visible 속성을 false로 설정하는 방법
아쉽게도 MultiRow 컨트롤은 visible 속성을 지원하지 않습니다.
이와 관련하여 아래의 API 문서를 첨부해 드리오니 확인해 보시기 바랍니다.
- MultiRow 컨트롤 

본사 개발 팀을 통하여 MultiRow 컨트롤의 특정 열을 숨기는 방법에 대해 확인 중에 있으며, 확인 되는 대로 답변 드리도록 하겠습니다.
답변이 지연되어 죄송합니다.

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

감사합니다.

그레이프시티 드림
        

        
    










    
댓글목록

        
등록된 댓글이 없습니다.










 
 

    

        

                        
            PureJS
            
                        
            Re: MultiRow 에서 rowspan 시 header 가 위로 붙음
        


        
         
                     


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

        
  


    

        
페이지 정보

        
        작성자 

        GCK다이애나
        

            프로필 보기
            쪽지 보내기
        

        
        작성일 2022-10-14 14:20        댓글 0건

                                     



    

        
본문


        
        

        
        
        

         
                
        

        



        

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

먼저 답변을 오래 기다리게 해드려 죄송합니다. 
문의 주신 MultiRow 컨트롤의 특정 열을 숨기는 방법에 대해 답변 드립니다.
MultiRow 컨트롤의 layoutDefinition 속성을 이용하여 특정 열에 해당하는 셀들을 splice 메서드를 사용해 제거하여 특정 열을 숨길 수 있습니다.
아래의 샘플을 참고해 주시기 바랍니다.
샘플은 다음과 같은 방법으로 구현되었습니다.
  1. MultiRow 컨트롤과 버튼을 생성합니다.
  2. 생성한 버튼의 클릭 이벤트에 다음과 같은 코드를 작성합니다. 
    -1. forEach 반복문을 통해 MultiRow 컨트롤의 layoutDefinition 속성의 값을 불러옵니다.
    -2. 불러온 layoutDefinition 속성의 값을 이용하여 forEach 반복문과 조건문을 통해 binding 속성이 '2021 Q2'인 열에 속하는 셀을 확인합니다.
    -3. binding 속성이 '2021 Q2'인 열에 속하는 셀인 경우 splice 메서드를 사용해 해당 셀들을 제거합니다.
    -4. 특정 열에 속하는 셀들이 제거된 레이아웃을 MultiRow컨트롤의 layoutDefinition 속성에 지정합니다.

- layoutDefinition API 문서

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

감사합니다.

그레이프시티 드림
        

        
    










    
댓글목록

        
등록된 댓글이 없습니다.

























 











				

            	

            		

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

            		홈페이지 바로가기
            	

            

		

		


		
	

    	

    		           			

           	           			

           	           			

           	        	    	

    


    
	

    	

    		        	        	  

        	     	

    




	

				

			
카테고리

			
		

				

		



				

			
인기글
더보기

			
		


		

			
최신글
더보기

			
		

		

		

			
셀럽

    			

        			최근 7일
        			종합
        		

			

			
    

			

		


		






	




	

	

	










    

    	

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

    		홈페이지 바로가기
    	

    


    

		
		

			
			
이메일 : sales-kor@mescius.com    |   전화 : 1670-0583   |   경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주)
			대표자 : 허경명   |   사업자등록번호 : 123-84-00981   |   통신판매업신고번호 : 2013-경기안양-00331
			ⓒ 2024 MESCIUS inc. All rights reserved.