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

문의 주신 셀의 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(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.