DisplayOptions

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

상세 설명

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

예제 코드

grid.setDisplayOptions({rowResizable: true});

프로퍼티 정보

autoClearHeights


autoClearHeights: boolean

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

기본값

true

baseZindex


baseZindex: number

editor / editorButton 의 zIndex를 설정한다.

기본값

2000

columnMovable


columnMovable: boolean

컬럼 위치 변경 가능 여부

상세 설명

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

기본값

true

columnResizable


columnResizable: boolean

컬럼 너비 변경 가능 여부

상세 설명

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

기본값

true

defaultColumnWidth


defaultColumnWidth: number

컬럼 너비의 기본값

기본값

100

eachRowResizable


eachRowResizable: boolean

각 행 높이 조절 가능 여부

상세 설명

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

기본값

false

editItemMerging


editItemMerging: boolean

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

기본값

false

emptyMessage


emptyMessage: string

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

기본값

'이 곳에 표시할 메시지를 DisplayOptions.emptyMessage 속성으로 설정합니다.'

fitStyle


fitStyle: GridFitStyle

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

fitStyleIncludeFixed


fitStyleIncludeFixed: boolean

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

상세 설명

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

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

기본값

false

focusType


focusType: FocusType

focus의 형태

기본값

layer

focusVisible


focusVisible: boolean

focus의 보임 여부

기본값

true

groupFocusLevel


groupFocusLevel: number

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

상세 설명

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

기본값

-1

groupFocusVisible


groupFocusVisible: boolean

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

상세 설명

groupLayout은 groupFocusLevel에 의해 결정된다.

기본값

false

hintDelay


hintDelay: number

툴팁 지연 시간

기본값

0 (ms)

horzPageScroll


horzPageScroll: boolean

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

기본값

false

hscrollBar


hscrollBar: boolean

수평 스크롤 바 표시 여부

기본값

true

hscrollDuration


hscrollDuration: number

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

상세 설명

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

liveScrollfalse인 경우만 적용된다.

기본값

0 (ms)

liveScroll


liveScroll: boolean

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

상세 설명

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

기본값

true

maxRowHeight


maxRowHeight: number

행 최대 높이

기본값

0

minCellWidth


minCellWidth: number

셀 최소 너비

기본값

8

minRowHeight


minRowHeight: number

행 최소 높이

기본값

23

minTableRowHeight


minTableRowHeight: number

Table 행 최소 높이

기본값

23

popupDropdownCount


popupDropdownCount: number

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

기본값

0

refCalcHeights


refCalcHeights: boolean

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

상세 설명

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

기본값

true

refreshMode


refreshMode: RefreshMode

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

기본값

RefreshMode.ALL

remergeWhenColumnMoved


remergeWhenColumnMoved: boolean

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

기본값

true

rightClickable


rightClickable: boolean

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

기본값

true

rowBlockType


rowBlockType: RowMaskType

행 선택 시 마스크 종류

상세 설명

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

rowChangeDelay


rowChangeDelay: number

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

상세 설명

onCurrentRowChanged 를 지연시킨다.

기본값

0 (ms)

rowFocusType


rowFocusType: RowMaskType

focus 된 행의 마스크 종류

rowHeight


rowHeight: number

행 높이

상세 설명

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

기본값

0

rowHoverType


rowHoverType: RowMaskType

행 hover 시 마스크 종류

상세 설명

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

rowResizable


rowResizable: boolean

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

상세 설명

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

기본값

false

scrollDuration


scrollDuration: number

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

상세 설명

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

liveScrollfalse인 경우만 적용된다.

기본값

0 (ms)

selectAndImmediateDrag


selectAndImmediateDrag: boolean

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

상세 설명

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

기본값

false

selectAtSingleRow


selectAtSingleRow: boolean

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

상세 설명

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

기본값

false

selectionDisplay


selectionDisplay: SelectionDisplay

선택 영역의 디스플레이

상세 설명

자세한 설명은 SelectionDisplay 참조

selectionMode


selectionMode: SelectionMode

선택 영역의 모드

상세 설명

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

selectionStyle


selectionStyle: SelectionStyle

선택 영역의 스타일

상세 설명

자세한 설명은 SelectionStyle 참조

showChangeMarker


showChangeMarker: boolean

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

기본값

true

showEmptyMessage


showEmptyMessage: boolean

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

기본값

false

showEmptyTooltip


showEmptyTooltip: boolean

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

상세 설명

trueonShowTooltip() 발생

기본값

false

showInnerFocus


showInnerFocus: boolean

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

기본값

true

showNativeEditButton


showNativeEditButton: boolean

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

기본값

false

showTooltip


showTooltip: boolean

툴팁 표시여부

상세 설명

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

기본값

false

syncGridHeight


syncGridHeight: SyncGridHeight

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

상세 설명

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

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

toastZIndex


toastZIndex: number

표시되는 Toast 창의 zIndex 지정

기본값

3000

useAlternateRowStyle


useAlternateRowStyle: boolean

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

기본값

true

useFocusClass


useFocusClass: boolean

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

상세 설명

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

기본값

false

vscrollBar


vscrollBar: boolean

수직 스크롤 바 표시 여부

기본값

true

watchDisplayChange


watchDisplayChange: boolean

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

상세 설명

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

기본값

true

wheelAccelDelay


wheelAccelDelay: number

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

상세 설명

wheelAccelScroll 과 함께 사용한다.

기본값

0

wheelAccelScroll


wheelAccelScroll: number | string

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

상세 설명

숫자 - 아이템 개수

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

기본값

null

wheelDeltaY


wheelDeltaY: number

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

상세 설명

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

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

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

기본값

0

wheelEnabled


wheelEnabled: boolean

휠 가능 여부

기본값

true

wheelEventPropagate


wheelEventPropagate: boolean

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

기본값

true

wheelScrollHorz


wheelScrollHorz: number

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

기본값

16

wheelScrollLines


wheelScrollLines: number

한 번에 스크롤 되는 행 갯수

기본값

3

콜백 정보

rowBlockCallback


rowBlockCallback: RowBlockCallback

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

기본 값

null

예제 코드

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


scrollMessageCallback: ScrollMessageCallback

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

상세 설명

ScrollMessageCallback 의 형식이다.

예제 코드

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