중요 업데이트 알림사용해보기제품구매도움영상문의
RealGrid2v2.2.0

  • 튜토리얼
      • 인디케이터
      • 상태바
      • 체크바
      • 컨텍스트 메뉴
      • 토스트 메시지 창
      • 커서
      • 열 고정하기
      • 행 고정하기
      • 선택
      • 같은 값의 셀 생략하기
      • 셀 버튼
      • 팝업 메뉴 버튼
      • 셀 병합
      • Lookup 컬럼
      • 툴팁
      • Lookup 트리
      • 화면 표시값 변경하기
      • 컬럼 만들기
      • 컬럼 속성 변경하기
      • 컬럼 너비 자동 조정
      • 데이터 정렬
      • 컬럼 이동
      • 데이터 필터링
      • 자동 필터링
      • 컬럼 레이아웃(컬럼 그룹핑)
      • 컬럼 너비 조절
      • 헤더 높이
      • 헤더 체크박스 사용
      • 컬럼 푸터
      • HEADER와 FOOTER에 여러줄로 표시하기
      • 상단 요약 표시
      • 행 높이
      • 행 그룹핑
      • 그룹핑 API
      • 행 병합 그룹핑
      • 아이템 모델
      • JSON 데이터 가져오기
      • XML 데이터 가져오기
      • 그리드 Lazy Loading 구현
      • 마스터 디테일 예
      • provider 공유하기
      • 데이터 타입
      • 불린 타입 필드
      • 날짜 타입 필드
      • Subtypes
      • 그리드의 값 가져오기
      • 그리드에 값 넣기
      • 새로운 행 추가
      • 롤백
      • 검색
      • 계산 필드
      • 그리드에서 페이징 처리 1
      • 그리드에서 페이징 처리 2
      • 행 Drag & Drop
      • Grid To Grid
      • 텍스트 렌더러
      • 체크 렌더러
      • 바 렌더러
      • 이미지 렌더러
      • 아이콘 렌더러
      • 도형 렌더러
      • 시그널 렌더러
      • 링크 렌더러
      • HTML 렌더러
      • 바코드 렌더러
      • 커스텀 렌더러 - 이미지버튼
      • 구글차트 연동
      • 하이차트 연동
      • 시리즈 컬럼
      • 스파크 컬럼
      • 데이터 추가 또는 삽입
      • 데이터 수정
      • 데이터 삭제
      • 행 상태
      • 기본 편집기
      • Bootstrap Date Picker
      • Undo / Redo
      • 복사하기/붙여넣기
      • 마스크 편집기
      • RealGrid2 스타일
      • 사용자 스타일 - 개요
      • 바디 영역 스타일
      • 헤더, 풋터, 상태바 스타일
      • 셀, 데이터 영역 스타일
      • 편집 영역 스타일
      • styleName 속성 및 콜백
      • 컬럼 동적 스타일
      • 행 동적 스타일
      • 셀 동적 스타일
      • RealGrid2 테마
      • 엑셀 내보내기
      • 행 그룹된 그리드 내보내기
      • 여러 레이아웃으로 구성된 그리드 내보내기
      • 다중 그리드 Excel 내보내기
      • Excel문서에 제목 추가하기
      • Mobile FormView
      • 대량 데이터 불러오기
      • 트리뷰
      • 트리 구현 - Array데이터
      • 트리 구현 - Object데이터
      • 트리 노드 조작하기
      • 트리 아이콘 1
      • 트리 아이콘 2
      • 트리 이벤트
      • 사용자 지정 컬럼 유효성 검사
      • 사용자 지정 행 유효성 검사
      • 전체 유효성 검사
      • 이벤트 발생 순서
      • 클릭 이벤트
      • 하이차트 연동 컬럼 선택
      • 하이차트 연동 컬럼 필터링
      • 하이차트 연동 행 선택
      • amchart 연동 체크 선택
      • amchart 연동 행 선택
      • 필드와 컬럼 일괄 생성
      • SPAN(컬럼그룹)
      • 행 상태에 따른 특정 컬럼 편집 제어
      • CheckBar에서 자식 노드 연동하여 체크하기
      • Excel Import
      • Group Footer 표시여부 조작하기

기본 편집기

리얼그리드는 라인, 멀티라인, 드롭다운, 날짜, 검색 등의 다양한 형태의 편집기를 제공 하고 있습니다.

라인 편집기

라인 편집기는 한 줄 텍스트를 입력할 수 있는 기본 에디터입니다.

var textCase = $(':radio[name="rbTextCase"]:checked').val();
gridView.setColumnProperty("OrderID", "editor", { textCase: textCase });

멀티라인 편집기

멀티라인 편집기는 라인 구분자로 나누어지는 여러 줄의 텍스트를 입력할 수 있습니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정됩니다. Ctrl+Enter로 줄 나누기를 할 수 있습니다.

styles의 textWrap 속성을 반드시 지정해주어야 하며 explicit 인 경우 문자열 내에 명시적으로 행바꿈(\n) 코드가 있을 경우 행바꿈이 이루어지고 normal인 경우 문자열이 컬럼의 폭보다 긴 경우 자동으로 줄 행바꿈이 이루어 집니다.

altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.

gridView.setColumnProperty("CompanyName","editor", {
    "type": "multiline",
    "textCase": "upper",
    altEnterNewLine:true
})

줄바꿈을 사용할 컬럼에 white-space css스타일을 적용해야 \n 사용 시 줄바꿈이 되어 표시됩니다.

