RealGrid2 API
Interface
DisplayOptions

DisplayOptions

그리드 수준에서 관리되는 표시 정보들에 대한 설정 모델

Signature:

export interface DisplayOptions 

Remarks

그리드 에서 옵션으로 설정할 때는 필요한 정보만 넣으면 된다.

Example

grid.setDisplayOptions({rowResizable: true});

Events

PropertyTypeDescription
rowBlockCallbackRowBlockCallback사용자 지정 rowBlockType 을 설정하기 위한 콜백
scrollMessageCallbackScrollMessageCallbackliveScrollfalse일 때 스크롤 위치를 알려주는 view에 표시되는 메세지를 반환하는 콜백

Properties

PropertyTypeDescription
autoClearHeightsbooleanrowHeight 속성이 변경될 때 개별 아이템마다 설정된 높이를 삭제할 지 여부
baseZindexnumbereditor / editorButton 의 zIndex를 설정한다.
columnMovableboolean컬럼 위치 변경 가능 여부
columnResizableboolean컬럼 너비 변경 가능 여부
defaultColumnWidthnumber컬럼 너비의 기본값
eachRowResizableboolean각 행 높이 조절 가능 여부
editItemMergingbooleanMerged Row Grouping 또는 Cell Merging상태에서 셀 편집시 편집 중인 행의 merge 여부. true이면 merge상태를 유지한다.
emptyMessagestring그리드에 표시되는 데이터 행이 한 건도 없을 때 표시되는 메세지
fitStyleGridFitStyle그리드의 너비에 맞춰 컬럼 너비를 조정하는지에 대한 양식
fitStyleIncludeFixedbooleanfitStyle적용시 fixed도 영역도 포함할지 여부.
focusTypeFocusTypefocus의 형태
focusVisiblebooleanfocus의 보임 여부
groupFocusLevelnumbergroupFocusVisible이 true일때 표시될 groupLayout을 지정한다.
groupFocusVisiblebooleanfocus된 셀이 그룹layout의 하위 셀일때 그룹layout에 focus를 표시한다.
hintDelaynumber툴팁 지연 시간
horzPageScrollboolean키보드로 컬럼 이동시 page단위 스크롤
hscrollBarboolean수평 스크롤 바 표시 여부
hscrollDurationnumber수평 스크롤시 tooltip 표시 지연 시간
liveScrollboolean스크롤바의 track-thumb을 이용한 스크롤시 즉시 스크롤 여부
maxRowHeightnumber행 최대 높이
minCellWidthnumber셀 최소 너비
minRowHeightnumber행 최소 높이
minTableRowHeightnumberTable 행 최소 높이
popupDropdownCountnumber팝업이나 컨텍스트 메뉴에 한 화면에 표시되는 목록들의 개수
refCalcHeightsbooleanrowHeight-1일때 그리드 스크롤시 표시되고 있는 행의 높이는 다시 찾지 않고 계산된 높이를 사용한다.
refreshModeRefreshMode그리드를 다시 그릴 때의 모드
remergeWhenColumnMovedboolean컬럼 위치가 변경됐을 때 병합을 다시 시도할 지 여부.
rightClickableboolean마우스 오른쪽 버튼 사용 가능 여부
rowBlockTypeRowMaskType행 선택 시 마스크 종류
rowChangeDelaynumber데이터 행 위치 변경의 지연 시간
rowFocusTypeRowMaskTypefocus 된 행의 마스크 종류
rowHeightnumber행 높이
rowHoverTypeRowMaskType행 hover 시 마스크 종류
rowResizableboolean전체적인 행 높이 조절 가능 여부
scrollDurationnumber수직 스크롤시 tooltip 표시 지연 시간
selectAndImmediateDragbooleantrue이면 셀을 선택한 후 바로 drag&drop 모드로 변경한다.
selectAtSingleRowbooleanDisplayOptions.selectionStyleSelectionStyle.BLOCK 이거나 SelectionStyle.GROUP일 때 여러행 선택 가능 여부
selectionDisplaySelectionDisplay선택 영역의 디스플레이
selectionModeSelectionMode선택 영역의 모드
selectionStyleSelectionStyle선택 영역의 스타일
showChangeMarkerboolean마커 변경을 보여줄지에 대한 여부
showEmptyMessageboolean그리드에 표시되는 데이터 행이 한 건도 없을 때 메시지 표시 여부
showEmptyTooltipboolean데이터와 무관하게 툴팁을 보여줄 건지에 대한 여부
showInnerFocusbooleanMerged Cell에서 개별 셀 영역 표시 여부
showNativeEditButtonbooleanNative 드랍다운 편집기(date, list)일 때 셀 우측에 edit button을 표시할 것인 지 여부.
showTooltipboolean툴팁 표시여부
syncGridHeightSyncGridHeightdata가 모두 화면에 보이도록 그리드 컨테이너의 높이를 변경한다.
toastZIndexnumber표시되는 Toast 창의 zIndex 지정
tooltipEllipsisOnlybooleanellipsis상태인 셀의 툴팁 표시여부
useAlternateRowStyleboolean짝수행의 className에 "rg-alternate-row" 추가를 설정한다.
useFocusClassbooleanfocus된 셀과 row의 class명을 설정한다.
vscrollBarboolean수직 스크롤 바 표시 여부
watchDisplayChangebooleancontainer의 display가 변경되는 경우 자동으로 화면을 갱신
wheelAccelDelaynumber수직 스크롤 시 가속을 위한 최소 시간
wheelAccelScrollnumber | stringwheelAccelDelay 만큼이 지연 되었을 경우, 해당 속성 만큼 스크롤을 가속한다.
wheelDeltaYnumbertouchPad를 이용한 스크롤시 민감도를 조정한다.
wheelEnabledboolean휠 가능 여부
wheelEventPropagateboolean그리드 내 발생한 휠 이벤트 외부 방출 여부
wheelScrollHorznumber휠로 수평 스크롤 했을 때 위치 이동 변동 값 (속도)
wheelScrollLinesnumber한 번에 스크롤 되는 행 갯수

