Skip to content

How to work with Webix Grid select modes.

In DataGrid, you can specify different types of selection depending on your needs.

Available modes are:

  • cell;
  • row;
  • column;
  • multi cell;
  • multi row;
  • multi column;
  • block selection;
  • area selection.

The desired type is set through parameters select, multiselect, blockselect, and areaselect.

The table below shows which combination of parameters you should use for each type.

Table 1 Types of selection
Type of selection Related parameters
single cell 
webix.grid({
    select:"cell",
})
  </td>
</tr>
<tr>
  <td> single row</td>
  <td>
webix.grid({
    select:"row"
})
  </td>
</tr>
<tr>
  <td> single column</td>
  <td>
webix.grid({
    select:"column",
})
  </td>
</tr>
<tr>
  <td> multiple cells</td>
  <td>
webix.grid({
    select: "cell", multiselect: true
})
  </td>
</tr>
<tr>
  <td> multiple rows  </td>
  <td>
webix.grid({
    select: "row",
    multiselect: true
})
  </td>
</tr>
<tr>
  <td> multiple columns  </td>
  <td>
webix.grid({
    select: "column",
    multiselect: true
})
  </td>
</tr>
<tr>
  <td> visual block selection </td>
  <td>
select: "cell", multiselect: true, blockselect: true
  </td>
</tr>
</tbody>

For example, to set in your DataGrid multi row selection, you should use the following code:

// Enabling multi row selection
webix.grid({
  select:"row",
  multiselect:true
});

you can check the full snippet Multi-Row Selection

Section titled “Related Methods”
Table 2 Selection methods
Method Description
[clearSelection](/docs/api/datagrid-clearselection) clears selection
[getSelectedId](/docs/api/datagrid-getselectedid) returns the selected cells
[mapSelection](/docs/api/datagrid-mapselection) executes some custom method for all cells in the currently selected block
[moveSelection](/docs/api/datagrid-moveselection) moves selection to the specified direction
[select](/docs/api/datagrid-select) selects the specified element
[selectRange](/docs/api/datagrid-selectrange) selects the specified range of elements
[unselect](/docs/api/datagrid-unselect) cancels selection of the specified element
Section titled “Related Events”
Table 3 Selection events
Event Description
[onAfterSelect](/docs/api/datagrid-onafterselect-event) fired after a cell is selected
[onAfterUnSelect](/docs/api/datagrid-onafterunselect-event) fired after a cell is unselected
[onBeforeSelect](/docs/api/datagrid-onbeforeselect-event) fired before a cell is selected
[onBeforeUnSelect](/docs/api/datagrid-onbeforeunselect-event) fired before a cell is unselected
[onSelectChange](/docs/api/datagrid-onselectchange-event) fired when selection is changed in DataGrid