DisplayOptions

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

Signature:

export interface DisplayOptions 

Remarks

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

Example

grid.setDisplayOptions({rowResizable: true});

Events

Properties

Events Desc

rowBlockCallback

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

Type - RowBlockCallback

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

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

Type - ScrollMessageCallback

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 속성이 변경될 때 개별 아이템마다 설정된 높이를 삭제할 지 여부

Type - boolean

baseZindex

editor / editorButton 의 zIndex를 설정한다.

Type - number

columnMovable

컬럼 위치 변경 가능 여부

Type - boolean

Remarks:

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

columnResizable

컬럼 너비 변경 가능 여부

Type - boolean

Remarks:

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

defaultColumnWidth

컬럼 너비의 기본값

Type - number

eachRowResizable

각 행 높이 조절 가능 여부

Type - boolean

Remarks:

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

editItemMerging

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

Type - boolean

emptyMessage

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

Type - string

fitStyle

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

Type - GridFitStyle

fitStyleIncludeFixed

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

Type - boolean

Remarks:

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

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

focusType

focus의 형태

Type - FocusType

focusVisible

focus의 보임 여부

Type - boolean

groupFocusLevel

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

Type - number

Remarks:

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

groupFocusVisible

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

Type - boolean

Remarks:

groupLayout은 groupFocusLevel에 의해 결정된다.

hintDelay

툴팁 지연 시간

Type - number

horzPageScroll

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

Type - boolean

hscrollBar

수평 스크롤 바 표시 여부

Type - boolean

hscrollDuration

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

Type - number

Remarks:

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

liveScroll이 false인 경우만 적용된다.

liveScroll

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

Type - boolean

Remarks:

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

maxRowHeight

행 최대 높이

Type - number

minCellWidth

셀 최소 너비

Type - number

minRowHeight

행 최소 높이

Type - number

minTableRowHeight

Table 행 최소 높이

Type - number

popupDropdownCount

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

Type - number

popupViewDistance

팝업메뉴와 하위 메뉴의 간격을 지정

Type - number

refCalcHeights

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

Type - boolean

Remarks:

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

refreshMode

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

Type - RefreshMode

remergeWhenColumnMoved

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

Type - boolean

rightClickable

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

Type - boolean

rowBlockType

행 선택 시 마스크 종류

Type - RowMaskType

Remarks:

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

rowChangeDelay

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

Type - number

Remarks:

onCurrentRowChanged 를 지연시킨다.

rowFocusType

focus 된 행의 마스크 종류

Type - RowMaskType

rowHeight

행 높이

Type - number

Remarks:

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

rowHoverType

행 hover 시 마스크 종류

Type - RowMaskType

Remarks:

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

rowResizable

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

Type - boolean

Remarks:

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

scrollDuration

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

Type - number

Remarks:

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

liveScroll이 false인 경우만 적용된다.

selectAndImmediateDrag

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

Type - boolean

Remarks:

DisplayOptions.selectionStyle이 column인 경우는 적용되지 않는다.

selectAtSingleRow

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

Type - boolean

Remarks:

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

selectionDisplay

선택 영역의 디스플레이

Type - SelectionDisplay

Remarks:

자세한 설명은 SelectionDisplay 참조

selectionMode

선택 영역의 모드

Type - SelectionMode

Remarks:

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

selectionStyle

선택 영역의 스타일

Type - SelectionStyle

Remarks:

자세한 설명은 SelectionStyle 참조

showChangeMarker

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

Type - boolean

showEmptyMessage

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

Type - boolean

showEmptyTooltip

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

Type - boolean

Remarks:

true시 onShowTooltip() 발생

showInnerFocus

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

Type - boolean

showNativeEditButton

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

Type - boolean

showTooltip

툴팁 표시여부

Type - boolean

Remarks:

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

syncGridHeight

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

Type - SyncGridHeight

Remarks:

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

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

toastZIndex

표시되는 Toast 창의 zIndex 지정

Type - number

tooltipEllipsisOnly

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

Type - boolean

Remarks:

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

useAlternateRowStyle

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

Type - boolean

useFocusClass

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

Type - boolean

Remarks:

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

vscrollBar

수직 스크롤 바 표시 여부

Type - boolean

watchDisplayChange

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

Type - boolean

Remarks:

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

wheelAccelDelay

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

Type - number

Remarks:

wheelAccelScroll 과 함께 사용한다.

wheelAccelScroll

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

Type - number | string

Remarks:

숫자 - 아이템 개수

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

wheelDeltaY

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

Type - number

Remarks:

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

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

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

wheelEnabled

휠 가능 여부

Type - boolean

wheelEventPropagate

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

Type - boolean

wheelScrollHorz

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

Type - number

wheelScrollLines

한 번에 스크롤 되는 행 갯수

Type - number