Events Desc

rowBlockCallback

사용자 지정 rowBlockType 을 설정하기 위한 콜백

Example:

const f = function(grid, itemIndex) {
    let billNo;
    let ds = grid.getDataSource();
    let fld = ds.getFieldIndex("text1");
    let dataRow = grid.getDataRow(itemIndex);
    if (dataRow >= 0) {
        billNo = ds.getValue(dataRow, fld);
    } else {
        billNo = null;
    }
 
    let top = Math.min(grid.getTopItem(), itemIndex);
    let full = top + grid.fullItemCount();
    let startNo = top + full;
    let endNo = -1;
    let check1 = false;
 
    for (let i = top; i <= full; i++) {
        dataRow = grid.getDataRow(i);
        if (dataRow < 0) {
            continue;
        }
 
        let cBillNo = ds.getValue(dataRow, fld);
 
        if (cBillNo === billNo) {
            startNo = Math.min(startNo, i), endNo = Math.max(endNo, i);
            check1 = true;
        } else {
            if (check1) {
                break;
            }
        }
    };
 
    if (startNo <= endNo && endNo > 0) {
        console.log(startNo)
        console.log(endNo);
        return { start: startNo, end: endNo };
    }
}
 
grid.setDisplayOptions = {
     rowBlockType: 'row,
     rowBlockCallback: f
}

scrollMessageCallback

liveScrollfalse일 때 스크롤 위치를 알려주는 view에 표시되는 메세지를 반환하는 콜백

Remarks:

ScrollMessageCallback 의 형식이다.

Example:

gridView.displayOptions.scrollMessageCallback = function(grid, vertical, itemIndex) {
    var msg = grid.getValue(itemIndex, "area3name");
    return "<span style='color:blue;font-size:20px'>itemIndex = " + msg+"</span>";
}

Properties Desc

autoClearHeights

rowHeight 속성이 변경될 때 개별 아이템마다 설정된 높이를 삭제할 지 여부


baseZindex

editor / editorButton 의 zIndex를 설정한다.


columnMovable

컬럼 위치 변경 가능 여부

Remarks:

헤더 셀을 드래그하여 변경 가능


columnResizable

컬럼 너비 변경 가능 여부

