행의 높이
행의 높이를 지정하는 방법과 데이터에 맞게 행의 높이를 변경하는 데모 입니다.
행의 높이 지정하기
고정 행의 높이는 displayOptions.rowHeight로 지정 합니다.
var height = gridView.displayOptions.rowHeight;
gridView.displayOptions.rowHeight = height + 10;
var height = gridView.displayOptions.rowHeight;
gridView.displayOptions.rowHeight = height - 10;데이터에 따라 행의 높이를 가변적으로 변경하기
데이터의 내용이 길때 컬럼 너비에 맞춰 자동으로 여러 줄로 표시하고 싶을때에는 column.styleName에 CSS white-space를 적용하면 됩니다. CSS를 적용하면 컬럼 너비에 맞춰 데이터만 여러줄로 표시될뿐 행의 높이는 자동으로 늘어나지 않습니다. 이런 경우 displayOptions.rowHeight = -1을 지정하면 됩니다. 그리고 한 행짜리 데이터인 경우 자동으로 조절된 높이가 너무 낮게 느껴지면 displayOptions.minRowHeight에 적절한 값을 지정합니다.
.realgrid-pre-wrap{
white-space: pre-wrap;
}var columns = [
...생략...
{
name: "KorCountry",
fieldName: "KorCountry",
width: "100",
header: {
text: "투자국가"
},
styleName: "realgrid-pre-wrap"
}
...생략...
];
gridView.setColumns(columns);엑셀 출력시에는 rowHeight -1 속성만 적용됩니다.(엑셀 동적행높이, 최소높이 동시적용불가)
gridView.displayOptions.rowHeight = -1;
gridView.displayOptions.minRowHeight = 36;