Editing Data Items

Library components have similar editing patterns, yet some peculiarities should be taken into account. Hence, there exist two groups:

Generally, a set of properties in the component's constructor enable on-the-go editing with its items. At the same time, programmatic editing is possible as well.

For these needs, take the following steps during the component initialization:

  • set the editable property to the true state;
  • define the editor type;
  • define editaction (a single or double mouse click, or a keyboard action).

With datatable you should include the editor property into a column object.

Data editors and edit actions are described here.

Datatable and Treetable Editing

By default, only datatable and treetable feature a built-in editing ability.

Editable and editaction are included into the component object, while editor is set for each column separately.

        { id:"rank", editor:"text", header:""},
        // other columns
    data: small_wide_film_set // data from an external js file

Related sample:  Opening Multiple Editors

Editing Other UI-Related Components

To enable edit mode with other UI-related components, you should create a prototype object on their base and extend them with editability. Then they will get the above mentioned functionality.

For instance, to edit UI-related list, create an editable prototype for it and give it a name to your taste:

    name:"editlist" // or "edittree", "dataview-edit" in case you work with them
}, webix.EditAbility, webix.ui.list);

And proceed with the list object initialization. Note that view is called "editlist" instead of "list," since it's the name of the newly created object from the code above:

    template:"#rank#. #title#",

Related sample:  List: Editing

Take notice of the editValue property here. It defines the dataset item from the template, since each record in the list and similar components has a template with several values from the initial data source. Study the nature of template-making here.

Note that editing allows on-page changes only and doesn't presuppose automatic data saving into the dataset. To actually save data, you should initialize webix.DataProcessor for the edited component.

Editing Methods

There's a collection of methods to enable and control editing.

Generally, you can switch any data item to the editable state with the edit method that requires item ID as a parameter:


To open the editor in a datatable cell, you need to specify row and column IDs. However, it's recommended to use the editRow, editColumn and editCell methods. See the datatable API for details.


In addition, the following methods are applicable:

  • editNext - closes the currently opened editor and opens an editor in the next editable item;
  • editStop - closes all opened editors. Data is automatically saved;
  • editCancel - cancels editing and closes all opened editors. Data isn't saved;
  • focusEditor - moves focus to the active editor (if any).

Check editing methods in the API reference.

Editing via a Form

Form and Component Binding

Webix components can be bound to each other to ensure select-based synchronous changing of their data. For instance, a simple function can be used to bind a form to a grid, which allows editing datatable data:

  • clicking the component item will trigger form filling;
  • then you edit data in the form;
  • form [saving] will send changed data back to the component.

Related sample:  Editors. Bind Form

Note that the name attributes of form fields coincide with the properties (fields) of the data used for the edited component, while the component can be non-editable itself. You can study data binding separately.

Related Form for an Editable Component

Webix editing API allows you to attach a form without data binding as well. Unlike binding, it works only for editable components.

First of all, you need to define the related form inside a master component with the help of the form property:

form:"myform" // the ID or the object of the related form/popup

A form should be defined separately, either in a layout or in a popup.

   view:"form", elements:[...]

Note that:

  • ID or object attached to a component by the form property should point to either a form, or a popup in which the form lies;
  • In case of a popup, it can be initialized hidden, so that it will be shown only when editing starts (when you click a data item in the master component).

Related Articles

Back to top