Remarks:

헤더 셀 우측을 드래그하여 변경 가능


defaultColumnWidth

컬럼 너비의 기본값


eachRowResizable

각 행 높이 조절 가능 여부

Remarks:

셀 아래쪽을 드래그하면 조정 할 수 있다. DisplayOptions.rowResizabletrue여야 한다.


editItemMerging

Merged Row Grouping 또는 Cell Merging상태에서 셀 편집시 편집 중인 행의 merge 여부. true이면 merge상태를 유지한다.


emptyMessage

그리드에 표시되는 데이터 행이 한 건도 없을 때 표시되는 메세지


fitStyle

그리드의 너비에 맞춰 컬럼 너비를 조정하는지에 대한 양식


fitStyleIncludeFixed

fitStyle적용시 fixed도 영역도 포함할지 여부.

Remarks:

DisplayOptions.fitStyleeven 또는 evenFill로 설정하면 고정영역에 있는 컬럼들도 너비를 변경한다.

GridFitStyle.FILL은 적용되지 않는다.


focusType

focus의 형태


focusVisible

focus의 보임 여부


groupFocusLevel

groupFocusVisible이 true일때 표시될 groupLayout을 지정한다.

Remarks:

-1: 최상위Layout이 선택 0보다 큰값이면 입력된 level에 해당하는 groupLayout이 선택된다.


groupFocusVisible

focus된 셀이 그룹layout의 하위 셀일때 그룹layout에 focus를 표시한다.

Remarks:

groupLayout은 groupFocusLevel에 의해 결정된다.


hintDelay

툴팁 지연 시간


horzPageScroll

키보드로 컬럼 이동시 page단위 스크롤


hscrollBar

수평 스크롤 바 표시 여부


hscrollDuration

수평 스크롤시 tooltip 표시 지연 시간

Remarks:

스크롤바의 track-thumb를 이용한 스크롤시 tooltip의 발생을 지연시킨다.

liveScrollfalse인 경우만 적용된다.


liveScroll

스크롤바의 track-thumb을 이용한 스크롤시 즉시 스크롤 여부

Remarks:

false이면 마우스버튼을 놓았을때 스크롤한다.


maxRowHeight

행 최대 높이


minCellWidth

셀 최소 너비


minRowHeight

행 최소 높이


minTableRowHeight

Table 행 최소 높이


popupDropdownCount

팝업이나 컨텍스트 메뉴에 한 화면에 표시되는 목록들의 개수


refCalcHeights

rowHeight-1일때 그리드 스크롤시 표시되고 있는 행의 높이는 다시 찾지 않고 계산된 높이를 사용한다.

Remarks:

false로 설정하면 행이 화면에 표시될때 다시 높이를 계산한다. 화면에 많은 행이 표시되면 속도가 느려질수 있다.


refreshMode

그리드를 다시 그릴 때의 모드


remergeWhenColumnMoved

컬럼 위치가 변경됐을 때 병합을 다시 시도할 지 여부.


rightClickable

마우스 오른쪽 버튼 사용 가능 여부


rowBlockType

행 선택 시 마스크 종류

Remarks:

행 및 셀 선택시 행 선택 영역 표시를 보여준다.


rowChangeDelay

데이터 행 위치 변경의 지연 시간

Remarks:

onCurrentRowChanged 를 지연시킨다.


rowFocusType

focus 된 행의 마스크 종류


rowHeight

행 높이

Remarks:

0 이면 그리드의 폰트와 Padding 스타일을 고려해서 적절한 값으로 행들의 높이를 찾는다. 0 보다 큰 값이면 지정한 값이 행들의 높이가 된다. -1 이면 셀의 내용에 따라 행의 높이를 변경한다.


rowHoverType

행 hover 시 마스크 종류

Remarks:

hovering 시 행 선택 영역 표시를 보여준다.


rowResizable

전체적인 행 높이 조절 가능 여부

Remarks:

첫 번째 컬럼의 셀 아래쪽이나 첫 번째 행의 인디케이터의 아래 쪽을 드래그하면 조정 할 수 있다.


scrollDuration

수직 스크롤시 tooltip 표시 지연 시간

Remarks:

