DataTable is an editable component, i.e. users have the possibility to edit it manually.
Generally, to make the table editable you should set parameter editable to true.
Making DataTable editable
dtable = new webix.ui({
view: "datatable",
...
editable:true
});
Related sample: Basic use of editors
2 main points related to editing are:
The library provides 10 predefined editors:
All of them are described in detail in the corresponding article.
To assign the needed editor type to a column, you should specify attribute editor of the columns parameter and set it to some of types.
Specifying the editor for a column
columns: [
{ id:"title", header:"Film title", editor:"text"}
]
Related sample: Basic use of editors
To create a custom editor, you should set the following methods to it:
webix.editors = { "myeditor": { focus: function () {...} getValue: function () {...}, setValue: function (value) {...}, render: function () {...} } };
The functions are defines with the help of the following inner properties:
After your editor is in the collection, you can set it for a column using the familiar technique:
Adding a new editor and setting it for the column
webix.ui({
view: "datatable",
columns: [
...
{ id: "title", header: "Film title", editor: "myeditor"}
]
});
Find more info on Data Editors in the dedicated chapter of the manual.
Generally, to set the action on which editors will be opened you should use the editaction property.
By default, editors are opened on a single click. To make opening editors occured on a double click, you should set editaction to dblclick as in:
Opening editors on a double click
webix.ui({
view: "datatable",
editable: true,
editaction: "dblclick"
...
});
Using some other action/keyboard key for opening requires some more treat cause you should provide all 'open-edit-close' logic by yourself.
To open editors on some keyboard key press you should do the following:
Opening editors on the Enter key press
var mytable = new webix.ui({
view: "datatable",
...
editable: true,
editaction: "custom"
});
webix.UIManager.addHotKey("enter", function(view){
var pos = view.getSelectedId();
view.edit(pos);
}, mytable);
Related sample: Basic use of editors
To open editors on some action you should do the following:
Opening editors on cell selecting
var mytable = new webix.ui({
view: "datatable",
...
editable:true,
editaction: "custom",
select: "cell",
on:{
onAfterSelect: function (data,prevent) {
this.editCell(data.row, data.column);
}
}
})
To open for editing all cells of the specified row/column make the following:
Opening editors in all cells of the row, column
//editing the entire row
var table1 = new webix.ui({
view: "datatable",
...
editable: true,
editaction: "custom",
on: {
onItemClick: function (id) {
this.editRow(id);
}
}
});
//editing the entire column
var table2 = new webix.ui({
view:"datatable",
...
editable: true,
editaction: "custom",
on: {
onItemClick: function(id){
this.editColumn(id);
}
}
})
Related sample: Opening multiple editors
Apart from row and column editing, datatable API offers the possibilities to
Webix components including datatable can be bound to another component to ensure 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 ids of datatable columns.
By default, the Tab(Tab+Shift) key(s) allows navigating within editors defined in the table.
Main points:
Related sample: Tab navigation and scrolling
Related sample: Opening multiple editors
Back to top