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

트리 그리드의 Cell Template 사용 방법 문의 > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론

VueJS 트리 그리드의 Cell Template 사용 방법 문의

페이지 정보

작성자 MyungGyu
프로필 보기 쪽지 보내기
작성일 2022-05-09 10:14 조회 1,614회 댓글 2건
제품 버전 : 5.20213.824
컨트롤 이름 : WjFlexGrid, WjFlexGridCellTemplate

본문

특정 컬럼에 cellTemplate을 설정(바인딩 되어 있는 값을 15로 가정)


설정된 cellTemplate

function initialized(s) {
  s.columns.at(0).cellTemplate = function (ctx) {
    return '이미지' + ctx.text;
  }
}


1. 자식이 없는 경우: 위의 cellTemplate에 맞게 렌더링 => 이미지15

  => Row

2. 자식이 있는 경우: 위의 cellTemplate은 무시, 값만 렌더링 => 15

  => GroupRow


위의 두 경우 모두 적용되는 cellTemplate 설정 방법을 알고 싶습니다.


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

댓글목록

GCK루시님의 댓글

GCK루시
프로필 보기 쪽지 보내기
작성일

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

해당 문의 사항에 대해서 확인 중에 있으며 업데이트 되는 대로 안내 드릴 수 있도록 하겠습니다.
답변이 지연되는 점 죄송 드립니다.

감사합니다.
그레이프시티 드림

삭제된 댓글의 댓글

MyungGyu
프로필 보기 쪽지 보내기
작성일

삭제된 댓글 입니다.

2 답변

VueJS Re: 트리 그리드의 Cell Template 사용 방법 문의

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2022-05-16 14:16 댓글 1건

본문

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


먼저 문의 답변이 지연된 점 죄송 드리며 TreeGrid에서 cellTemplate 사용에 대해서 안내 드립니다.

TreeGrid의 경우, FlexGrid의 확장이며 아래 코드와 같이 초기화 이벤트 내에서 열에 접근하여 설정 시, 열의 그룹화가 되지 않은(child가 없는 경우) 셀에 대해서만 포맷이 설정되는 것을 확인 하실 수 있습니다.


grid.columns[0].cellTemplate = function (ctx) {
   return "image " + ctx.text;
};


추가적으로 Vue에서 첫 번째 열에 cellTemplates를 적용하려는 경우 cellType="GroupHeader"를 사용하고 나머지 열에 대해서는 cellType="Group"로 설정 후, 포맷팅하시면 되십니다.


관련하여 아래 샘플을 공유 드리오니 참고 부탁 드립니다.


 


- WjFlexGridCellTemplate : https://demo.grapecity.co.kr/wijmo/api/modules/wijmo_vue2_grid.html#wjflexgridcelltemplate


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


감사합니다. 

그레이프시티 드림 

댓글목록

MyungGyu님의 댓글

MyungGyu
프로필 보기 쪽지 보내기
작성일

안녕하세요. 답변 감사합니다.
위의 공유해주신 코드에서 사용한 WjFlexGridCellTemplate을 사용하면 자식이 있는 데이터에 표기되는 화살표(wj-elem-collapse)가 사라지게 됩니다.
화살표(wj-elem-collapse)는 유지하고 텍스트만 변경할 수 있는 방법은 없을까요?

VueJS Re: 트리 그리드의 Cell Template 사용 방법 문의

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

페이지 정보

작성자 GCK루시
프로필 보기 쪽지 보내기
작성일 2022-05-18 17:23 댓글 0건

본문

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


만일 CellTemplate를 이용하여 GroupHeader를 커스터마이징을 하신 경우, 아래 코드와 같이 button 및 span 태그를 추가하여 collapse/expand 아이콘을 추가하여 사용하시기 바랍니다.  

<wj-flex-grid-column binding="name" header="Name" :width="200">
        <wj-flex-grid-cell-template cellType="GroupHeader" v-slot="cell">
          <button class="wj-btn wj-btn-glyph wj-elem-collapse">
            <span class="wj-glyph-right" v-if="cell.row.isCollapsed"></span>
            <span
              class="wj-glyph-down-right"
              v-if="!cell.row.isCollapsed"
            ></span>
          </button>
          {{ cell.item.name }}
        </wj-flex-grid-cell-template>
</wj-flex-grid-column>


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


감사합니다. 

그레이프시티 드림 

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

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