Intermediate

Data Editors

In this article built-in component editors and edit actions for them are discussed. To learn about Webix editing pattern, go to the main article.

Opening and Closing Editors

  • an editor for the component is enabled, or opened, by the editAction that is defined for the whole component;
  • an editor is closed by moving focus outside the editor (e.g. clicking another component part) or by hotkeys 'Enter' for saving the new value and 'Esc' for exiting without saving.

Editor Types

Table Editor Types
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 only
Learn 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

Text

A base editor for text values of DataTable and DataView cells, list rows. By default it is enabled on clicking the needed item;

{ id:"title", header:"Film title", editor:"text",

Related sample:  Basic use of editors

Password

A base editor for passwords that masks symbols in the input.

//in the property sheet editor is defined by "type"
{ id:"pass", label:"Password", type:"password"}

Related sample:  Property Sheet: Basic Initialization

Inline-text

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

  • If you specify the editor:"inline-text" attribute the component will provide a special processing treat for the editor while editing: invoking edit-related events.
  • If you don't specify the editor attribute you should provide the processing logic for the editor on your own.

Select

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 associative array as well as by url. Look here for details.

Combo

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

Pro Extensions for Combo Editor

In the Webix Pro edition the editor can be extended to show either a dataview or datatable in the popup:

Richselect

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

Pro Extensions for Richselect Editor

In the Webix Pro edition the editor can be extended to show either a dataview or datatable in the popup:

Multiselect

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

  • The optionlist property is defined for the editable element (here:column) so that it can parse multiple values from the editor into a single cell value.
  • The options can be defined by either a simple or an associative array as well as by url. Look here for details.
  • The editor is subject to extensive customization.

Checkbox

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

Inline-checkbox

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

Color

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;'>&nbsp</span> #value#";
 
{ id:"start", editor:"color", template:tpl, header:"Color A",width:120}

Related sample:  Color Editor

Date

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},

Related sample:  Date Editor

A popup window with body contents depending on data you edit.

  • textarea - a multi-row input for editing long texts. The popup features width: 250 and height:50 by default.
{ id:"title",   header:"Film title", editor:"popup"}

Related sample:  Pop-up editors

  • colorboard and calendar - come in popup windows by default and are set as date and color editor types.

$Popup

configuration for popup editors.

Popup Configuration

Configuring popups in a scope

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

Configuring popups separately

Any instance of a popup editor can be configured separately, with the help of a suggest property of an item in question:

Adding a weekHeader to the Date editor

{ id:"start", editor:"date", suggest:{
    type:"calendar",
    body:{
        weekNumber:true
    }
}}
  • type (string) - type of a suggest list that defines which Webix component will be used in a suggest body. The possible values are:
    • "list" - default suggest type that is used for select editors (combo, richselect and multiselect), can be omitted;
    • "calendar" - suggest type for date editor;
    • "colorboard" - suggest type for color editor;
  • body (object) - configuration of a component (list, calendar or colorboard)

Select editors offer a wide range of customization possibilities that are described in detail separately.

Defining options for select editors

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"}
]

Advanced configuration of select editors

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:

  • template of list items;
  • template of the input field (combo editor only);
  • filtering pattern (combo only);
  • text of "Select" button (multiselect only);
  • the number of list items in the popup;
  • functions can be attached to a list.

Two column attributes are mandatory - options or collection to interpret options into text and suggest to define the configuration 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"
}}

Datatable and treetable specificity - live editors

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 only 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.

Edit Actions

  • 'click' - opens the editor on a single click (used by default);
  • 'dblclick' - opens the editor on a double click;
  • 'custom' - allow setting the necessary way of editing, e.g a keyboard event.

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.

Custom Editors

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:

  • focus() - sets the focus to the input with the editor;
  • getValue() - gets the value of the editor;
  • setValue() - sets the value of the editor;
  • render() - renders the editor;
  • getInputNode() - gets the input area object.

For instance, this is how a built-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 properties

  • this.node - HTML tag of the editor. Appears after render() execution;
  • this.value - the initial value of an input. Appears after setValue(); execution;
  • this.config - editor configuration;
  • this.popup - popup ID (is used for editors with popup windows)

Extending Functionality of an Editor

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