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

그리드에서 정수형,소수점 구분하여 maxlength 지정 > Q&A | 토론

본문 바로가기

PureJS 그리드에서 정수형,소수점 구분하여 maxlength 지정

페이지 정보

작성자 케이데이터랩 작성일 2021-03-23 21:44 조회 4,828회 댓글 0건
제품 버전 : 5.20202.732
컨트롤 이름 : flexGrid

본문

안녕하세요!!

수고많으십니다. 한가지 여쭤보겠습니다.


지금 필요로 하는 기능중에 컬럼의 dataType: Number 이고 format:'n2' 로 지정하여 소수점 두자리까지 표시하고 있습니다.

DB측에서 필드가 number(6,2) 타입으로 4자리 정수와 2자리 소수형태로 되어 있습니다.


사용자가 그리드에서 값을 입력할때 정수4자리, 소수2자리로만 입력을 받고 싶습니다.

format:'n2'로 할 경우 소수점 두자리 까지만 입력 받고 싶지만 입력을 하면 무한정 소수점 입력이 되고 수정이 끝나면 소수점 두자리 반올림 되어 표시가 됩니다. 최종 결과값은 소수점 두 자리까지 표현이 되긴 하지만 입력 될 때부터 더이상 입력이 안되게 막고 싶어서 예제에 있는 "사용자정의 편집기"를 통해서 아래와 같이 사용자정의 편집기를 통해서 처리를 하였습니다.


editor: new wijmo.input.InputNumber(document.createElement('div'),{format:'n2'})


위와같이 하여 소수점 입력시부터 두자리 이상 타이핑이 되지 않게  해결이 되었습니다.


마찬가지로 정수형에서도 4자리까지만 숫자를 입력 받고 싶습니다. 어떻게 해야 될까요?

max값을 줘서 처리해 보려고도 했지만.

예를들어 max값을 9999로 정의하고 

사용자가 입력을 원하는 수는 1234인데 실수로 12345 다섯자리까지 입력 하였을때 max값이 9999이기때문에 값은 9999로 셋팅이 되어버립니다. 


애초에 4자리까지 입력으로만 막아버리면 1234까지 입력되고 다섯 자리수는 입력 안되서 원천적으로 막을 수 있지만.

그렇지 않을 경우 전혀 다른 수가 들어갑니다.


반드시 필요한 기능입니다. 


답면 부탁 드릴께요..

감사합니다.







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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: 그리드에서 정수형,소수점 구분하여 maxlength 지정

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

페이지 정보

작성자 GCK루시 작성일 2021-03-24 14:50 댓글 1건

본문

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


그리드의 정수형에서 4자리 수를 초과하여 작성하지 못하게 하는 방법은 CollectionView에서 getError 속성을 이용하는 것입니다.

getError는 아이템의 특정 속성이 유효성 검사에 포함되어 있는지 여부를 결정하는 콜백을 가져오거나 설정합니다. getError를 통해 유효성 검사에서 error가 발생하면 메세지와 함께 포커스가 해당 셀에 머무르게 됩니다.


자세한 코드는 아래 샘플을 참고하여 주시길 바랍니다. 아래 코드에서 sales 열은 정수 값만 체크하고 expenses 열은 정수와 소수를 분리해 체크합니다. 아래 그리드에서 sales열 또는 expenses열의 셀에서 4자리 수를 초과하여 값을 입력해보시고 결과 값을 확인하시길 바랍니다.


 


[getError]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html#geterror


[CollectionView 유효성 검사 데모]

https://demo.grapecity.co.kr/wijmo/learn-wijmo/Core/CollectionView/EditingViews/Validation/purejs


도움말 문서와 데모 링크를 전달 드리오니 참고 부탁 드립니다.


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



감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.



댓글목록

케이데이터랩님의 댓글

케이데이터랩 작성일

답변 너무 감사 드립니다. 말씀해주신 CollectionView에서 getError 속성의 유효성 체크하는 방법말고 원천적으로 더이상 타이핑 되지 않게 막느 방법은 없는건가요?? Max, Min 값을 주면 그 이상값이 입력이 안되게 기능추가좀 부탁드릴께요.. 지금은 Max값을 오버하여 입력시 Max값으로 고정되는데 입력이 안되게 하는 기능도 가능하시면 꼭 추가부탁드립니다.

PureJS Re: 그리드에서 정수형,소수점 구분하여 maxlength 지정

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

페이지 정보

작성자 GCK루시 작성일 2021-03-30 14:05 댓글 0건

본문

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


답변이 늦어진 점 죄송합니다.

CollectionView의 getError 함수를 사용하지 않고 셀에 대한 값 체크 뒤, 이벤트를 취소하는 방법으로는 cellEditEnding 이벤트를 사용하시면 됩니다. cellEditEnding 이벤트는 셀의 편집이 끝날 때 발생하며 이벤트 내에 선언된 max 값과 입력된 값과 비교하여 값이 max 보다 더 큰 경우, 이벤트를 취소하여 입력을 방지합니다. 더불어 입력된 값의 길이 때문에 쉼표가 들어간 경우, 올바른 값 비교가 되지 않기 때문에 replace 메서드를 통해 쉼표 제거 후, 값을 비교하셔야 합니다.  자세한 코드는 아래 샘플을 참고하시길 바랍니다. 



[cellEditEnding]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#celleditending 


추가적으로 도움말 문서를 전달 드리오니 참고 부탁 드립니다.


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



감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

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