DataTable Editing

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

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

Making DataTable editable

webix.ui({
    view: "datatable",
    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

The library provides 12 predefined editors:

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

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.ui({
    view: "datatable",
    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.ui({
    view: "datatable",
    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 UIManager mixin (the addHotKey method) to add a hot key and define the processing logic.

Opening editors on the Enter key press

var mytable = webix.ui({
    view: "datatable",
    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 (datatable 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.ui({
    view: "datatable",
    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

// editing an entire row
var table1 = webix.ui({
    view: "datatable",
    editable: true,
    editaction: "custom",
    on: {
        onItemClick: function (id) {
            this.editRow(id);
        }
    }
});
 
// editing an entire column
var table2 = webix.ui({
    view:"datatable",
    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.

Editing via a bound Form

Webix components including datatable can be bound to another component to ensure synchronous changing of their data. For instance, you can bind a form to a grid, which allows to edit datatable data:

clicking a datatable row will trigger form filling;
then you edit data in the form;
form saving will send changed data back to the grid.

var form = $$("form1");
form.bind("datatable1");
//...after user edited the data
form.save();

Related sample: Editors. Bind Form

Note that name attributes of form fields must coincide with ids of datatable columns.

The "Tab" Key Navigation

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

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.

Webix Tutorials

You can try your hand in Webix Tutorials.

If you have not checked yet, be sure to visit site of our main product Webix html5 library and page of datatable html product.