그리드 포커스
그리드 포커스 색상 적용은 포커스, 행, 호버 등의 css 배경색 속성을 변경해서 그리드 selection이 아닌 직접 배경색을 변경하는 방식으로 적용합니다.
그리드 셀 클릭과 데이터 행에 마우스 호버로 포커스와 호버 색상이 다르게 적용되어 있습니다.
각 스타일 속성과 스타일의 우선순위는 현재 환경에 맞게 직접 조정해서 적용 해주셔야 합니다.
Loading RealGrid...
//포커스 표시여부 설정
function btnShowFocus() {
gridView.displayOptions.focusVisible = true
}
function btnHideFocus() {
gridView.displayOptions.focusVisible = false;
}
//포커스행 스타일 적용
gridView.displayOptions.useFocusClass = true;
//*.css
//포커스 셀, 행 색상 적용
.rg-data-row:hover {
background: #e6f7ff;
}
.rg-data-cell:hover {
background: #e6f7ff ;
}
.rg-focused-row {
background: #bae7ff !important;
}
.rg-focused-cell {
background: #4a5ce7 !important;
color: #ffffff !important
}
.rg-focused-cell:hover {
background: #e6f7ff;
}
.rg-focused-row:hover {
background: #e6f7ff ;
}
//포커스행 인디케이터 색상 변경
.rg-rowindicator-focus {
background: #bae7ff !important;
}
//realgrid-style.css
//셀 호버 색상 변경
.rg-body, .rg-fixed-body {
background-color: #FFFFFF; }
.rg-body .rg-table tr td, .rg-fixed-body .rg-table tr td {
border-top: none;
border-right: 1px solid #D2D5DA;
border-bottom: 1px solid #D2D5DA;
border-left: none;
height: 0px; }
.rg-body .rg-table tr td:hover, .rg-fixed-body .rg-table tr td:hover {
background: #ebebeb00; }포커스 이동(헤더, 체크바, 푸터)
포커스를 헤더, 체크바, 푸터 영역으로 이동 후 값을 복사 하기나 체크바에 키보드로 체크를 할 수 있습니다.
Loading RealGrid...
키보드 또는 마우스를 이용해서 focus를 data외 다른 영역으로 이동하도록 하는 EditOptions.extendedFocus 속성을 true로 적용.
header, footers, checkBar, rowIndicator, stateBar에 focus 이동여부를 지정하는 focusable 속성을 true로 지정하면 키보드로 이동이 가능합니다.
gridView.editOptions.extendedFocus = true;
gridView.checkBar.focusable = true;
gridView.header.focusable = true;
gridView.footers.focusable = true;
gridView.stateBar.focusable = true;
gridView.rowIndicator.focusable = true;