DataTable is an editable component, i.e. users have the possibility to edit it manually.
Generally, to make the table editable you should set the editable parameter to true.
Making DataTable editable
webix.ui({
view: "datatable",
editable:true
});
Related sample: Basic Use of Editors
After that you need to choose editors for each column. You can also define the action on which the editor(s) will be opened.
The library provides 12 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 the editor attribute of the columns parameter and set it to the desired type.
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 defined 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 a 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 editors open 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, as you should provide all the '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 = 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
webix.ui({
view: "datatable",
editable:true,
editaction: "custom",
select: "cell",
on:{
onAfterSelect: function (data,prevent) {
this.editCell(data.row, data.column);
}
}
});
To open all cells of the specified row/column for editing, make the following:
Opening editors in all cells of a row/column
// editing an entire row
var table1 = webix.ui({
view: "datatable",
editable: true,
editaction: "custom",
on: {
onItemClick: function (id) {
this.editRow(id);
}
}
});
// editing an entire column
var table2 = 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