Cellrenderer

셀 렌더러들의 기반 모델

Signature:

export interface CellRenderer

Remarks

데이터 셀들의 값을 그리드에 표시하기 위한 장치이다.

CellRenderer 의 모든 프로퍼티는 이를 상속한 클래스에서만 호출 / 설정할 수 있다. 아래 목록을 참조할 것.

이전 버전의 셀 렌더러는 기본적으로 컬럼에서 생성되는 스타일 정보를 이용해서 렌더링하지만, 2.0 부터는 css style class 로 적용된다.

각각의 컬럼에 셀렌더러의 종류와 속성들을 지정한다.

셀 렌더러 별로 지정할 수 있는 속성이 있으며, DataColumn 에 지정하지 않을 시 TextCellRenderer 가 기본으로 설정된다.

또, 오브젝트 형태일 때 type 속성을 column.renderer 에 문자열 형태로 지정 가능하다.

[목록]

TextCellRenderer: 기본 텍스트 렌더러

BarCellRenderer: 바 렌더러

ImageCellRenderer: 이미지 렌더러

IconCellRenderer: 아이콘 렌더러

CheckCellRenderer: 체크 셀 렌더러

ButtonCellRenderer: 버튼 렌더러

ShapeCellRenderer: 도형 렌더러

LinkCellRenderer: 링크 셀 렌더러

SignalBarCellRenderer: 시그널 바 렌더러

Code39CellRenderer: 바코드 렌더러

Code128CellRenderer: 바코드 렌더러

SeriesTextCellRenderer: 시리즈 텍스트 렌더러

SparkLineRenderer: 시리즈 스파크 라인 렌더러

SparkColumnRenderer: 시리즈 컬럼 렌더러

SparkWinLossRenderer: 시리즈 윈 로스 렌더러

TemplateCellRenderer: 템플릿 렌더러

Example

// string type
column.renderer = "text"
 
// object type
column.renderer = { type: "text", showTooltip: true}

Events

Property	Type	Description
ariaLabelCallback	GetAriaLabelCallback	aria-label을 직접 설정할경우 사용하는 콜백

Properties

Property	Type	Description
clickOnlyFocusedCell	boolean	`true`이면 focus된 셀 또는 focus가 이동할수 있는 셀인 경우에만 click이벤트가 발생하도록 한다.
showTooltip	boolean	툴팁 표시 여부
tooltipEllipsisOnly	boolean	ellipsis상태인 셀에서만 툴팁 표시 여부
type	string	렌더러의 종류

Events Desc

ariaLabelCallback

aria-label을 직접 설정할경우 사용하는 콜백

Type - GetAriaLabelCallback

Remarks:

스크린 리더가 셀의 정보를 읽을때 사용할 문자열을 설정한다.

GetAriaLabelCallback 의 형식을 따른다.

[프로퍼티 목록]

grid - GridBase 컨트롤

model - 그리드의 셀

Example:

const f = function(grid, model) {
     var s = model.value;
     var date = grid.getValue(model.item.index, "date")
     s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " 신규" : "";
     return s;
}
 
column.renderer = {
     type: 'text',
     ariaLabelCallback: f
}