FlexGrid CellTemplate을 이용하여 사용자 정의 컨텐츠 만들기
페이지 정보
작성자 GrapeCity
작성일 2021-08-06 14:24 조회 1,951회
댓글 0건
본문
관련링크
이 포스팅에서는 CellTemplate을 이용하여 사용자 정의 컨텐츠를 만드는 방법에 관해 설명합니다.
FlexGrid 컨트롤은 format, dataMap 및 cssClass와 같은 속성을 사용하여 셀 모양을 사용자 정의할 수 있도록 데이터를 표시하고 편집할 수 있습니다. 사용자 정의 셀 콘텐츠를 그리드 셀에 추가하는 전통적인 방법은 formatItem 이벤트를 사용하여 셀의 HTML 콘텐츠를 커스터마이징하는 것이었습니다.
아래 그리드 샘플은 CellTemplate을 이용하여 조건부 서식 및 이미지를 추가하는 방법을 보여주고 있습니다.
실제로 구현된 화면은 아래와 같으며, 상단의 탭을 통해 소스코드를 확인하고 바로 수정해볼 수 있습니다.
기본 데모 튜토리얼 시작하기
먼저 Wijmo 컨트롤을 사용하기 위해 HTML 파일에 레퍼런스를 추가합니다.
<link href="https://cdn.grapecity.com/wijmo/5.20211.781/styles/wijmo.min.css" rel="stylesheet"/> <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> <script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.min.js"/> <script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.input.min.js"/> <script src="https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.grid.min.js"/>
Wijmo 컨트롤을 생성할 'theGrid'라는 id를 가진 div 요소를 HTML 파일에 생성합니다.
<div id="theGrid"></div>
그리드의 인스턴스를 생성 해줍니다.
// 셀 템플릿이 있는 그리드 생성 new wijmo.grid.FlexGrid('#theGrid', { (...) });
columns의 cellTemplate 속성에 span 태그와 함께 원하는 클래스 및 스타일을 지정해줍니다.
// 셀 템플릿이 있는 그리드 생성 new wijmo.grid.FlexGrid('#theGrid', { (...) columns: [ { binding: 'id', header: 'ID', isReadOnly: true, width: '.5*' }, { binding: 'date', header: 'Date', width: '*' }, { binding: 'product', header: 'Product', dataMap: getProducts(), width: '*' }, { binding: 'country', header: 'Country', dataMap: getCountryMap(), width: '*', cellTemplate: '<span class="flag-icon flag-icon-${col.dataMap.getDataItem(value).flag}"></span> ${text}' }, { binding: 'color', header: 'Color', dataMap: getColors(), width: '*', cellTemplate: '<span class="color-tile" style="background:${value}"></span> ${value}' }, { binding: 'value', header: 'Value', format: 'c0', width: '*' }, { binding: 'change', header: 'Change', align: 'center', format: 'p0', width: '*', cellTemplate: '<span class=${value > 0 ? "change-up" : "change-down"}>${value}:p0' }, ], });4-1. cellTemplate 속성을 자세히 보면 각각 열에서 템플릿 리터럴 기능을 통해 템플릿 문자열을 지정할 수 있습니다.
cellTemplate: '<span class="flag-icon flag-icon-${col.dataMap.getDataItem(value).flag}"></span> ${text}'
참고 cellTemplate 을 만드는 데 있어 "함수 기반 cell template"과 "문자열 기반 cell template", 총 2가지 방식을 사용할 수 있습니다.
먼저, 함수 기반 cell template은 문자열 기반 cell template과 비교하여 아래와 같은 장점이 있습니다.
디자인 타임 오류 검사와 command completion을 제공
더 빠른 속도
CSP(cotent-security policy)에 대한 이슈가 없음
문자열 기반 표현식은 아래와 같은 장점이 있습니다.
좀 더 높은 간결성
데이터로 저장하고 런타임에 쉽게 변경 가능
아래는 함수 기반 cell template 과 문자열 기반 cell template의 간단한 예제입니다.
// cellTemplate 문자열을 가진 간단한/기본 렌더링 col.cellTemplate = '${value}:${col.format}'; // cellTemplate 함수를 가진 간단한/기본 렌더링 col.cellTemplate = (ctx: ICellTemplateContext) => >glbz`${ctx.value}:${ctx.col.format}`;
4-2. 또한 cellTemplate에서 삼항연산자를 이용하여 if문 보다 간결한 코드를 작성할 수 있습니다. 아래 코드는 value가 0보다 크면 클래스의 이름을 "change-up"으로 아니면 "change-down"으로 지정하는 코드입니다.
cellTemplate: '<span class=${value > 0 ? "change-up" : "change-down"}>${value}:p0'
그 다음 데이터를 그리드에 바인딩 해주면 cellTemplate로 사용자 정의 셀 컨텐츠가 있는 그리드가 완성됩니다.
// 셀 템플릿이 있는 그리드 생성 new wijmo.grid.FlexGrid('#theGrid', { (...) itemsSource: getData() });
추가적으로 CSS에서 cellTemplate에 설정한 클래스을 이용하여 색깔 등 스타일링을 설정하실 수 있습니다.
.change-up { color: darkgreen; } .change-up:before { content: '\25b2\00a0'; } .change-down { color: darkred; } .change-down:before { content: '\25bc\00a0'; }
이상으로 FlexGrid의 cellTemplate를 이용한 사용자정의 셀을 가진 그리드 생성 튜토리얼을 마무리하겠습니다.
Wijmo FlexGrid 셀의 조건부 형식 또는 이미지 추가와 같은 간단한 작업에서부터 버튼, 등급, 스파크라인, 하이퍼링크와 같은 작업까지 cellTemplate을 통해 구현이 가능하, 이와 관련하여 더 자세히 알아보고 싶으신 경우, 를 확인해 주세요.
댓글목록
등록된 댓글이 없습니다.
