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

FlexGrid cellTemplate 글 잘림현상 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS FlexGrid cellTemplate 글 잘림현상

페이지 정보

작성자 김로치 작성일 2022-11-21 19:33 조회 937회 댓글 3건
제품 버전 : 5.20211.794
컨트롤 이름 : cellTemplate

본문

안녕하세요 FlexGrid 컬럼에 cellTemplate 속성으로 a태그의 이미지를 사용중입니다


아래의 캡처처럼 글이 너무 길시 ... 이후에 이미지가 아래로 내려옵니다 해당현상 조치 가능할까요 ?


 

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

댓글목록

GCK다이애나님의 댓글

GCK다이애나 작성일

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

문의 주신 이슈와 관련하여 문의 글에서 이슈 상황에 대한 캡처본이 확인이 되지 않는 상황입니다.
이슈 상황에 대한 캡처본을 글에 추가 혹은 첨부하여 회신 부탁 드립니다.
캡처본을 전달해 주시면 확인 후 답변 드릴 수 있도록 하겠습니다.

감사합니다.

그레이프시티 드림

김로치님의 댓글

김로치 작성일

안녕하세요 요청하신 캡쳐본 첨부합니다.


GCK다이애나님의 댓글

GCK다이애나 작성일

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

먼저 캡처본 전달에 감사드립니다.
문의 주신 내용에 대해 현재 확인 중에 있으며 확인이 지연되고 있습니다.
확인이 완료되는 대로 답변 드리도록 하겠습니다.
답변이 지연되어 죄송합니다.

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

3 답변

PureJS Re: FlexGrid cellTemplate 글 잘림현상

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

페이지 정보

작성자 GCK다이애나 작성일 2022-12-12 15:50 댓글 0건

본문

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


문의 주신 이슈에 대해 아래와 같이 구현하였으나 안타깝게도 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다. 

 [사용 코드]

 var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
    columns: [
      {
        header: 'Country', binding: 'country', width:120,
        cellTemplate: '<a>text text text text text text text <img src="https://demo.grapecity.co.kr/wijmo/learn-wijmo/kr/sample/Grid/CustomCells/CellTemplates/Overview/purejs/resources/${item.country}.png"/></a>'
      }
    ],
  });

 [구현 결과]

8bebeff60ba723cdfd9232aa0f7f9b4d_1670827708_2443.gif
 

관련하여 저희 쪽으로 재현 가능한 샘플을 공유해주신다면 재현 및 디버깅 후, 답변 드릴 수 있도록 하겠습니다. 

추가적으로 이슈가 발생한 그리드에 별도로 적용한 CSS 스타일 속성이 있는 경우, 해당 내용에 대해 확인 후 함께 전달 부탁 드립니다.


감사합니다.

그레이프시티드림

댓글목록

등록된 댓글이 없습니다.

PureJS Re: FlexGrid cellTemplate 글 잘림현상

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

페이지 정보

작성자 김로치 작성일 2022-12-15 10:20 댓글 0건

본문

첨부파일

답변 감사합니다 해당 부분 소스 전달 드리며, 아이콘 부분의 필요정보 첨부하여 같이 보내드립니다.


확인 후 답변 부탁드립니다.


감사합니다.


,{ binding: 'BANK_NAME', header: '금융기관', width: '20*', align: "left", isRequired: true
, cellTemplate: '\${text} <a href="javascript:new Function(open_bank_pop('+"save21Data"+'))" style="float: right"><i class="icon-search4 icon-0x"></i></a>'
}

댓글목록

등록된 댓글이 없습니다.

PureJS Re: FlexGrid cellTemplate 글 잘림현상

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

페이지 정보

작성자 GCK다이애나 작성일 2022-12-16 08:27 댓글 0건

본문

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


문의 주신 특정 열의 셀 텍스트가 긴 경우, cellTemplate 속성을 통해 생성된 HTML 요소가 하단으로 내려가는 현상에 대해 답변 드립니다.

FlexGrid 는 기본적으로 콘텐츠에 맞게 셀의 크기를 조정합니다. 해당 현상은 cellTemplate 속성을 통해 특정 열의 셀에 HTML 요소를 추가하는 경우, 추가된 HTML 요소 크기에 맞게 셀의 크기가 조정되지 않아 나타나는 현상으로 보입니다.

셀 내부의 텍스트 우측에 cellTemplate 속성을 통해 추가된 HTML 요소를 표시하기 위해 아래 코드와 같이 autoSizeColumn 메서드를 이용하여 열의 셀 너비를 조정해 보시기 바랍니다.

  let columnIndex = 0; // cellTemplate 속성을 통해 HTML 요소가 추가된 열의 인덱스
  let extraSpace = 15; // 셀의 추가 너비
  theGrid.autoSizeColumn(columnIndex,false,extraSpace);

이와 관련된 데모 및 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- 열 크기 자동 조정 데모

- autoSizeColumn API 문서


만일, cellTemplate 속성을 통해 HTML 요소가 추가된 열 셀 너비를 특정 값으로 지정한 상태로 셀에 HTML 요소를 표시하고 싶으시다면 아래의 코드와 같이 HTML 요소의 style 속성을 지정해 보시기 바랍니다.

 var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
    columns: [
      {
        header: 'Country', binding: 'country', align: "left", width:120,
        cellTemplate: '${text} <a style="float: right"><i class="fa-solid fa-magnifying-glass" style=" position: absolute; right: 5px; top:5px;"></i></a>'
      },
  });


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


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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