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

you can check the full snippet 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" }
]

you can check the full snippet 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);

you can check the full snippet 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:

1. Set the editaction property to “custom”.
2. 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);
    }
    }
});

you can check the full snippet Opening Multiple Editors

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.

The “Tab” Key Navigation

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.

you can check the full snippet Tab Navigation and Scrolling

you can check the full snippet Opening Multiple Editors