추천 설정

그리드 설정

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

편집관련 설정

https://docs.realgrid.com/refs/edit-options#edit-options

//***소트나 필터링시 새로 추가되거나 편집된 데이터는 그 기준(소트, 필터)에 맞게 재정렬되는데
//***그것을 방지하고 사용자가 재정렬이나 필터링 하기전까지는 그 위치를 유지하게하고자 할때
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-mergehttps://docs.realgrid.com/guides/cell-components/cell-merging

//***셀 편집시 병합되어 있는 셀이 분리되어 보이는 것을 방지하고 싶을때
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

//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
https://docs.realgrid.com/guides/editing/editors
https://docs.realgrid.com/refs/drop-down-cell-editor#drop-down-cell-editor

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

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"
    }
}
];