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
})

Note

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();

you can check the full snippet 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.

you can check the full snippet 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.