Skip to content

Selection

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 clears selection
getSelectedId returns the selected cells
mapSelection executes some custom method for all cells in the currently selected block
moveSelection moves selection to the specified direction
select selects the specified element
selectRange selects the specified range of elements
unselect cancels selection of the specified element
Section titled “Related Events”
Table 3 Selection events
Event Description
onAfterSelect fired after a cell is selected
onAfterUnSelect fired after a cell is unselected
onBeforeSelect fired before a cell is selected
onBeforeUnSelect fired before a cell is unselected
onSelectChange fired when selection is changed in DataGrid