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:
With datatable you should include the editor property into a column object.
Data editors and edit actions are described here;
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
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
});
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 init webix.DataProcessor for the edited component.
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 in casse of 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:
Check editing methods in the API reference.
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:
$$('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.
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: