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

셀 데이터 변경 로우 데이터 동적 업데이트 > Q&A | 토론

본문 바로가기

VueJS 셀 데이터 변경 로우 데이터 동적 업데이트

페이지 정보

작성자 슈아이거 작성일 2023-09-18 16:52 조회 457회 댓글 0건
제품 버전 : 16.2.1
컨트롤 이름 : wj flex grid cell

본문


위와 같이 상품 코드를 변경 하면 해당 상품 코드에맞는 정보를 옆에 행에 로드 하려 합니다 아래와 같이


 그런데 상품 코드에 해당 하는 값을 dataMap 으로 넣었는데 변경 이벤트가 먹히지 않습니다.


셀을 변경 하면 동적으로 로우 데이터를 변경 하는 방법을 알려주시면 감사하겠습니다.

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

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: 셀 데이터 변경 로우 데이터 동적 업데이트

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

페이지 정보

작성자 GCK루시 작성일 2023-09-20 11:47 댓글 1건

본문

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


문의하신 내용이 dataMap의 셀 값 변경 시, 동일 행의 값이 변경되도록 처리하고 싶으신 경우, FlexGrid의 cellEditEnding 이벤트를 이용하시면 됩니다. 해당 이벤트 내에서 기존 값과 새롭게 설정할 값이 다를 경우, 해당 행의 dataItem에 접근하여 특정 열의 값을 설정하시면 됩니다.


자세한 코드는 아래 샘플에서 확인하실 수 있습니다. 샘플에서 country 열의 dataMap의 값 변경 시, check 열 값이 설정되는 것을 확인하실 수 있습니다.



- cellEditEnding API 문서

- dataItem API 문서


더불어 기재하신 제품 버전의 경우, SpreadJS로 확인되며 아래 제품 버전 확인 방법 안내 글을 공유드리오니  Wijmo 제품에 맞는 버전을 입력해주시기 바랍니다. 

  

사용 중인 GrapeCity 제품 버전 확인 방법 안내


감사합니다.

그레이프시티 드림

댓글목록

슈아이거님의 댓글

슈아이거 작성일

답변 주신대로 처리 하여 1개행에 해당하는 정보는 변하게 하였습니다. 그런데 만약 n개의 셀에 붙여넣기를 통해 값을 넣었을 경우 n개의 행이 동적으로 변하게 하려면 어떻게 해야 할 지 알려주시면 감사하겠습니다.  

VueJS Re: 셀 데이터 변경 로우 데이터 동적 업데이트

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

페이지 정보

작성자 GCK루시 작성일 2023-09-25 11:02 댓글 1건

본문

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


문의하신 기능의 경우, 사용자가 단축키로 클립보드의 내용을 붙여넣기 할 때 발생하는 pasting 이벤트와 그리드 셀에 데이터를 입력하는 setCellData로 구현하실 수 있습니다.


아래 간단한 코드를 공유드리오니 참고 부탁드립니다.


grid.pasting.addHandler((s, e) => {
  var data = e.data.split(`\n`); // 클립보드 데이터 구분

  for (var i = 0; i < data.length - 1; i++) { // 데이터 길이만큼 반복
     if (data[i] !== "") { // 데이터가 있을 때만
        grid.setCellData(e.row + i, e.col + 1, data[i] + " edited"); // 옆 셀에 데이터 입력
     }
   }
});


- pasting API 문서

- setCellData API 문서


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


감사합니다.

그레이프시티 드림


댓글목록

슈아이거님의 댓글

슈아이거 작성일

이렇게 하니 복사된 내용을 넣는 부분은 확인이 되는데 1개의 내용을 여러셀에 넣을때 선택된 셀의내용을 알수가 없더라구요 혹시 예를 들어 1개의 복사된 내용을 여러 셀에 넣을때 복사해서 넣어진 셀의 정보를 알수는 없는지요?

VueJS Re: 셀 데이터 변경 로우 데이터 동적 업데이트

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

페이지 정보

작성자 GCK루시 작성일 2023-10-05 16:45 댓글 0건

본문

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


문의하신 기능의 경우, pasted 이벤트의 두번째 파라미터인 CellRangeEventArgs의 range 속성을 이용하여 셀 정보를 얻을 수 있습니다. 아래 코드는 셀 영역의 col, row 속성을 통해 첫번째 열/행의 인덱스를 가져온 뒤, getCellData 메서드를 통해 셀에 입력된 정보를 가져오는 코드입니다. 


grid.pasted.addHandler((s, e) => {
  console.log(e.range); // 붙여넣기된 셀 정보
  var colIndex = e.range.col, rowIndex = e.range.row;
  var data = grid.getCellData(rowIndex,colIndex);
  console.log(data);
});


CellRange의 row, col 속성과 함께 columnSpan, rowSpan 속성을 이용하여 전체 범위를 확인하실 수 있으며 아래 API 문서를 참고하여 주시기 바랍니다.

 

- CellRangeEventArgs API 문서

- CellRange API 문서

- getCellData API 문서


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


감사합니다.

그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

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