DisplayOptions
그리드 수준에서 관리되는 표시 정보들에 대한 설정 모델
상세 설명
그리드 에서 옵션으로 설정할 때는 필요한 정보만 넣으면 된다.
예제 코드
grid.setDisplayOptions({rowResizable: true});
프로퍼티 정보
Merged Row Grouping 또는 Cell Merging상태에서 셀 편집시 편집 중인 행의 merge 여부. true
이면 merge상태를 유지한다.
기본값
false
그리드에 표시되는 데이터 행이 한 건도 없을 때 표시되는 메세지
기본값
'이 곳에 표시할 메시지를 DisplayOptions.emptyMessage 속성으로 설정합니다.'
fitStyle적용시 fixed도 영역도 포함할지 여부.
상세 설명
DisplayOptions.fitStyle을 even 또는 evenFill로 설정하면 고정영역에 있는 컬럼들도 너비를 변경한다.
GridFitStyle.FILL은 적용되지 않는다.
기본값
false
groupFocusVisible이 true
일때 표시될 groupLayout을 지정한다.
상세 설명
-1
: 최상위Layout이 선택 0
보다 큰값이면 입력된 level에 해당하는 groupLayout이 선택된다.
기본값
-1
focus된 셀이 그룹layout의 하위 셀일때 그룹layout에 focus를 표시한다.
상세 설명
groupLayout은 groupFocusLevel에 의해 결정된다.
기본값
false
수평 스크롤시 tooltip 표시 지연 시간
기본값
0
(ms)
스크롤바의 track-thumb을 이용한 스크롤시 즉시 스크롤 여부
상세 설명
false
이면 마우스버튼을 놓았을때 스크롤한다.
기본값
true
rowHeight가 -1
일때 그리드 스크롤시 표시되고 있는 행의 높이는 다시 찾지 않고 계산된 높이를 사용한다.
상세 설명
false
로 설정하면 행이 화면에 표시될때 다시 높이를 계산한다. 화면에 많은 행이 표시되면 속도가 느려질수 있다.
기본값
true
행 높이
상세 설명
0 이면 그리드의 폰트와 Padding 스타일을 고려해서 적절한 값으로 행들의 높이를 찾는다. 0 보다 큰 값이면 지정한 값이 행들의 높이가 된다. -1
이면 셀의 내용에 따라 행의 높이를 변경한다.
기본값
0
전체적인 행 높이 조절 가능 여부
상세 설명
첫 번째 컬럼의 셀 아래쪽이나 첫 번째 행의 인디케이터의 아래 쪽을 드래그하면 조정 할 수 있다.
기본값
false
수직 스크롤시 tooltip 표시 지연 시간
기본값
0
(ms)
true
이면 셀을 선택한 후 바로 drag&drop 모드로 변경한다.
상세 설명
DisplayOptions.selectionStyle이 column
인 경우는 적용되지 않는다.
기본값
false
DisplayOptions.selectionStyle이 SelectionStyle.BLOCK 이거나 SelectionStyle.GROUP일 때 여러행 선택 가능 여부
상세 설명
false
이면 한행에서만 Selection이 가능하다.
기본값
false
Native 드랍다운 편집기(date, list)일 때 셀 우측에 edit button을 표시할 것인 지 여부.
기본값
false
툴팁 표시여부
상세 설명
true
로 설정하면 컬럼에 showTooltip을 설정하지 않아도 tooltip이 표시된다. renderer.showTooltip이 false
인 경우 표시하지 않는다.
기본값
false
data가 모두 화면에 보이도록 그리드 컨테이너의 높이를 변경한다.
상세 설명
표시되는 data의 건수가 많은 경우 속도가 느려질수 있다. 그리드가 생성되기 전에 그리드 컨테이너의 높이가 지정되어야 원래 크기로 돌아갈수 있다.
rowHeight가 -1인경우 적용되지 않는다.
짝수행의 className에 "rg-alternate-row" 추가를 설정한다.
기본값
true
focus된 셀과 row의 class명을 설정한다.
상세 설명
true
이면 focus된 셀의 className에 rg-focused-cell
을 추가한다. Row의 className에 rg-focused-row
를 추가한다.
기본값
false
container의 display가 변경되는 경우 자동으로 화면을 갱신
상세 설명
그리드 상위element의 display가 변경되면 자동으로 화면을 갱신한다.
기본값
true
touchPad를 이용한 스크롤시 민감도를 조정한다.
상세 설명
touchPad의 경우 약간의 움직임만 있어도 스크롤되던것을 지정된 숫자만큼의 움직임이 있어야 스크롤되도록 한다.
10
~ 20
정도의 값이 적당하다.
세로스크롤에만 적용된다.
기본값
0
콜백 정보
사용자 지정 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
}
liveScroll
이 false
일 때 스크롤 위치를 알려주는 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>";
}