RealGrid2 가이드
Tip
추천 설정

추천 설정

그리드 설정

자주 사용되는 옵션입니다.
주석을 참고하시고 필요에 맞게 설정하세요.
주석이 *** 로 시작하면 추천 필수 설정입니다.

편집관련 설정

https://docs.realgrid.com/refs/edit-options#edit-options (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/editing/dropdown-editor (opens in a new tab)
https://docs.realgrid.com/refs/drop-down-cell-editor#drop-down-cell-editor (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"
	}
}
];