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

그리드를 스크립트로 생성하고 데이터 건을 동적으로 바인딩 할 수있을까요? > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 그리드를 스크립트로 생성하고 데이터 건을 동적으로 바인딩 할 수있을까요?

페이지 정보

작성자 토끼바람 작성일 2021-08-25 20:27 조회 4,084회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : FlexGrid

본문


그리드를  new FlexGrid()로 생성하고 기존에 UI에 노출된 그리드에 바인딩된 데이터와  함수등을 그대로 

새로 스크립트로 생성한 그리드에 적용할 수있을까요?

스크립트를 통해서 동적으로 생성된 그리드에 데이터를 동적으로 방인딩 할 수있는지 궁금합니다.


    let tmpGrid = new FlexGrid();

    Object.assign(tmpGrid, gridObejctRef.current.control);


이런식으로 UI에 있는 그리드를 새로운 객체로 assign을 했는데, UI에 있는 그리드기능이나 함수는 

전부 복사되지 않더라구요


이렇게 새로 그리드를 할당해서 사용할 수없나요?



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

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: 그리드를 스크립트로 생성하고 데이터 건을 동적으로 바인딩 할 수있을까요?

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

페이지 정보

작성자 GCK루시 작성일 2021-08-30 14:45 댓글 0건

본문

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


문의 주셨던 내용에 대해서 정리하여 답변 드립니다.


1. formatItem에서  setCellData 설정 문의

=>  Wijmo setCellData의 경우, 해당 메서드가 호출되면서 셀의 value 편집하는 과정에 dataType이 맞지 않는 경우, 값이 입력되는 것을 방지하여 해당 현상이 나타나는 것으로추측됩니다.


셀 편집과 관련하여 대체 방안으로 이전에 말씀 드린 것과 같이 해당 요소의 HTML까지 가져오거나 설정할 수 있는 innerHTML 대신 해당 노드가 가지고 있는 텍스트 값을 가져오는 textContent를 이용하여 값을 설정해보시길 바랍니다. 아래 코드를 참고하여 주시길 바랍니다.

    initializeGrid(flex) {
        flex.formatItem.addHandler((s, e) => {
            if (e.panel == s.cells) {
            let col = s.columns[e.col];
               if(col.header ==="Stocks" && e.row%2===0){
                        e.cell.textContent = "-"
               }
            }
          })
        };


추가적으로 cellTemplate의 삼항연산자로 아래와 같이 값을 설정할 수 있습니다.


function getDeeperColumnGroups() {
return [
    { binding: 'name', header: 'Name', width: 150 },
    { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
    { header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: [
        { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80, cellTemplate: (ctx) =>{ return test(ctx)}},
        ] },
   
   ];
}


function test(ctx){
    return ctx.value === -999 ? "-":ctx.value;
}


[CellTemplate을 이용하여 사용자 정의 컨텐츠 만들기]

cellTemplate과 관련된 블로그 글을 공유 드리오니 참고 부탁 드립니다. 


2. 셀의 데이터타입 지정방법 

=> 특정 셀의 dataType 설정 기능 지원과 관련하여 본사 개발팀과 함께 이야기해본 결과, 아쉽게도 해당 기능에 대한 지원 계획은 별도로 없으며 이는 FlexGrid 객체 모델에서 구현에 제한이 있어 어렵다는 것으로 확인 되었습니다. 다만, 말씀하신 특정 셀의 dataType 문제와 관련하여 정확한 시나리오 및 결과를 공유해주신다면 해결 방법이 있는지 확인 후, 도와 드릴 수 있도록 하겠습니다. 


3. 체크박스 병합 처리 문제

=> 문의 주신 이슈의 경우, 확인해본 결과, 안타깝게도 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 아래 코드를 다시 한 번 적용을 해보시고 지속적으로 문제가 발생하시다면 저희 쪽으로 재현 및 디버깅 할 수 있는 샘플을 공유해주시길 바랍니다. 공유해주신 코드를 바탕으로 원인 파악 후, 답변 드릴 수 있도록 하겠습니다.


<FlexGrid
         (...)
          mergeManager={new RestrictedMergeManager()}
        >
(...)
class RestrictedMergeManager extends wjGrid.MergeManager {
  getMergedRange(p, r, c, clip = true) {
    //
    if (p.cellType == wjGrid.CellType.RowHeader) {
      let rng = this.getMergedRange(p.grid.cells, r, 1, clip);
      let eaderCellRange = new wjGrid.CellRange(r, c);

      eaderCellRange.row = rng.row;
      eaderCellRange.row2 = rng.row2;

      return eaderCellRange;
    }
    // create basic cell range
    var rng = null;
    //
    // start with single cell
    rng = new wjGrid.CellRange(r, c);
    var pcol = c > 0 ? c - 1 : c;
    //
    // get reference values to use for merging
    var val = p.getCellData(r, c, false);
    var pval = p.getCellData(r, pcol, false);
    //
    // expand up
    while (
      rng.row > 0 &&
      p.getCellData(rng.row - 1, c, false) == val &&
      p.getCellData(rng.row - 1, pcol, false) == pval
    ) {
      rng.row--;
    }
    //
    // expand down
    while (
      rng.row2 < p.rows.length - 1 &&
      p.getCellData(rng.row2 + 1, c, false) == val &&
      p.getCellData(rng.row2 + 1, pcol, false) == pval
    ) {
      rng.row2++;
    }
    //
    // don't bother with single-cell ranges
    if (rng.isSingleCell) {
      rng = null;
    }
    //
    // done
    return rng;
  }
}


4.동적으로 바인딩 방법 문의

=> 해당 문의는 현재 확인 중에 있으며 업데이트 되는 대로 안내 드리도록 하겠습니다. 답변이 늦어지는 점 죄송합니다.


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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다

댓글목록

등록된 댓글이 없습니다.

ReactJS Re: 그리드를 스크립트로 생성하고 데이터 건을 동적으로 바인딩 할 수있을까요?

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

페이지 정보

작성자 GCK루시 작성일 2021-08-31 17:51 댓글 0건

본문

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


이전에 답변드리지 못한 동적으로 데이터 바인딩 문의에 답변 드립니다.

본사 개발팀과 함께 확인해본 결과, 아쉽게도 FlexGrid는 호스트 요소 없이 생성될 수 없다고 합니다. 대신에 CSS를 이용하여 요소를 숨김처리를 해보시길 바랍니다. 아래 간단한 코드를 공유 드리오니 업무에 참고 하시길 바랍니다.


html

<div id="theGrid"></div>

js

const grid = new FlexGrid("#theGrid");

css

#theGrid.wj-flexgrid {
     display: none;
}


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


감사합니다. 

그레이프시티 드림 


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