셀, 데이터 영역
본 페이지는 스타일 영역 구분중 셀, 데이터 영역에 대한 설명입니다.
다른 영역에 대한 설명은 아래 링크를 참고하세요.
rg-button-*
셀 버튼의 action, popup 타입에 대한 스타일과 날짜 편집기의 달력 팝업 버튼과 드롭다운 편집기에서 목록을 펼치는 버튼등의 스타일을 변경할 수 있습니다.
이 스타일에는 base64 형식의 버튼이미지가 포함되어 있으며, 이미지를 변경하거나 스타일 속성을 이용해 버튼의 스타일을 꾸며줄 수 있습니다.
.rg-button-action {
background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}
.rg-button-popup {
background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}
.rg-button-list {
background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}
.rg-button-calendar {
background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}rg-fixed-*
rg-fixed-* 스타일 클래스들은 열 고정하기와 행 고정하기로 고정된 행과 열의 셀이나 구분선의 스타일을 지정하는데 사용됩니다.
아래 데모는 고정된 행과 열의 셀 샐깔을 변경하는 예입니다.
.rg-fixed-row {
/* 고정된 행, 열의 셀 색깔 변경 */
background: #0000ff;
}
.rg-fixed-row td {
border-top: none;
border-right: 1px solid #bdbdbd;
border-bottom: 1px solid #bdbdbd;
border-left: none;
height: 0;
}rg-rowgroup-*, rg-group-panel-*
행 그룹핑은 기본 그리드 스타일과 다른 여러 영역이 추가될 수 있습니다. 대표적으로 그룹 패널, 그룹 헤더, 그룹 풋터, 그룹 바 등이 있습니다. rg-rowgroup-*과 rg-group-panel-*로 시작되는 클래스들은 이 영역에 대한 스타일을 지정합니다.
아래 데모는 그룹 패널과 그룹 헤더영역의 색깔을 변경하는 예 입니다.
행 그룹 헤더는 레벨에 따라 레벨의 번호가 붙어 있는 별도의 클래스를 지정할 수 있지만 기본 스타일에는 정의되어 있지 않습니다.
.rg-rowgroup-header-level-2 {
/* 행 그룹 2-레벨 헤더 색깔 변경 */
background-color: #00f;
}
/* ... */
.rg-group-panel {
box-sizing: border-box;
/* 그룹 패널 색깔 변경 */
background: #0000ff;
border-bottom: 1px solid #bcc0c8;
text-align: left;
}rg-fosucs-*, rg-selection-*
포커스 영역과 선택 영역의 스타일을 사용자가 지정할 수도 있습니다. 선택 영역의 스타일은 다른 바디 영역의 스타일 중 최 상위 스타일 이어야 하므로 !important 룰을 적용하는 것이 좋습니다.
아래 데모는 포커스 셀과 선택영역의 색깔을 변경하는 예 입니다.
.rg-focus {
/* 포커스 셀의 색깔 변경 */
border: 2px solid #00f;
}
/* ... */
.rg-selection-cell {
/* 선택 영역의 색깔 변경 */
background: #0000ff40 !important;
color: inherit;
}
.rg-selection {
background: rgba(229, 102, 21, 0.2) !important;
border: 1px solid rgba(229, 102, 21, 0.67);
}