Realgrid Editor - RealGrid

Editor Types

RealGrid provides several types of editors.

Try using the editor according to the dataType of each field.

Line Editor

The line editor is the default text editor. You can enter a single line of text, and if you do not specify an editor for the column separately, the line editor will be applied by default.

Multi-line Editor

The multi-line editor allows you to enter multiple lines of text separated by line separators. The size of the editor adjusts to the text being entered. You can break the line with Ctrl+Enter.

The default line break key is ctrl+enter, but if you set the altEnterNewLine property to true, a line break will occur when you press alt+enter.

You need to apply the white-space CSS style to the column where you want to use line breaks, so that \n is used and displayed as a line break.

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

To set automatic line breaks, you need to set the white-space CSS style to pre-line for the column where you want to use line breaks.

In the case of English letters, words cannot be cut and line breaks are processed, and line breaks are only performed by space or space units.

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

Number Editor

The number editor is an editor where you can enter numbers.

Dropdown editor

The dropdown editor selects one value from the list specified by the values property. You can also specify text to be displayed in the dropdown list instead of values in labels. The number of items in labels must be the same as the number of items in values, and if a value not in the list is entered, the original value is displayed. By default, the values in values are displayed in the cell, but you can set the label value to be displayed using the lookupDisplay property.

Dropdown editor with search function added

The search editor is an editor that displays matching values among the set values in the dropdown list.

When the search starts, the gridView.onEditSearch() event is fired, and within this event, you can fill the drop-down list by executing gridView.fillEditSearchItems() after the search process.

...
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);
}; ...
//Column setting
{
  name: "Country",
  fieldName: "Country",
  width: "100",
  header: {
    text: "Nationality",
  },
  editor: {
    type: "search",
    searchLength: 1,
    searchDelay: 1000,
    useCtrlEnterKey: true,
    useEnterKey: true,
  },
  editButtonVisibility: "always",
},
...

Dropdown editor that allows multiple items to be selected

Unlike the basic dropdown editor, this is a dropdown editor that allows multiple values to be selected at the same time.

Date Editor

The date editor allows you to input a date using the keyboard or select a date using the calendar popup.

When the field's dataType = 'datetime' is set, the grid manages the heading data as a date object.

Bootstrap Date Editor

As an exception, you can use the external library bootstrap-datepicker in RealGrid.

To use bootstrap-datepicker, you must include the library separately and load it.

The basic usage is the same as DateCellEditor, and it supports the btOptions property to input the options of bootstrap datepicker.

Changing the Grid Style Callback Function