DataTable Editing

DataTable is an editable component, i.e. users have the possibility to edit it manually.

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

Making DataTable editable

webix.ui({
  view: "datatable",
  editable:true
});

Related sample:  Basic Use of Editors

There are two main points related to editing:

  1. The types of available editors.
  2. The action on which the cell(s) 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 edition only);
  • date;
  • color;
  • popup.

All of them are described in detail in the corresponding article.

To assign the needed editor type to a column, you should specify the editor attribute of the columns parameter and set it to the desired type.

Specifying the editor for a column

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

Related sample:  Basic Use of Editors

Creating custom editor

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 () {...}
  }
};

The functions are defined with the help of the following inner properties:

  • this.node - HTML tag of the editor. Appears after render() execution;
  • this.value - the initial value of an input. Appears after setValue(); execution;
  • 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 using the familiar technique:

Adding a new editor and setting it for a column

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

Find more info on Data Editors in the dedicated chapter of the manual.

Setting action for opening editors

Generally, 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 as in:

Opening editors on a double click

webix.ui({
    view: "datatable",
    editable: true,
    editaction: "dblclick"
});

Custom actions

Using some other action/keyboard key for opening requires some more treat, as you should provide all the 'open-edit-close' logic by yourself.

To open editors on some keyboard key press, you should do the following:

  • set the editaction property to the 'custom' value;
  • 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, you should do the following:

  • set the editaction property to the "custom" value.
  • specify the action (through the related event) and define the processing logic (in the event handler function). 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, make the following:

  1. Set the editaction property to the "custom" value.
  2. Use the on parameter to specify the action and define the processing logic:

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

Related sample:  Opening Multiple Editors

Apart from row and column editing, datatable API offers the possibilities to:

  • open 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, a simple function can be used to 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.
$$("form1").bind("datatable1");

Related sample:  Editors. Bind Form

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

More info about data binding.

The Tab key navigation

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

Main points:

  • The Tab key press closes the current editor and opens the next one. If the current editor is last in a row, the next one will be opened in the next row (from the beginning).
  • The Tab+Shift keys press closes the current editor and opens the previous one. If the current editor is first in a row, the next one will be opened in the previous row (from the end).
  • If a cell doesn't have an editor specified, it won't be included to navigation.
  • The opened editor always resides in the visible area. It means that if you click Tab and the cell is out of the visible area, the table will be scrolled to show it (regardless of the set mode).
  • When multiple editors are opened in the table at the same time, Tab/Tab+Shift navigates within the opened editors.

Related sample:  Tab Navigation and Scrolling

Related sample:  Opening Multiple Editors

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