In this article build-in component editors and edit actions for them are discussed. To learn about Webix editing pattern, go to the main article.
editor:"text" Learn more |
![]() |
editor:"password" Learn more |
![]() |
editor:"inline-text" Learn more |
![]() |
editor:"select" Learn more |
![]() |
editor:"combo" Learn more |
![]() |
editor:"richselect" Learn more |
![]() |
editor:"multiselect" Available in Webix Pro edition onlyLearn more |
![]() |
editor:"checkbox" Learn more |
![]() |
editor:"inline-checkbox" Learn more |
![]() |
editor:"color" Learn more |
![]() |
editor:"date" Learn more |
![]() |
editor:"popup" Learn more |
![]() |
Related sample: Editor Collection
A base editor for text values of datatable and dataview cells, list rows. By default is enabled on clicking the needed item;
{ id:"title", header:"Film title", editor:"text",
Related sample: Basic use of editors
A base editor for passwords that masks symbols in the input.
//in the property sheet editor is defined by "type"
{ id:"pass", label:"Passoword", type:"password"}
Related sample: Property Sheet: Basic Initialization
A customizable text editor. Here you should set a template for the editing area, type and dimensions of an input area;
{ id:"year",template:"<input type='text' value='#value#' style='width:130px;'>",
editor:"inline-text"}
Related sample: Using 'inline' editors
A customizable editor that allow for choosing one of the offered values. It looks like a standard HTML select control.
{ id:"type", header:"Category", editor:"select", options:[...]}
Related sample: Using the 'select' editor
The options can be defined by either a simple or an associatibe array as well as by url. Look here for details.
Webix combo control with the possibility to filter a popup list by entering symbols into the dedicated input;
{ id:"title", header:"Film title", editor:"combo", options:[...]}
Related sample: Datatable: Combo Editor
In the Webix Pro edition the editor can be extended to show either a dataview or datatable in the popup:
Webix richselect control that is a non-editable variation of a combo editor.
{ id:"title", header:"Film title", editor:"richselect", options:[...]}
Related sample: Datatable: RichSelect Editor
In the Webix Pro edition the editor can be extended to show either a dataview or datatable in the popup:
The editor is available is Webix Pro edition only
The editor is based on Webix multiselect control and allows selecting multiple options at a time.
{ id:"assigned", editor:"multiselect", optionslist:true, options:[...]}
Related sample: Multi-select editor in the DataTable
A checkbox editor presupposes the choice between two values (true or false). In general, yon can assign any value to "true" and "false" checkbox states.
{ id:"ch3", header:"CheckBox",template:"{common.checkbox()}", editor:"checkbox"}
The notation above does nothing with checkbox value. If you want to derive its value as data item property, you should either:
1) Define checkbox options with values for each state:
{ id:"ch3", template:"{common.checkbox()}", editor:"checkbox", options:{
"true":"On","false":"Off","undefined":"Off"}
Related sample: Using 'inline' editors
2) Set checkValue and unCheckValue pair:
{ id:"ch1", checkValue:'on', uncheckValue:'off', template:"{common.checkbox()}",
editor:"checkbox"}
Related sample: Checkbox and radio in DataTable
A customizable checkbox. You can do without a checkbox icon and define any template for boolean values, even a styled text.
function custom_checkbox(obj, common, value){
if (value)
return "<div class='webix_table_checkbox checked'> YES </div>";
else
return "<div class='webix_table_checkbox notchecked'> NO </div>";
}
...
{ id:"ch1", header:"", template:custom_checkbox, width:40, editor:"inline-checkbox"},
Related sample: Custom radio and checkbox in DataTable
It is used for editing color value in the dataset with the help of a colorboard. Colors are stored as hex codes; hence, you should set an appropriate template for a component item to display the chosen result as color, for instance, make a colored background.
var tpl="<span style='background:#value#; border-radius:4px;'> </span> #value#";
{ id:"start", editor:"color", template:tpl, header:"Color A",width:120}
In its essence it is a datepicker that initializes a calendar to pick the necessary date.
{ map:"(date)#enddate#", editor:"date", header:"End date", width:120},
A popup window with body contents depending on data you edit.
{ id:"title", header:"Film title", editor:"popup"}
Related sample: Pop-up editors
configuration for popup editors.
You can configure editing controls inside popup windows, e.g. define other dimensions, alter properties of textarea, colorboard and calendar (check the corresponding articles.)
Popup editors can be configured in a scope with the following code. All the same-name editors in the application will be redefined:
//config may as well include only text, color and date hash
webix.editors.$popup = {
text:{
view:"popup", width:250, height:200,
body:{view:"textarea"}
},
color:{
view:"popup",
body:{ view:"colorboard", width:500, height:500, rows:50, cols:50 }
},
date:{
view:"popup",
body:{ view:"calendar", weekNumber:true }
}
};
Any instance of a popup editor can be configured separately, with the help of a popup property of an item in question:
Adding a weekHeader to the Date editor
{ id:"date",editor:"date", popup:{
view:"popup",
body:{
view:"calendar", borderless:true, weekNumber:true
}
}
Note that select editors (select, richselect, multiselect, combo) offer a wide range of customization possibilities that are described later.
Options for select editors (select, combo and richselect) are defined under the common pattern width the help of 'options' attribute of the dedicated column. There exist several possibilities:
1) Options are set directly in the "options" attribute either in an index or associative array as well as in a JS object:
Options defined by a simple array in the column config
columns:[
{ id:"cat_id", editor:"select", options:["Crime", "Thriller", "Western"]}
]
Related sample: Using the 'select' editor
Options defined by an associative array in the column config
columns:[
{ id:"cat_id", editor:"select", options:[
{id:1, value: "Crime"},
{id:2, value:"Thriller"},
{id:3, value:"Western"}
]}
]
Options defined by a JS object
columns:[
{ id:"cat_id", editor:"select", options:[
"1" : "Thriller",
"2" : "Crime",
"3" : "Western"
]}
]
Related sample: Using the 'select' editor. Specifying select options in a variable
2) Options are defined by a separate variable containing option collection. In this case the "options" attribute must be set to the name of this variable.
Setting select options in a variable
var film_options = [
{id:1, value: "Thriller"},
{id:2, value: "Crime"},
{id:3, value: "Western"}
];
//or
var film_options =["Crime", "Thriller", "Western"];
...
columns:[
{ id:"cat_id", editor:"select", options:film_options, header:"Category"}
]
Related sample: Datatable: Combo Editor
3) Options are taken from file or loaded by url defined by "string" value of options attribute.
Options loaded from an external file
columns:[
{ id:"cat_id", editor:"select", options:"data/options.json"}
]
Related sample: Loading data in the 'select' editor
"Options" have an alias attribute "collection" that features the same functionality.
Using "collection" to define options
columns:[
{ id:"cat_id", editor:"combo", collection:film_options, header:"Category"}
]
Webix select controls, combo, richselect and multiselect, are highly customizable, which means that the same-name editors
can be customized too. The following things can be changed:
Two column attributes are mandatory - options or collection to interprete options into text and suggest to define the confuguration of related popup list:
{ id:"year", editor:"combo", options:years, suggest:{
template:'#value#', //template of the input when editor is opened, default
filter:function(item,value){ //redefines default webix combo filter
if (item.value.toString().toLowerCase().indexOf(value.toLowerCase())===0)
return true;
return false;
},
body:{
template:'Year #value#', //template of list items
yCount:7, //10 by default
on:{
'onItemClick':function(id){
webix.message(this.getItem(id).value);
}
}
}}
}
Related sample: Datatable: Advanced Combo Editor
Multiselect specificity
To configure a suggest list for a multiselect editor, one should specify its suggest type - multisuggest:
{ id:"year", editor:"multiselect", options:years, optionlist:true, suggest:{
view:"multisuggest",
buttonText:"Select items"
}}
Webix datatable, treetable and property sheet can use any of the above mentioned editors in live mode and update the same data property is case it's used in another column other than the edited one.
//"rating" is used in both columns while it can be editable ony in the first one
columns:[
{ id:"rating", header:"Count", editor:"inline-text", liveEdit:true},
{ template:"#rating#", width:150 }
]
Related sample: Using 'live' editors
The moment the second column (the one that is automatically edited) changes its value, onLiveEdit event takes place.
When setting an editaction to "custom", you need to refer to UIManager and write a function to enable the needed editing pattern:
webix.UIManager.addHotKey("enter", function(view){
var pos = view.getSelectedId();
view.edit(pos);
}, gridc);
Here editing is enabled on pressing the "Enter" key on the selected item.
The library allows creating fully custom editors.
webix.editors = {
"mytext":{
focus:function(){...}
getValue:function(){...},
setValue:function(value){...},
render:function(){...}
}
};
To define a new editor, you should specify at least 5 methods for it:
For instance, this is how a biult-in text editor is made:
webix.editors.myeditor = {
focus:function(){
this.getInputNode(this.node).focus();
this.getInputNode(this.node).select();
},
getValue:function(){
return this.getInputNode(this.node).value;
},
setValue:function(value){
this.getInputNode(this.node).value = value;
},
getInputNode:function(){
return this.node.firstChild;
},
render:function(){
return webix.html.create("div", {
"class":"webix_dt_editor"
}, "<input type='text'>");
}
}
Inner properies
In addition to creating an editor "from scratch", you can extend any of the existing ones. It becomes helpful when slight changes are needed.
For instance you have a datatable column with e-mails. Input type email from HTML5 package will warn you in case some of e-mail address features is missing. The cell will be highlighted red.
In this case you extend the existing text editor and change render pattern in it:
webix.editors.myeditor = webix.extend({
render:function(){
return webix.html.create("div", {
"class":"webix_dt_editor"
}, "<input type='email'>");
}}, webix.editors.text);
Related sample: Custom Text Editor
Back to top