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

특정 row에서 column cellTemplate 변경 > Q&A | 토론

본문 바로가기

VueJS 특정 row에서 column cellTemplate 변경

페이지 정보

작성자 flexcheck 작성일 2024-01-16 18:11 조회 95회 댓글 0건
제품 버전 : 5.20222.877

본문

버튼 클릭 시 행추가 할 수 있게 설정했습니다.

행추가된 row에만 cellTemplate을 설정하고 싶습니다.

(this.flexGrid.rows.dataItem에 '_added'를 추가해서 추가된 행을 특정하고 있습니다.)


2141227ed754bf16cef531575caa5c3e_1705396038_9362.png
 


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

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: 특정 row에서 column cellTemplate 변경

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-01-17 16:59 댓글 1건

본문

안녕하세요 메시어스입니다.  


FlexGrid column의 cellTemplate을 특정 열에 적용하는 방법과 관련하여 템플릿 리터럴 및 삼항 연산자를 이용하여 새로 추가된 행에 대해서만 스타일링 적용할 수 있습니다. 아래 샘플 및 데모, API 문서를 공유드리오니 참고 부탁 드립니다.


 


- 셀 템플릿(vue) 데모

- cellTemplate API 문서


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


감사합니다.

메시어스 드림


댓글목록

flexcheck님의 댓글

flexcheck 작성일

스타일변경 말고 cellTemplate 자체를 추가하고 싶습니다.

VueJS Re: 특정 row에서 column cellTemplate 변경

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

페이지 정보

작성자 flexcheck 작성일 2024-01-17 17:08 댓글 2건

본문

cellTemplate에 스타일 변경 말고

"cellTemplate": "${text}<button type=\"button\" class=\"btn btn_cell_right btn_icon icon_pencil\" id='buyerDivision_buyer'\"></button>"

이렇게 변경하고 싶습니다.

${text}에서는 버튼에서 가져온 값이 들어갑니다.


 

댓글목록

MESCIUS루시님의 댓글

MESCIUS루시 작성일

안녕하세요 메시어스입니다.

문의하신 내용과 관련하여 정확한 답변을 위해 확인 부탁 드립니다.
버튼에서 가져온 값이 들어온다고 하셨는데 해당 값과 관련된 디테일한 정보 공유 부탁 드립니다.

감사합니다.
메시어스 드림  

flexcheck님의 댓글

flexcheck 작성일

위 예시처럼 'downloads'에 cellTemplate을 적용시킨다면
${text}는 downloads의 값 '123123'이 들어가야 합니다.

VueJS Re: 특정 row에서 column cellTemplate 변경

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-01-19 13:42 댓글 0건

본문

안녕하세요 메시어스입니다.


문의하신 내용은 아래 코드와 같이 Vue의 v-if를 이용하여 구현할 수 있으니 참고 부탁 드립니다. 


      <wj-flex-grid-column
        binding="downloads"
        header="Downloads"
        :isReadOnly="true"
      >
        <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
          <template v-if="cell.item._added">
            {{ cell.item.downloads }}
            <button class="wj-glyph-asterisk"></button>
          </template>
        </wj-flex-grid-cell-template>
      </wj-flex-grid-column>


더불어 아래 이미지와 같이 대댓글로 주시지 않는 경우, 알림이 오지 않아 답변이 지연될 수 있습니다. 따라서 추후에 댓글 회신을 하셔야 하는 경우, 대댓글로 회신주시기 바랍니다.


c0ac7f6c46a3a744f06cb382349a53cb_1705639306_5254.png
 


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


감사합니다.

메시어스 드림


댓글목록

등록된 댓글이 없습니다.

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