Intermediate

Editing Data Items

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

Editing Datatable and Treetable
Editing Other UI-Related Components

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