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

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:

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 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.
$$("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.

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

view:"datatable", 
editable:true,
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",
id:"myform",
elements:[...]  
 
//or
view:"popup", 
id:"myform",
body:{
   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