DataTable is an editable component, i.e. users can 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,
autoConfig:true // editor:"text" will be added to each cell
});
Related sample: Basic Use of Editors
After that you can: - choose editors for each column - define the action on which the editor(s) will be opened
The library provides 12 predefined editors:
To add an editor for a column, set the editor attribute of the columns parameter:
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 () {/* ... */}
}
};
In this methods, you will need the following inner properties:
After your editor is in the collection, you can set it for a column:
Adding a new editor and setting it for a column
webix.ui({
view: "datatable",
columns: [
{ id: "title", header: "Film title", editor: "myeditor" }
]
});
Read more about custom editors.
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:
Opening editors on a double click
webix.ui({
view: "datatable",
editable: true,
editaction: "dblclick"
});
To use some other action/keyboard key for opening requires you to provide all the 'open-edit-close' logic.
To open editors on a key press:
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 (datatable events), 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, do 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, you can:
Webix components including datatable can be bound to another component to ensure synchronous changing of their data. For instance, you can bind a form to a grid, which allows to edit datatable data:
var form = $$("form1");
form.bind("datatable1");
//...after user edited the data
form.save();
Related sample: Editors. Bind Form
Note that name attributes of form fields must coincide with ids of datatable columns.
By default, the Tab(Tab+Shift) key(s) allows switch between editors defined in the table.
How it works:
Related sample: Tab Navigation and Scrolling
Related sample: Opening Multiple Editors
You can try your hand in Webix Tutorials.
Back to top