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

flexgrid에 행을 추가할 때 행 데이터를 모두 입력하지 않으면 행 추가를 막는 로직 문의 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

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

Wijmo

Q&A | 토론 - PureJS

PureJS flexgrid에 행을 추가할 때 행 데이터를 모두 입력하지 않으면 행 추가를 막는 로직 문의

페이지 정보

작성자 nxdev1
프로필 보기 쪽지 보내기
작성일 2023-07-31 12:30 조회 307회 댓글 0건
제품 버전 : 5.20221.842
컨트롤 이름 : flexgrid

본문

제목 그대로 flexgrid에 행을 추가할 때 행 데이터를 모두 입력하지 않으면 행이 추가하지 않는 로직을 구현하고 싶습니다.

이를 위해 rowAdded 이벤트핸들러를 이용해 구현하고자 했습니다.

flexGrid.rowAdded.addHandler(function (s, e) {
  var newRowData = s.rows[e.row].dataItem;
  // isRowDataValid == 모든 행을 채웠는지 확인하는 검증함수
  if (!isRowDataValid(newRowData)) {
    s.rows.removeAt(e.row);
    alert('모든 필수 데이터를 입력하세요.');
  }
});

그런데 grid가newRowAtTop : true 로 되어 있어서 그런지 e.row이 항상 0으로 나와 무조건 젤 처음 행을 지우더군요.

정렬에 따라 무조건 젤 위에서 생성되지도 않는데 말이죠.


그래서 rowAdded로 추가된 행의 row를 찾는 방법이 궁금합니다. 아니면 rowAdded를 사용하지 않고

저 로직을 구현가능한 지 알고 싶습니다.


감사합니다.



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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: flexgrid에 행을 추가할 때 행 데이터를 모두 입력하지 않으면 행 추가를 막는 로직 문의

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2023-07-31 16:25 댓글 2건

본문

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


문의하신 기능의 경우, 행의 추가가 하단에 이루어지기 때문에 e.row가 아닌 마지막 행의 인덱스에 접근하여 dataItem을 가져와주시길 바랍니다. 더불어 removeAt 메서드를 호출하는 것이 아닌 e.cancel=true로 하여 행 추가를 처리하시기 바랍니다.


아래 간단한 코드를 참고하여 주시기 바랍니다.


theGrid.rowAdded.addHandler(function (s, e) {
  var newRowData = s.rows[s.rows.length-1].dataItem;
  // // isRowDataValid == 모든 행을 채웠는지 확인하는 검증함수
  if (!isRowDataValid(newRowData)) {
    // s.rows.removeAt(s.rows.length-1);
    e.cancel = true;
    alert('모든 필수 데이터를 입력하세요.');
  }
});


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


감사합니다.

그레이프시티 드림

댓글목록

nxdev1님의 댓글

nxdev1
프로필 보기 쪽지 보내기
작성일

e.cancel을 쓰니 행 추가를 막아지는 것을 구현할 수 있었습니다. 감사합니다.

그런데 제가 최종적으로 생각했던 로직은 addrow에 데이터를 덜 입력할 시 행 추가는 막아지되, addrow에 입력했던 내용들은 addrow에 그대로 유지되기를 원했습니다.

하지만 저 방식으로는 addrow에 입력했던 내용들도 같이 없어지더군요.
아래는 addrow에 입력한 내용은 남아있도록 구현해 본 코드입니다.
하지만 똑같더군요. 어떻게 수정해야 할 지 알려주시면 감사하겠습니다.

theGrid.rowAdded.addHandler(function (s, e) {
  var newRowData = s.rows[s.rows.length-1].dataItem;
  // // isRowDataValid == 모든 행을 채웠는지 확인하는 검증함수
  if (!isRowDataValid(newRowData)) {
for(let i=0; i < grid.columns.length; i++) {
grid.setCellData(0, i, grid.getCellData(grid.rows.length -1, i , false));
 console.log(grid.getCellData(0, i , false));
}   
    e.cancel = true;

    alert('모든 필수 데이터를 입력하세요.');
  }
});

GCK루시님의 댓글의 댓글

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

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

해당 내용은 현재 확인 중에 있으며 업데이트가 되는대로 안내드리도록 하겠습니다.

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

PureJS Re: flexgrid에 행을 추가할 때 행 데이터를 모두 입력하지 않으면 행 추가를 막는 로직 문의

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2023-08-03 14:17 댓글 0건

본문

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


문의하신 기능을 구현하기 위해서는 FlexGrid의 rowEditEnding 이벤트를 이용하시면 됩니다. 


해당 이벤트에서 새로 추가된 행 데이터를 확인한 뒤, 첫 번째 행 데이터를 유지하기 위해 작업을 취소해줍니다. 그 다음 사용자가 모든 행 데이터를 입력하지 않을 때 추가된 행을 제거하시면 됩니다.


theGrid.rowEditEnding.addHandler((s, e) => {
    var newRowData = s.rows[s.rows.length - 1].dataItem;
    var filterNewRowData = Object.values(newRowData).filter((i) => i != '');
    if (filterNewRowData.length !== theGrid.columns.length) {
      //모든 열 데이터가 있을 때까지 첫 번째 행에 데이터 유지
      e.cancel = true;
      s.rows.removeAt(s.rows.length - 1);
    }
  });


- rowEditEnding API 문서


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


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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

카테고리

인기글

더보기

최신글

더보기

셀럽

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