PureJS FlexGrid cellTemplate 글 잘림현상
페이지 정보
작성자 김로치 작성일 2022-11-21 19:33 조회 937회 댓글 3건본문
관련링크
안녕하세요 FlexGrid 컬럼에 cellTemplate 속성으로 a태그의 이미지를 사용중입니다
아래의 캡처처럼 글이 너무 길시 ... 이후에 이미지가 아래로 내려옵니다 해당현상 조치 가능할까요 ?
안녕하세요 FlexGrid 컬럼에 cellTemplate 속성으로 a태그의 이미지를 사용중입니다
아래의 캡처처럼 글이 너무 길시 ... 이후에 이미지가 아래로 내려옵니다 해당현상 조치 가능할까요 ?
안녕하세요 그레이프시티입니다.
문의 주신 이슈에 대해 아래와 같이 구현하였으나 안타깝게도 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다.
[사용 코드]
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>' } ], });
[구현 결과]
관련하여 저희 쪽으로 재현 가능한 샘플을 공유해주신다면 재현 및 디버깅 후, 답변 드릴 수 있도록 하겠습니다.
추가적으로 이슈가 발생한 그리드에 별도로 적용한 CSS 스타일 속성이 있는 경우, 해당 내용에 대해 확인 후 함께 전달 부탁 드립니다.
감사합니다.
그레이프시티드림
등록된 댓글이 없습니다.
답변 감사합니다 해당 부분 소스 전달 드리며, 아이콘 부분의 필요정보 첨부하여 같이 보내드립니다.
확인 후 답변 부탁드립니다.
감사합니다.
,{ 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>'
}
등록된 댓글이 없습니다.
안녕하세요 그레이프시티입니다.
문의 주신 특정 열의 셀 텍스트가 긴 경우, cellTemplate 속성을 통해 생성된 HTML 요소가 하단으로 내려가는 현상에 대해 답변 드립니다.
FlexGrid 는 기본적으로 콘텐츠에 맞게 셀의 크기를 조정합니다. 해당 현상은 cellTemplate 속성을 통해 특정 열의 셀에 HTML 요소를 추가하는 경우, 추가된 HTML 요소 크기에 맞게 셀의 크기가 조정되지 않아 나타나는 현상으로 보입니다.
셀 내부의 텍스트 우측에 cellTemplate 속성을 통해 추가된 HTML 요소를 표시하기 위해 아래 코드와 같이 autoSizeColumn 메서드를 이용하여 열의 셀 너비를 조정해 보시기 바랍니다.
let columnIndex = 0; // cellTemplate 속성을 통해 HTML 요소가 추가된 열의 인덱스 let extraSpace = 15; // 셀의 추가 너비 theGrid.autoSizeColumn(columnIndex,false,extraSpace);
이와 관련된 데모 및 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>' }, });
다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
등록된 댓글이 없습니다.