툴팁
컬럼의 헤더및 데이터 영역에서 마우스 hovering시 툴팁을 표시할 수 있습니다.
Tooltip 표시하기
전체 헤더의 툴팁 표시 여부를 설정합니다.
gridView.setHeader({ showTooltip: true });헤더 툴팁을 다른 내용으로 변경하려면 header.tooltip에 문자열을 지정합니다.
//처음 설정시..
var columns = [{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름",
//헤더 툴팁 설정
showTooltip:true,
tooltip:"이름"
},
renderer:{
//데이터 영역 툴팁 설정
showTooltip:true
}
}, {
...
}];
gridView.setColumns(columns);
or
//동적으로 설정시
gridView.setColumnProperty("KorName","header",{showTooltip:true, tooltip:"이름"})데이터 영역에서 툴팁을 표시할 경우 column.renderer.showTooltip을 true로 설정하면 됩니다.
데이터 영역의 툴팁은 기본적으로 원래의 값이 표시되고 다른 내용을 표시하려면 onShowTooltip 이벤트를 사용합니다.
var columns = [{
name: "KorName",
fieldName: "KorName",
width: "60",
header: {
text: "이름"
},
renderer:{
showTooltip:true
}
}, {
...
}];
gridView.setColumns(columns);Ellipsis상태인 셀만 Tooltip 표시하기
Ellipsis상태인 셀만 툴팁을 표시하도록 설정합니다.
gridView.displayOptions.showTooltip = true;
gridView.displayOptions.tooltipEllipsisOnly = true;
gridView.header.showTooltip = true;
gridView.header.tooltipEllipsisOnly = true;
onShowTooltip 이벤트
onShowTooltip 이벤트는 툴팁이 화면에 표시될때 발생하는 콜백 함수입니다.
이 콜백 함수에서 툴팁에 표시되는 메시지를 변경할 수 있습니다.
이름 컬럼에서 변경된 툴팁을 확인하세요.
gridView.onShowTooltip = function(grid, index, value) {
var column = index.column;
var itemIndex = index.itemIndex;
var tooltip = value;
if (column == "KorName") {
tooltip =
"이름: " +
value +
"\r\n성별: " +
grid.getValue(itemIndex, "Gender") +
"\r\n나이:" +
grid.getValue(itemIndex, "Age")
}
return tooltip;
};