추천 설정
그리드 설정
자주 사용되는 옵션입니다.
주석을 참고하시고 필요에 맞게 설정하세요.
주석이 *** 로 시작하면 추천 필수 설정입니다.
편집관련 설정
https://docs.realgrid.com/refs/Interface/EditOptions#editoptions (opens in a new tab)
//***소트나 필터링시 새로 추가되거나 편집된 데이터는 그 기준(소트, 필터)에 맞게 재정렬되는데
//***그것을 방지하고 사용자가 재정렬이나 필터링 하기전까지는 그 위치를 유지하게하고자 할때
gridView.sortMode = 'explicit';
gridView.filterMode = 'explicit';
//편집 가능 그리드
gridView.editOptions.editable = true;
//***셀 편집이 완료되면 바로 commit
gridView.editOptions.commitByCell = true;
//***편집중에 그리드 외부 영역을 클릭하였을때 commit
gridView.editOptions.commitWhenLeave = true;
//탭 키로 컬럼 이동시 마지막 컬럼에 도착하면 다음행의 첫 컬럼으로 포커스 이동
gridView.editOptions.crossWhenExitLast = true;
//***셀 버튼 클릭시 onCellButtonClicked()이나 onCellItemClicked()이 기본적으로 발생함.
//***이외에 추가로 onCellClicked()이 같이 발생하는데 이것을 방지하고 싶을때..
gridView.editOptions.exceptDataClickWhenButton = true;
병합셀 편집 관련
https://docs.realgrid.com/guides/editing/edit-merge (opens in a new tab)
https://docs.realgrid.com/guides/cell-components/cell-merging (opens in a new tab)
//***셀 편집시 병합되어 있는 셀이 분리되어 보이는 것을 방지하고 싶을때
gridView.displayOptions.editItemMerging = true;
//***병합되어 있는 셀들의 값을 일괄로 변경하고 싶을때 컬럼의 mergeEdit를 true로 설정
//***이 기능을 사용하려면 아래 두개 옵션중 하나 이상을 반드시 사용해야 함.
//gridView.displayOptions.editItemMerging = true;
//gridView.editOptions.commitByCell = true;
var columns = [{
name: "Gender",
fieldName: "Gender",
width: "40",
header: {
text: "성별",
styleName: "orange-column"
},
mergeRule:{
criteria: "value"
},
mergeEdit: true //*** 해당 속성 true
},]
삭제관련 설정
//삭제시 provider에서 바로 삭제하지 않고 rowState를 "deleted" 상태로 변경
dataProvider.softDeleting = true;
//rowState가 'deleted'의 것을 화면에 표시할 것인지의 여부, dataProvider.softDeleting과 조합하여 사용합니다.
gridView.hideDeletedRows = false;
표시관련 설정
//***체크바와 체크바의 head 체크를 동기화
//***ex)체크바가 모두 체크되었을때 head도 같이 체크
gridView.checkBar.syncHeadCheck = true;
//헤더의 높이 설정 방법
gridView.header.height = 40;
//그리드 하단의 푸터를 표시하고 싶지 않을때
gridView.footer.visible = false;
//행 높이 설정하기
gridView.displayOptions.rowHeight = 30;
//사용자가 행 높이 변경가능하게 하기
//첫행의 맨 앞에서 조절 가능, 모든 행의 높이가 동일하게 변경
gridView.displayOptions.rowResizable = true;
//개별 행 높이 조절이 가능하게
gridView.displayOptions.eachRowResizable = true;
//***정렬이 유지된체 행 고정하고자 할때
gridView.fixedOptions.exceptFromSorting = false;
//열고정하기
gridView.fixedOptions.colCount = 2;
//행고정하기
gridView.fixedOptions.rowCount = 2;
복사/붙여넣기 관련
https://docs.realgrid.com/guides/editing/copy-and-paste (opens in a new tab)
//dropdown 컬럼을 복사하는 경우 value값으로 복사되는데 label 값으로 복사하고 싶은 경우
gridView.copyOptions.lookupDisplay = true;
//label값을 붙여넣기시 value값으로 변환하여 붙여넣기
gridView.pasteOptions.convertLookupLabel = true;
//dropdown 목록에 없는 값은 붙여넣기가 안되게
gridView.pasteOptions.checkDomainOnly = true;
//readOnly이거나 editable이 false인 Column은 paste대상에서 제외
gridView.pasteOptions.checkReadOnly = true;
//***숫자 필드에 '1,000'을 붙여넣기 할때 ','문자로 인해 1 만 붙여넣기 될때
gridView.pasteOptions.numberChars = [',']
DropDown 편집기 설정
컬럼에 dropdown(selectbox)를 사용하는 예제 입니다.
https://docs.realgrid.com/guides/cell-components/lookup-column (opens in a new tab)
https://docs.realgrid.com/guides/editor/dropdown-editor (opens in a new tab)
https://docs.realgrid.com/refs/Interface/DropDownCellEditor#dropdowncelleditor (opens in a new tab)
var lookupDatas = [
{value: "M", label: "매일유업"},
{value: "O", label: "오뚜기"},
{value: "S", label: "서울우유"},
{value: "B", label: "부산우유"}
];
//value와 label의 속성명을 바꾸고 싶은 경우 아래와 같이 사용
//lookupData: {value:"code", label:"text", list:[{code: "M", text: "매일유업"}, {code: "S", text: "서울우유"}]},
var columns = [
{
name: "FoodCompany",
fieldName: "FoodCompany",
width: 130,
lookupDisplay: true,
lookupData: lookupDatas,
header: {
text: "lookupDatas"
},
editor: {
type: "dropdown",
textReadOnly: true, //*** 사용자가 키보드로 입력할 수 없게 할때
domainOnly: true, //*** dropdown 목록에 있는 값만 허용하고자 할때
dropDownWhenClick: true //셀을 클릭해도 dropdown 목록이 펼쳐지길 원할때
},
styleName: "orange-column"
}
]
체크 렌더러 설정
컬럼에 체크박스를 사용하는 예제 입니다.
https://docs.realgrid.com/guides/renderer/check-renderer (opens in a new tab)
var columns = [
{
name: "UseYN",
fieldName: "UseYN",
width: 60,
editable: false, //*** 반드시 false로 설정
renderer: {
type: "check",
trueValues: "Y", //true로 사용할 값
falseValues: "N" //false로 사용할 값
},
header: {
text: "체크",
styleName: "orange-column"
}
}
];