Skip to main content

Common Selection Features

  • 2 minutes to read

Selection Rectangle

The selection rectangle allows users to drag the mouse pointer over rows, cells, or cards to select a range of items.

Marquee Selection

To enable content selection, ensure that DataControlBase.SelectionMode and DataViewBase.NavigationStyle properties are set to Row or Cell.

To enable the selection rectangle, set the DataViewBase.ShowSelectionRectangle property to true.

You cannot use the selection rectangle when:

To modify selection rectangle appearance, use the DataViewBase.SelectionRectangleStyle property:

A Custom Selection Rectangle Appearance Example

<dxg:TableView.SelectionRectangleStyle>
    <Style TargetType="Border">
        <Setter Property="Opacity" Value="0.37" />
        <Setter Property="Background" Value="Green" />
    </Style>
</dxg:TableView.SelectionRectangleStyle>

Selector Column

The GridControl allows users to select rows within the check box selector column (the “Web Style Row Selection” mode).

Checkbox Selector Column Position - Left

To display the check box selector column, enable the ShowCheckBoxSelectorColumn property and set the DataControlBase.SelectionMode property to Row or MultipleRow.

Use the CheckBoxSelectorColumnPosition property to specify the required check box selector column position. The CheckBoxSelectorColumnVisibleIndex property allows you to move the check box selector column (for any position, except Left and Right).

The following code sample displays the check box selector as the sixth column from the left border of the scrollable content area:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        x:Class="WpfApp41.MainWindow">
    <Grid>
        <dxg:GridControl ... 
                         SelectionMode="MultipleRow">
            <dxg:GridControl.View>
                <dxg:TableView ShowCheckBoxSelectorInGroupRow="False"
                               ShowCheckBoxSelectorColumn="True"
                               CheckBoxSelectorColumnPosition="None"
                               CheckBoxSelectorColumnVisibleIndex="5"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

The TableView.RetainSelectionOnClickOutsideCheckBoxSelector property specifies whether users can select rows only in the check box selector column.

The selector column FieldName is set to the CheckBoxSelectorColumnName field value. You can use this field to access the selector column in code.

Note

Row and Cell Hover Effects

Set the TableView.HighlightItemOnHover / TreeListView.HighlightItemOnHover property to true to enable hover effects:

Selection Fade

The GridControl fades selected rows when it loses focus.

Selection Fade

To disable selection fading, set the DataViewBase.FadeSelectionOnLostFocus to false. This property does not affect the GridControl in multiple cell selection mode.

See Also