스크롤바의 track-thumb를 이용한 스크롤시 tooltip의 발생을 지연시킨다.

liveScrollfalse인 경우만 적용된다.


selectAndImmediateDrag

true이면 셀을 선택한 후 바로 drag&drop 모드로 변경한다.

Remarks:

DisplayOptions.selectionStylecolumn인 경우는 적용되지 않는다.


selectAtSingleRow

DisplayOptions.selectionStyleSelectionStyle.BLOCK 이거나 SelectionStyle.GROUP일 때 여러행 선택 가능 여부

Remarks:

false이면 한행에서만 Selection이 가능하다.


selectionDisplay

선택 영역의 디스플레이

Remarks:

자세한 설명은 SelectionDisplay 참조


selectionMode

선택 영역의 모드

Remarks:

다중선택인경우 rowMove, copy를 지원하지 않는다.


selectionStyle

선택 영역의 스타일

Remarks:

자세한 설명은 SelectionStyle 참조


showChangeMarker

마커 변경을 보여줄지에 대한 여부


showEmptyMessage

그리드에 표시되는 데이터 행이 한 건도 없을 때 메시지 표시 여부


showEmptyTooltip

데이터와 무관하게 툴팁을 보여줄 건지에 대한 여부

Remarks:

trueonShowTooltip() 발생


showInnerFocus

Merged Cell에서 개별 셀 영역 표시 여부


showNativeEditButton

Native 드랍다운 편집기(date, list)일 때 셀 우측에 edit button을 표시할 것인 지 여부.


showTooltip

툴팁 표시여부

Remarks:

true로 설정하면 컬럼에 showTooltip을 설정하지 않아도 tooltip이 표시된다. renderer.showTooltipfalse인 경우 표시하지 않는다.


syncGridHeight

data가 모두 화면에 보이도록 그리드 컨테이너의 높이를 변경한다.

Remarks:

표시되는 data의 건수가 많은 경우 속도가 느려질수 있다. 그리드가 생성되기 전에 그리드 컨테이너의 높이가 지정되어야 원래 크기로 돌아갈수 있다.

rowHeight가 -1인경우 적용되지 않는다.


toastZIndex

표시되는 Toast 창의 zIndex 지정


tooltipEllipsisOnly

ellipsis상태인 셀의 툴팁 표시여부

Remarks:

true로 설정하면 ellipsis상태인 셀만 tooltip이 표시된다. renderer.tooltipEllipsisOnlyfalse인 경우 해당 컬럼은 모든 셀에 tooltip이 표시된다.


useAlternateRowStyle

짝수행의 className에 "rg-alternate-row" 추가를 설정한다.


useFocusClass

focus된 셀과 row의 class명을 설정한다.

Remarks:

true이면 focus된 셀의 className에 rg-focused-cell을 추가한다. Row의 className에 rg-focused-row를 추가한다.


vscrollBar

수직 스크롤 바 표시 여부


watchDisplayChange

container의 display가 변경되는 경우 자동으로 화면을 갱신

Remarks:

그리드 상위element의 display가 변경되면 자동으로 화면을 갱신한다.


wheelAccelDelay

수직 스크롤 시 가속을 위한 최소 시간

Remarks:

wheelAccelScroll 과 함께 사용한다.


wheelAccelScroll

wheelAccelDelay 만큼이 지연 되었을 경우, 해당 속성 만큼 스크롤을 가속한다.

Remarks:

숫자 - 아이템 개수

문자열 - 백분율 ex) '50%'


wheelDeltaY

touchPad를 이용한 스크롤시 민감도를 조정한다.

Remarks:

touchPad의 경우 약간의 움직임만 있어도 스크롤되던것을 지정된 숫자만큼의 움직임이 있어야 스크롤되도록 한다.

10 ~ 20 정도의 값이 적당하다.

세로스크롤에만 적용된다.


wheelEnabled

휠 가능 여부


wheelEventPropagate

그리드 내 발생한 휠 이벤트 외부 방출 여부


wheelScrollHorz

휠로 수평 스크롤 했을 때 위치 이동 변동 값 (속도)


wheelScrollLines

한 번에 스크롤 되는 행 갯수