편집기 종류

RealGrid에는 여러 종류의 편집기를 제공하고 있습니다.

각 필드의 dataType에 따라 편집기를 사용해보세요.

라인 편집기

라인 편집기는 기본 텍스트 편집기 입니다. 한 줄 텍스트를 입력할 수 있으며, 컬럼에 editor를 별도로 지정하지 않을 경우 기본값으로 라인편집기가 적용되게 됩니다.

멀티라인 편집기

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

기본적인 줄바꿈 키는 ctrl+enter키 이지만 altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.

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

// *.css
.multiline-editor{
  white-space: pre;
}

자동 줄바꿈 설정은 줄바꿈을 사용할 컬럼에 white-space css스타일을 pre-line로 설정해야 합니다. 영문자의 경우에는 단어를 잘라서 줄바꿈 처리할 수 없으며 공백, 띄어쓰기 단위로만 줄바꿈이 되어집니다.

// *.css
.multiline-editor{
  white-space: pre-line;
}

숫자 편집기

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

드롭다운 편집기

드롭다운 편집기 는 values속성으로 지정된 목록 중 한 값을 선택합니다.
또한, labels에 values 대신 드롭다운 리스트에 표시될 텍스트들을 지정할 수 있습니다.
labels의 항목 수가 values 항목 수는 동일해야하고 목록에 없는 값이 들어온 경우 원래 값 그대로 보입니다. 기본적으로 values의 값들이 셀에 보여지지만 lookupDisplay 속성을 통해 label 값이 보여질 수 있도록 설정 하실 수 있습니다.

검색 기능이 추가 된 드롭다운 편집기

검색 편집기는 설정된 값 중에 일치되는 값이 드롭다운 목록에 표시되는 에디터입니다.

검색이 시작되면 gridView.onEditSearch() 이벤트가 발생하며, 이 이벤트 내에서 검색 처리 후 gridView.fillEditSearchItems()을 실행해 드롭다운 목록을 채워줄 수 있습니다.

...
const CountryNames = [
    "Korea",
    "France",
    "Brazil",
    "Germany",
    "Switzerland",
    "Belgium",
    "Austria",
    "Mexico",
    "USA",
  ];
 
gridView.onEditSearch = function (grid, index, text) {
    var items = CountryNames.filter(function (str) {
        return str.indexOf(text) == 0;
    });
    grid.fillEditSearchItems(index.column, text, items);
};
... 
//컬럼설정
{
  name: "Country",
  fieldName: "Country",
  width: "100",
  header: {
      text: "국적",
  },
  editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true,
  },
  editButtonVisibility: "always",
},
...

여러 항목이 선택 가능한 드롭다운 편집기

기본 드롭다운 에디터와는 다르게 여라 값을 동시에 선택 할 수 있는 드롭다운 에디터 입니다.

날짜 편집기

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

필드의 dataType = 'datetime' 으로 설정시 그리드는 해딩 데이터를 date객체로 관리하게 됩니다.

부트스트랩 날짜 편집기

예외적으로 리얼그리드에 외부 라이브러리인 bootstrap-datepicker를 사용할 수 있습니다.
bootstrap-datepicker를 사용하려면 해당 라이브러리를 별도로 include하여 반드시 로드하여야 합니다.

기본적인 사용법은 DateCellEditor와 동일하며 bootStrap datepicker의 옵션을 입력할수 있도록 btOptions속성을 지원 합니다.