Available only in PRO Edition
Webix DataTable features Excel-like area selection. You can click on any cell in the DataTable and move the mouse pointer over the grid, a block of cells will be selected and colored in gray.
When you release the mouse pointer, the selection will remain and marked with bold border with a handle, like this:
To enable area selection in DataTable, you should specify the areaselect property with the true value in the datatable configuration.
{
view:"datatable",
id: "table",
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released", width:80},
{ id:"votes", header:"Votes", width:120},
{ id:"rating", header:"Rating", width:80},
],
areaselect:true, data:small_film_set
}
Area selection will work only with other selection types disabled. So, the select property shouldn't be set.
In order to refresh selected area, you can use the refreshSelectArea method.
$$("dtable").refreshSelectArea();
Related sample: Area Selection
You can apply custom area selection in the DataTable.
For this purpose, you need to use the addSelectArea method. This method allows creating a custom select area.
$$("dtable").addSelectArea(start,end,preserve);
The parameters are:
The first three parameters are mandatory, all others are optional.
You can easily remove an unnecessary select area by using the removeSelectArea method.
$$("dtable").removeSelectArea();
To remove some particular select area, you need to pass its name as a parameter of the removeSelectArea(). If the name isn't passed to the method, it will remove the last unnamed select area.
To get a select area, you should make use of the getSelectArea method. The method returns the object of the select area.
var area = $$("dtable").getSelectArea();
The object of a certain select area can be received by passing the name of the area as a parameter. Without parameters, the method returns the object of the last select area.
The returned object will contain the mandatory parameters: start, end and preserve. It can also include the optional parameters: area_name, css and handle. The details on the parameters are given here.
Several areas can be selected in the DataTable at once. The image below illustrates this feature:
To enable multiple selection, you need to define the multiselect property with the true value in the Datatable configuration:
{
view:"datatable",
id: "table",
columns:[
{ id:"rank", header:"", css:"rank", width:50},
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released", width:80},
{ id:"votes", header:"Votes", width:120},
{ id:"rating", header:"Rating", width:80},
],
areaselect:true,
multiselect:true, data:small_film_set
}
While having several select areas in the datatable, you can get all of them at once. For this purpose, apply the getAllSelectAreas method:
var areas = $$("dtable").getAllSelectAreas();
The method returns an object that contains configuration objects of all select areas in the datatable. The parameters of area objects are described above.
Related sample: Area Selection
There are several useful keyboard shortcuts that you can use for area selection.