Editors

DataGrid is an editable component, i.e. users can edit it manually.

Generally, to make the grid editable you should set the editable parameter to true.

Making DataGrid editable

webix.grid({
  editable:true,
  autoConfig:true // editor:"text" will be added to each cell
});

Related sample: Basic Use of Editors

After that you can:

choose editors for each column
define the action on which the editor(s) will be opened

Editors

Webix DataGrid provides 12 predefined editors:

text, inline-text, password;
checkbox, inline-checkbox;
select, combo, richselect;
multiselect (Webix DataGrid Pro only);
date;
color;
popup.

To add an editor for a column, set the editor attribute of the columns parameter:

Specifying the editor for a column

columns: [
  { id:"title", header:"Film title", editor:"text" }
]

Related sample: Basic Use of Editors

Creating Custom Editor (general guidelines)

To create a custom editor, you should set the following methods to it:

focus() - sets the focus to the input with the editor.
getValue() - gets the value of the editor.
setValue() - sets the value of the editor.
render() - renders the editor.

webix.editors = {
  "myeditor": {
    focus: function () {/* ... */},
    getValue: function () {/* ... */},
    setValue: function (value) {/* ... */},
    render: function () {/* ... */}
  }
};

In this methods, you will need the following inner properties:

this.node - the HTML element of the editor. Appears after render() is called;
this.value - the initial value of an input. Appears after setValue() is called;
this.config - editor configuration;
this.popup - popup ID (is used for editors with popup windows).

After your editor is in the collection, you can set it for a column:

Adding a new editor and setting it for a column

webix.grid({
  columns: [
    { id: "title", header: "Film title", editor: "myeditor" }
  ]
});

Setting Action for Opening Editors

To set the action on which editors will be opened, you should use the editaction property.

Default actions

By default, editors are opened on a single click. To make editors open on a double click, you should set editaction to dblclick:

Opening editors on a double click

webix.grid({
    editable: true,
    editaction: "dblclick"
});

Custom actions

To use some other action/keyboard key for opening requires you to provide all the ‘open-edit-close’ logic.

To open editors on a key press:

1. Set the editaction property to ‘custom’.
2. Use the webix.UIManager to add a hot key and define the processing logic.

Opening editors on the Enter key press

var mytable = webix.grid({
  editable: true,
  editaction: "custom"
});

webix.UIManager.addHotKey("enter", function(view){
  var pos = view.getSelectedId();
  view.edit(pos);
}, mytable);

Related sample: Basic Use of Editors

To open editors on some action (datagrid events), you should do the following:

1. Set the editaction property to the “custom” value.
2. Handle the event (You can do this with the help of the on parameter or the attachEvent method).

Opening editors on cell selecting

webix.grid({
  editable:true,
  editaction: "custom",
  select: "cell",
  on:{
    onAfterSelect: function (data,prevent) {
      this.editCell(data.row, data.column);
    }
  }
});

Use Case: Editing an Entire Row/Column

To open all cells of the specified row/column for editing, do the following:

Set the editaction property to “custom”.
Use the on parameter to specify the action and define the processing logic:
- e.g. you can choose the onItemClick event;
- the editRow and editColumn methods open all editors of the specified row/column.

Opening editors in all cells of a row/column

var table1 = webix.grid({
  editable: true,
  editaction: "custom",
  on: {
    onItemClick: function (id) {
      this.editRow(id);
    }
  }
});

var table2 = webix.grid({
  editable: true,
  editaction: "custom",
  on: {
    onItemClick: function(id){
      this.editColumn(id);
    }
    }
});

Apart from row and column editing, you can:

open the editor in the next cell of a row (provided that it is editable) with the editNext method;
move focus to the active editor (if any) with the focusEditor method;
close the editor without saving changes with the editCancel method;
close the editor and save changes with the editStop method.

By default, the Tab(Tab+Shift) key(s) allows switching between editors defined in the grid.

How it works:

Press Tab -> the current editor closes and the next one opens. If the current editor is last in a row, the first editor in the next row will open.
Press Tab+Shift -> the current editor closes and the previous editor opens. If the current editor is first in a row, the last editor in the previous row will open.
Cells without editors are ignored.
When an editor opens in a cell that is currently out of the viewport, the table will be scrolled until the cell is visible.
If several editors are opened in the table at the same time, Tab/Tab+Shift navigates within the opened editors.

Editors

Editors

Creating Custom Editor (general guidelines)

Setting Action for Opening Editors

Default actions

Custom actions

Use Case: Editing an Entire Row/Column

The “Tab” Key Navigation