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

FlexGrid에서 헤더 자동 줄바꿈 처리 / 복사 붙여넣기할때 헤더 정보도 복사하기/ 틀고정후 좌측으로 드래그 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS FlexGrid에서 헤더 자동 줄바꿈 처리 / 복사 붙여넣기할때 헤더 정보도 복사하기/ 틀고정후 좌측으로 드래그

페이지 정보

작성자 토끼바람 작성일 2022-06-07 09:37 조회 2,010회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : Flexgrid

본문

3건의 문의 입니다.


1. 그리드 헤더에서 자동 줄바꿈 과 강제적으로 줄바꿈 처리를 할 수있나요?


2. 그리드 데이터 복사를 할 경우 헤더를 포함해서 복사가 가능한지요?


3. 틀고정 후 오른쪽으로 드래그를 할 경우에는 우측으로는 드래그가 되던데 좌측으로는 드래그가 되지 않고

  바로 틀고정정영으로 영역 표시가 된던데 좌측으로 드래그를 했을때 스크롤이 되는지요?



가능한 부분이나 우회하여 개발이 가능한 부분이 있는지 문의합니다.


감사합니다.


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

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: FlexGrid에서 헤더 자동 줄바꿈 처리 / 복사 붙여넣기할때 헤더 정보도 복사하기/ 틀고정후 좌측으로 드래그

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

페이지 정보

작성자 GCK루시 작성일 2022-06-08 13:33 댓글 1건

본문

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


문의 주신 내용에 대한 안내 및 확인 요청 사항이 있어 답글 드립니다..


1. 그리드 헤더에서 자동 줄바꿈 과 강제적으로 줄바꿈 처리를 할 수있나요?

=> 해당 문의의 경우, 동일하게 이전에 문의를 주셔 답변 드렸으며 아래 링크에서 확인 부탁 드립니다.

- 그리드헤더 강제 줄바꿈 문의


2. 그리드 데이터 복사를 할 경우 헤더를 포함해서 복사가 가능한지요?

=> 문의 주신 내용이 헤더에 display되는 string 값을 셀과 함께 같이 복사하고 싶다는 말씀이신지 확인 부탁 드립니다.


3. 틀고정 후 오른쪽으로 드래그를 할 경우에는 우측으로는 드래그가 되던데 좌측으로는 드래그가 되지 않고 바로 틀고정정영으로 영역 표시가 된던데 좌측으로 드래그를 했을때 스크롤이 되는지요?

=> 문의 주신 틀 고정의 경우, frozenColumn 속성을 이용하여 고정된 행을 만드는 경우가 맞는지 확인 부탁 드립니다.


정확한 답변을 드리기 위해 요청 드리며 확인 후 회신 주시면 감사 드리겠습니다.


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


감사합니다. 

그레이프시티 드림 

댓글목록

토끼바람님의 댓글

토끼바람 작성일

2 : 헤더에 display되는 string 값을 셀과 함께 같이 복사하고 싶다 가 맞습니다.
3. frozenColumn 속성을 이용하여 고정된 행을 만드는 경우가 맞습니다.

ReactJS Re: FlexGrid에서 헤더 자동 줄바꿈 처리 / 복사 붙여넣기할때 헤더 정보도 복사하기/ 틀고정후 좌측으로 드래그

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

페이지 정보

작성자 GCK루시 작성일 2022-06-13 16:21 댓글 0건

본문

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


먼저 답변이 지연된 점 죄송 드리며 문의에 대해서 추가적으로 안내 드립니다.


2. 그리드 데이터 복사를 할 경우 헤더를 포함해서 복사가 가능한지요?

=> 기능 구현을 위해서 "copying" 이벤트를 이용하여 헤더 정보를 클립보드 문자열에 추가하면 됩니다. 그리드의 "getClipString" 메서드를 사용하여 선택 내용을 클립보드 형식의 문자열로 가져오고 문자열에 헤더를 추가한 다음 클립보드의 copy 메서드를 사용하여 결과를 클립보드에 배치해주시면 됩니다.


아래 간단한 코드를 확인하여 주시기 바랍니다.

theGrid.copying.addHandler(function(s,e){
    // 클립 텍스트 가져오기
    var text = s.getClipString();

    // 헤더 추가
    var sel = s.selection,
      hdr = '';
    for (var c = sel.leftCol; c <= sel.rightCol; c++) {
      if (hdr) hdr += '\t';
      hdr += s.columns[c].header;
    }
    text = hdr + '\r\n' + text;

    // 클립보드에 텍스트 넣기
    wijmo.Clipboard.copy(text);
    //
    e.cancel = true;
})
  
  theGrid.pasting.addHandler(function(s,e){
    //
    e.cancel = true;
})


3. frozenColumn 속성을 이용하여 고정된 행을 생성하고 좌측 드래그를 통해 스크롤하는 방법

=> 먼저 해당 현상은 FlexGrid 컨트롤에서 디자인 된 결과입니다. 다만 기능을 우회적으로 구현하기 위해서 먼저 FlexGrid 컨트롤의 hostElement에 mousemove 이벤트를 추가해줍니다. 그 다음, 선택 영역이 고정된 열 근처로 이동되었는지 확인 후, scrollIntoView 메서드를 사용하여 수동으로 선택 영역을 이동하시면 됩니다.

아래 샘플 코드를 참고하여 주시기 바랍니다.

flex.hostElement.addEventListener('mousemove', (e) => {
      let hti = ctl.hitTest(e);
      if (hti.panel && hti.panel.cellType == wjcGrid.CellType.Cell) {
        let cellRect = ctl.getCellBoundingRect(hti.row, 0);
        if (
          cellRect.right + 5 >= hti.point.x &&
          ctl.selection.columnSpan >= 5
        ) {
          ctl.scrollIntoView(hti.row, hti.col - 1);
        }
      }
    });


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

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

- copy(clipboard) : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.clipboard.html#copy


API 문서를 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다. 

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.