Area Selection in DataGrid

Webix DataGrid features Excel-like area selection. You can click on any cell in the DataGrid 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 be marked with a border with a handle:

To enable area selection in DataGrid, you should set the areaselect property to true:

webix.grid({
  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 mustn't be set.

Refreshing Area Selection

To refresh the selected area, you can use the refreshSelectArea method.

dgrid.refreshSelectArea();

Related sample:  Area Selection

Custom Select Area

Adding Custom Select Area

You can apply custom area selection in DataGrid.

Use the addSelectArea method:

dgrid.addSelectArea(start,end,preserve);

The parameters of the method are:

• start - (object) the id object of the top left cell, contains two parameters: the row ID and the column ID
• end - (object) the id object of the bottom right cell, contains two parameters: the row ID and the column ID
• preserve - (boolean) defines whether the previous select area should be saved, false by default
• area_name - (string) optional, the name of an area that can be used to change or to delete the area; by default it receives a unique name based on a timestamp
• css - (string) optional, the CSS style (className) for the border of an area. By default, the border of area selection is turquoise
• handle - (boolean) optional, enables/disables a handle for resizing of a selection area (enabled by default)

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

Removing Select Area

You can remove a select area with the removeSelectArea method:

dgrid.removeSelectArea();

To remove some particular select area, you need to pass its name as a parameter of 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, use the getSelectArea method. The method returns the object of the select area.

var area = dgrid.getSelectArea();

The object of a specific 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 some optional parameters: area_name, css and handle. Read more.

Multiple Area Selection

Several areas can be selected in DataGrid at once:

To enable multiple selection, you need to set the multiselect property to true:

webix.grid({
  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
})

If you have several select areas in the datagrid, you can get all of them at once with the getAllSelectAreas method:

var areas = dgrid.getAllSelectAreas();

The method returns an object with configuration of all select areas in the datagrid. Read more.

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.