Available only in PRO Edition

Area Selection in DataTable

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.

Refreshing Area Selection

In order to refresh selected area, you can use the refreshSelectArea method.

$$("dtable").refreshSelectArea();

Related sample:  Area Selection

Custom Select Area

Adding Custom Select Area

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:

  • start - (object) the id object of the left top cell, contains two parameters: the row id and the column id
  • end - (object) the id object of the right cell, contains two parameters: the row id and the column id
  • preserve - (boolean) defines, if the previous select area should be saved, false by default
  • area_name - (string) optional, the name used to address to an area to change or to delete it; by default it's generated by the uid() method
  • css - (string) optional, the CSS style (className) for the border of an area. By default, the border of area selection is black
  • handle - (boolean) optional, enables/disables a handle for selection area resize (enabled by default)

The first three parameters are mandatory, all others are optional.

Removing Select Area

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.

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

Multiple Area Selection

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

Using Keyboard Shortcuts

There are several useful keyboard shortcuts that you can use for area selection.

  • Arrow keys - use Up/Down/Left/Right Arrow keys to select a necessary cell.
  • Shift+Arrow key - use this combination to extend cells selection by on cell.
  • Ctrl+Shift+Arrow key - this combination allows you to extend cells selection to the last nonempty cell in the same column/row. If the closest cell is empty, selection is extended to the next nonempty cell.
  • Ctrl+A - selects all cells in a sheet.
Back to top
If you have not checked yet, be sure to visit site of our main product Webix html5 ui library and page of datatable js product.