RealGrid2 API
Interface
CellRenderer

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

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

Properties

PropertyTypeDescription
clickOnlyFocusedCellbooleantrue이면 focus된 셀 또는 focus가 이동할수 있는 셀인 경우에만 click이벤트가 발생하도록 한다.
showTooltipboolean툴팁 표시 여부
tooltipEllipsisOnlybooleanellipsis상태인 셀에서만 툴팁 표시 여부
typestring렌더러의 종류

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
}

Properties Desc

clickOnlyFocusedCell

true이면 focus된 셀 또는 focus가 이동할수 있는 셀인 경우에만 click이벤트가 발생하도록 한다.

Type - boolean

Remarks:

GridBase.onCurrentChanging 이벤트에서 false를 return하는 경우 check, link등의 기본동작이 실행되는것을 방지하기위해 사용.


showTooltip

툴팁 표시 여부

Type - boolean


tooltipEllipsisOnly

ellipsis상태인 셀에서만 툴팁 표시 여부

Type - boolean


type

렌더러의 종류

Type - string

Remarks:

TextCellRenderer: 'text'

BarCellRenderer: 'bar'

ImageCellRenderer: 'image'

IconCellRenderer: 'icon'

CheckCellRenderer: 'check'

ButtonCellRenderer: 'button'

ShapeCellRenderer: 'shape'

LinkCellRenderer: 'link'

SignalBarCellRenderer: 'signalbar'

Code39CellRenderer: 'code39'

Code128CellRenderer: 'code128'

SeriesTextCellRenderer: 'series'

SparkLineRenderer: 'sparkline'

SparkColumnRenderer: 'sparkcolumn'

SparkWinLossRenderer: 'sparkswinloss'

TemplateCellRenderer: 'template'