[Data Grid Sample] Extending DataGrid for Uniformize All Types of Selection Overlays

Forge Component
Published on 3 Aug (14 hours ago) by OutSystems R&D
14 votes
Published on 3 Aug (14 hours ago) by OutSystems R&D

If there is a requirement to standardize all types of selection overlays, it is possible to extend the default DataGrid behavior.

With DataGrid Component we can have multiple selections with different ranges, intersections with previous range selections or deleted rows. There is a set of different ways to trigger a selection on the grid:

  1. Checkbox selection (by clicking on the checkbox column)
  2. Row number selection (by clicking on the row number column)
  3. Dragging on cells/rows to select cells/rows (selection range)
  4. Shift + mouse up/down (selection range)
  5. Ctrl + Mouse click (multi-selection range)

The current version of DataGrid uses a set of different color overlays according to the applied selection type. Depending on the type of selection, the colors of the overlay might change from a lighter to a darker blue. The last one is used for the last range of selected cells/rows.

The image above intends to illustrate a set of different selections including:

  • Selection by checkbox 
  • Selection by checkbox intersected with selection range
  • Selection by checkbox intersected with multi-selection range 
  • Selection by selection range 
  • Selection by multi-selection range 
  • Selection by selection range intersected with multi-selection range 

Applying this extension to standardize all overlays caused by the different types of selection you will end up with the following result:

You can check how to extend the DataGrid in the sample attached in the post, just download the .oml file. Then you will find all the needed CSS inside the Sample’s Style Sheet.

Or from the Style Sheet Editor button:

Hope this sample is useful if you need to extend DataGrid to standardize the overlay from the different types of selections that DataGrid provides.