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 as well possible.

For these needs take the following steps during component initialization:

  • set the editable property to the true state;
  • define editor type.
  • define editAction (single or double mouse click, or 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 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:""},
        { ...},
        { ...}
    ],  
    editable:true,
    editaction:"click",
    data: small_wide_film_set //data from 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 first and give it 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" value instead of "list," since it's the name of the newly create 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 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 for 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 parameter:

editlist.edit(7);

To open editor in the datatable cell, you need to specify row and column ID-s. However, it's recommended to use editRow, editColumn and editCell functions. 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 editor in the next editable item.
  • editStop() - closes all opened editors. Data is automatically saved;
  • editCancel() - cancel editing and closes all opened editors. Data isn't saved.
  • editFocus() - enables editing in the editor in focus (the method is helpful for several active editors on the page).

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 to edit 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 name attributes of form fields coincide with 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 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 form property:

    view:"datatable", 
    editable:true,
    form:'myform' //ID or object of related form/popup

A form should be defined separately, either in layout or in 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 data item in master component).

Related Articles

Back to top