// *.css
.multiline-editor{
  white-space: pre;
}
...
//컬럼설정
{
    "name": "CompanyName",
    "fieldName": "CompanyName",
    "width": "200",
    "editor": {
        "type": "multiline",
        "textCase": "upper"
    },
    "styleName": "multiline-editor",
    "header": {
        "text": "Multiline Edit",
        "styleName": "orange-column multiline-editor"
    }
},
...

숫자 편집기

숫자 편집기는 숫자를 입력할 수 있는 편집기 입니다.

천단위 구분기호를 표시하고 싶은 경우 styles.numberFormat을 "#,##0" 로 설정하면 되고, 고정 소수점 사용시에는 필요한 자릿수만큼 소수점 이후에 "0"을 표시, 가변 소수점 사용시에는 "#"을 사용합니다.
예를 들어 천단위 구분기호를 사용하고 고정 소수점 3자리를 사용할 경우 "#,##0.000" 를 사용하면 됩니다.

editor.editFormat을 "#,##0.##"로 지정한 경우 소수점이하 자리는 최대 2자릿수만큼만 입력됩니다.

...
//컬럼설정
{
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "sortable": false,
  "editor": {
    "type": "number",
    "textAlignment": "far",
    "editFormat": "#,##0.##",
    "multipleChar": "+",
  },
  "numberFormat": "#,##0.##",
  "header": {
    "text": "Number Edit"
  }
}
...

일부 국가에서는 천단위 구분기호 ','와 소수점 '.'을 반대로 사용하는 경우가 있습니다.(천단위 구분기호 '.', 소수점 ',')
이 경우 format 문자열을 ; 으로 구분하여 첫번째는 숫자를 표현하는 형식을 두번째는 소숫점 기호를 세번째는 천단위 구분기호를 지정합니다.

numberFormat: "#,##0.##;,;."   //12345.67 인 경우 12.345,56 으로 표시

입력시 에디터에도 같은 포맷을 가지려면 동일하게 지정하면 됩니다.

editFormat: "#,##0.##;,;."   //12345.67 인 경우 12.345,56 으로 표시
var column = [
...
{
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "sortable": false,
  "editor": {
    "type": "number",
    "textAlignment": "far",
    "editFormat": "#,##0.##;,;.",
    "multipleChar": "+",
  },
  "header": {
    "text": "Number Edit"
  }
}
...
];

드롭다운 편집기

드롭다운 편집기 는 values속성으로 지정된 목록 중 한 값을 선택합니다. 또한, labels에 values 대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.
labels의 항목 수가 values 항목 수 이상이어야 하고, 에디터에 values를 지정하지 않으면 컬럼에 지정된 values, labels 목록이나 lookupSource의 목록을 대신 사용합니다.

...
//컬럼설정
{
  "name": "CustomerID",
  "fieldName": "CustomerID",
  "width": "150",
  "sortable": false,
  "lookupDisplay": true,  //라벨로 표시
  "values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
  "labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
  "editor": {
      "type": "dropdown",
      "dropDownCount": 4
  },
  "header": {
      "text": "DropDown Edit"
  }
}
...

domainOnly가 true이면 목록에 있는 값들만 선택할 수 있습니다.
textReadOnly가 true이면 키 입력이 안되며 선택만 할 수 있습니다.

...
//컬럼설정
{
  "name": "CustomerID2",
  "fieldName": "CustomerID",
  "width": "150",
  "sortable": false,
  "editor": {
    "type": "dropdown",
    "dropDownCount": 4,
    "domainOnly": true,
    "textReadOnly": true,
    "values": ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
    "labels": ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"]
  },
  "header": {
    "text": "Domain Only"
  }
}
...

검색 편집기

검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터 이다. 검색이 시작되면 gridView.onEditSearch() 이벤트가 발생하며, 이 이벤트 내에서 검색 처리 후 gridView.fillEditSearchItems()을 실행해 드롭다운 목록을 채워준다.

...
var CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

gridView.onEditSearch = function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    var items = CustomerNames.filter(function (str) {
        return str.indexOf(text) == 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
};
...
//컬럼설정
{
  "name": "CustomerID3",
  "fieldName": "CustomerID",
  "width": "150",
  "sortable": false,
  "editor": {
    "type": "search",
    "searchLength": 1,
    "searchDelay": 1000,
    "useCtrlEnterKey": true,
    "useEnterKey": true
  },
  "header": {
    "text": "Search Editor"
  }
}
...

날짜 편집기

날짜 편집기를 사용하면 키보드로 날짜를 입력하거나 달력 팝업을 사용하여 날짜를 선택할 수 있습니다.

...
//컬럼설정
{
  "name": "OrderDate",
  "fieldName": "OrderDate",
  "width": "180",
  "sortable": false,
  "editor": {
    "type": "date",
    "datetimeFormat": "yyyy.MM.dd"
  },
  "header": {
      "text": "Date Edit"
  }
}
...

minDate, maxDate를 지정하여 특정기간만 선택할 수 있습니다.

gridView.setColumnProperty("OrderDate", "editor", {
  type: "date",
  datetimeFormat: "yyyy.MM.dd",
  minDate: new Date("1996-06-1"),
  maxDate: new Date("1996-08-30")
});

holidays속성으로 특정 날짜에 스타일과 툴팁을 지정할 수 있습니다.

gridView.setEditorOptions({
  viewGridInside: true,
  holidays: [ {
      type : "day", // 요일을 지정합니다.
      days : [0,6], // 일요일,토요일
      tooltips : ["일요일","토요일"], // tooltip
      enabled : true  // false인경우 선택할수 없습니다.
  }, {
      type : "date", // 기념일 또는 특정일자를 지정합니다.
      dates : ["01-01","03-01","05-05","08-15"], // 기념일.
      tooltips : ["신정","삼일절","어린이날","광복절"],
      styleName : "holidays"
  }]
});