cssClass 및 isReadOnly 속성에 바인딩 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS cssClass 및 isReadOnly 속성에 바인딩

페이지 정보

작성자 sunny 작성일 21-06-07 10:15 조회 211회 댓글 0건
제품 버전 : Wijmo Library 5.20203.766
컨트롤 이름 : FlexGridColumn

본문

안녕하세요.


아래는 isReadOnly 나 cssClass가 고정이되어있어서 조건에 따라 값을 변경 할 수가 없는데요

조건에 따라 각각row의cell의 isReadOnly값을 및 cssClass 값을 변경할 수 있는 방법이 있을까요?

혹은 데이터셋의 바인딩된값을 isReadOnly 나 CssClass로 그대로 넣어주고 싶은데 가능한가요?


참고로 FlexGridCellTemplate 를쓰면 grid 전체에 입혀놓은 css에 덧붙이는 상태가 되어 쓰기 힘든상태입니다.

감사합니다.


<FlexGridColumn 
     header="담당자"
     binding="calReviseUserName" 
     width={"0.3*"}
     align={'center'}
     isReadOnly={true}
     cssClass'wj-readonly' 
     visible={true} />
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

ReactJS Re: cssClass 및 isReadOnly 속성에 바인딩

페이지 정보

작성자 GCK루시 작성일 21-06-08 15:39 댓글 1건

본문

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


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

댓글목록

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.