안녕하세요 그레이프시티입니다.
문의 주신 셀의 CSS 및 isReadOnly 설정과 변경에 답변 드립니다.
1. 셀 클래스 설정 문의
각 셀의 대해서 클래스를 추가하고 싶으신 경우, 그리드의 셀을 사용자 정의할 수 있는 itemFormatter 속성과 요소에 클래스를 추가하는 addClass 함수를 사용하여 구현하실 수 있습니다. 아래 코드는 행/열의 인덱스가 0인 셀에 'wj-css' 클래스를 추가하는 코드입니다.
itemFormatter(panel, r, c, cell) {
if (panel.cellType == wjGrid.CellType.Cell) {
if (r === 0 && c === 0) {
wjCore.addClass(cell, "wj-css");
}
}
}
2. 셀 isReadOnly 설정 문의
셀의 편집을 방지하기 위해서는 셀이 편집 모드에 들어갈 때 발생하는 beginningEdit 이벤트 내에서 특정 조건을 가진 셀의 편집을 취소하는 방식으로 구현할 수 있습니다. 아래는 product 로 바인딩 된 열에서 행 인덱스가 3인 셀에 대해서 이벤트를 취소하여 편집을 방지하는 코드입니다.
grid.beginningEdit.addHandler((s, e) => {
let col = s.columns[e.col];
if (col.binding === "product") {
let item = s.rows[e.row].dataItem;
if (e.row === 3) {
// prevent editing overdue items
e.cancel = true;
alert("편집 불가");
}
}
});
+) 행에 대한 cssClass 및 isReadOnly 속성 설정 방법
해당 속성은 그리드 formatItem 이벤트를 사용하여 행의 isReadOnly 및 cssClass를 설정할 수 있습니다. 아래는 행의 인덱스가 짝수인 경우에 isReadOnly와 cssClass 설정하는 코드입니다.
grid.formatItem.addHandler((s, e) => {
if (e.panel === s.cells) {
if (e.row % 2 === 0) {
s.rows[e.row].isReadOnly = true;
s.rows[e.row].cssClass = "wj-row";
}
}
});
샘플 및 도움말 문서도 같이 전달 드리오니 참고 하시기 바랍니다.
[itemFormatter]
https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#itemformatter
[addClass]
https://demo.grapecity.co.kr/wijmo/api/index.html#addclass
[beginningEdit]
https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#beginningedit
다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.