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

데이터 포멧 지정 후, 해당 셀 값 수정 불가 확인요청드립니 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS 데이터 포멧 지정 후, 해당 셀 값 수정 불가 확인요청드립니

페이지 정보

작성자 라레 작성일 2021-07-15 15:25 조회 3,635회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : formatItem

본문

아래와같이 formatItem 지정 후, 해당 셀을 더블클릭 시 데이터 변경이 불가능하여

값변경이 가능하도록 데이터포멧을 지정하는 방법을 문의드립니다.


문의사항 1.

- 분류필드의 값에 따라 입출고수량 필드의 값(10)이 입고일경우 +10(파랑), 출고일경우 -10(빨강) 상태가 되도록 포멧 지정 필요

- 해당 필드의 값 수정 가능하도록 조치 필요 (아래방법으로 지정시 현재 수정 불가)  


b7a8fd3b511239dc8c8eed63116e2b45_1626334802_2792.png
 


currentColumns = [

      { isReadOnly: true, width: 35, align:"center"},

      { binding: 'cateSarSeq', header: '시퀀스', isReadOnly: true, width: 0, align:"center" },

      { binding: 'cretDt', header: '일자', isReadOnly: true, width: 100, align:"center" },

      { binding: 'cretNm', header: '담당자', isReadOnly: true, width: 100, align:"center" },

      { binding: 'classifiCd', header: '분류', isReadOnly: false, width: 150, align:"center", dataMap: classifiList, dataMapEditor: 'DropDownList' },

      { binding: 'lCategyCd', header: '카테고리', isReadOnly: false, width: 150, align:"center", dataMap: lCategyList, dataMapEditor: 'DropDownList' },

      { binding: 'itemCd', header: '물품', isReadOnly: false, width: '*', align:"center", dataMap: itemList, dataMapEditor: 'DropDownList'},

      { binding: 'cost', header: '원가', isReadOnly: true, width: 100, align:"center" },

      { binding: 'sarQuantity', header: '입출고수량', isReadOnly: false, width: 150, align:"center"},

      { binding: 'returnQuantity', header: '반품수량', isReadOnly: false, width: 150, align:"center" },

      { binding: 'quantity', header: '재고수량', isReadOnly: true, width: 100, align:"center" },

      { binding: 'updtDt', header: '수정일자', isReadOnly: true, width: 100, align:"center" }

];

 

   

  currentGrid = new wijmo.grid.FlexGrid('#currentGrid', {

    autoGenerateColumns: false,

    alternatingRowStep: 0,

    columns: currentColumns,

    itemsSource: currentView,

    formatItem:function(s,e){

    if (e.panel == s.cells) {

            var col = s.columns[e.col];

                if (col.binding == 'sarQuantity' || col.binding == 'returnQuantity') {

                    //셀 서식

                    var html;

                    var value = s.getCellData(e.row, e.col);

                    var classifiCd = s.getCellData(e.row, 'classifiCd');

                    

/* //방법1

                    if(value != undefined && value != null && value > 0){

                    if(classifiCd == "S" || classifiCd == "RS"){

                    col.cellTemplate = '<span class="change_plus">+'+value;

                    }else if(classifiCd == "R" || classifiCd == "RR"){

                    col.cellTemplate = '<span class="change_minus">-'+value;

                    }       

                    }  

                    */


//방법2

                  if(value != undefined && value != null && value > 0){

                    if(classifiCd == "S" || classifiCd == "RS"){

                    html = '<span class="change_plus">+'+value+'</span>';

                    }else if(classifiCd == "R" || classifiCd == "RR"){

                    html = '<span class="change_minus">-'+value+'</span>';

                    }

                    e.cell.innerHTML = html;           

                    }       

                }

            }

 }

  });


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

댓글목록

등록된 댓글이 없습니다.

1 답변

PureJS Re: 데이터 포멧 지정 후, 해당 셀 값 수정 불가 확인요청드립니

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

페이지 정보

작성자 GCK루시 작성일 2021-07-16 11:00 댓글 0건

본문

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


문의 주신 formatItem 이벤트 내에서 셀 값 재설정 후, 편집 모드와 관련하여 셀의 HTML을 수정하기 전에 먼저 해당 이벤트 내에서 활성화 편집기(active editor)에 대해 체크를 해주셔야 합니다.


if((e.panel.cellType==1)&&(s.activeEditor)){
   if((s.editRange.row==e.row)&&(s.editRange.col==e.col)){
       	return;
   }
}


더불어 HTML을 수정하는 데 있어 innerHTML 보다는 원시 텍스트 값을 가져오는 textContent를 사용하시는 것이 성능 및 보안에 대해 강점이 있기 때문에 textContent 사용을 추천 드립니다. textContent 사용 시 셀의 클래스는 wijmo.addClass를 통해 설정이 가능합니다. 더 자세한 코드는 아래 샘플에서 확인하시길 바랍니다.



[editRange]

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


[addClass]

https://demo.grapecity.co.kr/wijmo/api/index.html#addclass 


[activeEditor]

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


도움말 문서도 같이 전달 드리오니 확인 부탁 드립니다.


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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(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.