Intermediate

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.

webix.ready(function(){ webix.ui({ view:"datatable", columns:[ { id:"rank", editor:"text", header:""}, // other columns ], editable:true, editaction:"click", data: small_wide_film_set // data from an external js file }); })

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:

webix.protoUI({ 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:

webix.ui({ container:"listA", view:"editlist", template:"#rank#. #title#", editable:true, editor:"text", editValue:"title", data:big_film_set });

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:

editlist.edit(7);

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.

datatable.edit({ row:2, column:"title" });

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 are automatically saved;
editCancel - cancels editing and closes all opened editors. Data are not 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.

$$("form1").bind("datatable1");

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, e.g.:

rows:[ { view: "datatable", id:"data", autoConfig: true, data: grid_data, editable: true } ]

A form should be defined separately, either in a layout:

rows:[ { view: "datatable", id:"data", autoConfig: true, data: grid_data, editable: true }, { view:"form", id:"myform", elements:[ { view:"text", name:"title" }, { view:"button", label:"Save", css:"webix_primary" } ] } ]

or in a popup:

webix.ui({ view:"popup", id:"myform", body:{ view:"form", elements:[ { view:"text", name:"title" }, { view:"button", label:"Save", css:"webix_primary" } ] } });

Next pass the ID of the form or the ID of the popup in the form setting of the data component:

{ view: "datatable", id:"data", autoConfig: true, data: grid_data, editable: true, form:"myform" }

Form values need to be collected and pushed to the datatable with the getValues / updateItem API:

{ view: "form", id:"myform", elements: [ { view: "text", name: "title" }, { view: "button", label: "Save", css:"webix_primary", click(id) { const form = $$(id).getFormView(); var values = form.getValues(); $$("data").updateItem(values.id, values); } } ] }

Data Update - the alternative method of item editing
Data Editors