그리드 포커스

그리드 포커스 색상 적용은 포커스, 행, 호버 등의 css 배경색 속성을 변경해서 그리드 selection이 아닌 직접 배경색을 변경하는 방식으로 적용합니다.

그리드 셀 클릭과 데이터 행에 마우스 호버로 포커스와 호버 색상이 다르게 적용되어 있습니다.

각 스타일 속성과 스타일의 우선순위는 현재 환경에 맞게 직접 조정해서 적용 해주셔야 합니다.

//포커스 표시여부 설정
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: #bae7ff !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; }

행 고정하기 선택