기본 편집기

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

라인 편집기

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

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