안녕하세요 그레이프시티입니다.
문의 주신 내용에 답변 드립니다.
1. FlexGrid 셀 선택 및 편집 후, 선택 되돌리기 문의
해당 기능 구현을 위해서는 cellEditEnding 이벤트와 팝업의 show 메서드를 이용해주시면 됩니다.
cellEditEnding 이벤트 내에서 그리드 편집 후, 값을 비교하여 변경이 있을 때, show 메서드를 통해 팝업창을 보여줍니다. 그 다음, show 메서드의 두 번째 인자 값으로 전달된 sender의 dialogResult 즉 팝업이 숨겨진 후, 팝업에 대한 반환 값을 보고 확인/취소 버튼인지 확인 하실 수 있습니다. 만일 취소 버튼을 클릭 시 그리드의 select 메서드에 선택(편집)했던 행/열 인덱스를 전달하여 이전 선택 값으로 이동하게끔 설정하실 수 있습니다.
아래 코드를 참고하여 주시기 바랍니다.
const wjPopup = React.useRef(null);
const inputRef = React.useRef(null);
React.useEffect(() => {
wjPopup.current = inputRef.current.control;
}, [wjPopup]);
s.cellEditEnding.addHandler((s, e) => {
var val = s.getCellData(e.row, e.col);
if (val !== s.activeEditor.value) {
wjPopup.current.show(true,(sender) => {
if (sender.dialogResult == 'wj-hide') {
// s.setCellData(e.row,e.col,val)
s.select(e.row,e.col,val)
}
})
}
});
(...)
<wjInput.Popup initialized={initPopup} ref={inputRef}>
(....)
<div className="wj-dialog-footer">
<button className="btn btn-primary wj-hide-ok">Yes</button>
<button className="btn btn-default wj-hide">No</button>
</div>
</wjInput.Popup>
2. 그리드 셀 클릭 후, 행 색상 변경 문의
문의 주신 기능을 구현하기 위해서는 셀 클릭 시, 해당 인덱스 정보를 가지고 특정 행을 접근 후, 열 또는 행에서 데이터 셀을 렌더링할 때 사용할 CSS 클래스 이름을 가져오거나 설정하는 cssClass 속성에 클래스 이름을 지정해주시면 됩니다. 아래 코드를 참고하여 주시기 바랍니다.
JS
s.hostElement.addEventListener("click", function (e) {
var ht = s.hitTest(e);
s.rows[ht.row].cssClass = "clicked-row";
});CSS
.clicked-row {
background: red !important;
}
- show : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.popup.html#show
- dialogResult : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_input.popup.html#dialogresult
- cssClass : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.row.html#cssclass
도움말 문서를 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일 2022-06-02 14:48 조회 1,701회
댓글 0건
1 답변
