Vue DataGrid - selection

A user can select rows in a single or multiple mode. In multiple mode, a user can select all rows at once. To disable this feature, assign false to the allowSelectAll.

Single Row Selection Demo Multiple Row Selection Demo

By default, once a user selects a row, the data source is instantly notified about it. This may lower the UI component performance if the data source is remote and the user is allowed to select all rows at once. In this case, we recommend making the selection deferred.

Deferred Selection Demo

See Also

• Selection
• Deferred Selection
• onSelectionChanged

To select rows, a user should press Ctrl + A or click the Select All check box in the selection column's header. This check box can also be used to deselect all rows. If a filter is applied, the Select All functionality affects all rows that meet filtering conditions.

If false, this property disables the Select All functionality. In this case, the check box clears selection and is hidden if no rows are selected.

DataGrid Demo TreeList Demo

View on GitHub

Consider making selection deferred if the UI component needs to operate a large volume of data and the user is allowed to select all rows at once. Unlike usual (or "instant") selection, in the case of deferred selection, the UI component requests data only when you demand this using the API, for example, when the getSelectedRowsData() or getSelectedRowKeys() method is called. This mode has certain specifics that determine the API you need to use. For more information, see the Deferred Selection article.

View Demo

The following selection modes are available in the UI component:

• Single
  Only one row can be in the selected state at a time.

  DataGrid Demo TreeList Demo

• Multiple
  Several rows can be in the selected state at a time.

  DataGrid Demo TreeList Demo

View on GitHub View on GitHub

selectAllMode specifies how records should be selected on clicking the "Select All" check box and by calling the selectAll()/deselectAll() methods. The following modes are available.

• "page"
  Selects records on currently rendered pages.

  NOTE

  This mode is incompatible with deferred selection.

• "allPages"
  Selects records on all pages.

View Demo View on GitHub

See Also

• Selection - User Interaction

This property is in effect only if selection is deferred.

Available values:

• "base"
  Strings with different base letters are unequal. Examples: a ≠ b, a = á, a = A.

• "accent"
  Strings with different base letters or accents are unequal. Examples: a ≠ b, a ≠ á, a = A.

• "case"
  Strings with different base letters or case are unequal. Examples: a ≠ b, a = á, a ≠ A.

• "variant"
  Strings with different base letters, accents, diacritic marks, or case are unequal. Other differences may also apply. Examples: a ≠ b, a ≠ á, a ≠ A.

The following code snippet filters the initial selection for diacritics. As a result, 'apple' and 'APPLE' are checked, but not 'Àpple'.

$(() => {
    $('#gridContainer').dxDataGrid({
        dataSource,
        selection: {
            mode: 'multiple',
            deferred: true,
            sensitivity: 'accent'
        },
        selectionFilter: ['fruit', '=', 'Apple']
    });
});

const dataSource = [ 
    { fruit: 'apple' },
    { fruit: 'Àpple' },
    { fruit: 'APPLE' }
];

<dx-data-grid 
    [dataSource]="dataSource" 
    [selectionFilter]="selectionFilter"
>
    <dxo-selection
        mode="multiple"
        [deferred]="true"
        sensitivity="accent"
    >
    </dxo-selection>
</dx-data-grid>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    dataSource = [
        { fruit: 'apple' },
        { fruit: 'Àpple' },
        { fruit: 'APPLE' }
    ];

    selectionFilter = ['fruit', '=', 'Apple'];
}

<template>
    <DxDataGrid
        :dataSource="dataSource"
        :selectionFilter="selectionFilter"
    >
        <DxSelection
            :deferred="true"
            mode="multiple"
            sensitivity="accent"
        />
    </DxDataGrid>
</template>

<script setup>
import DxDataGrid, { DxSelection } from "devextreme-vue/data-grid";

const dataSource = [ 
    { fruit: 'apple' },
    { fruit: 'Àpple' },
    { fruit: 'APPLE' }
];

const selectionFilter = ['fruit', '=', 'Apple'];
</script>

import React from 'react';
import DataGrid, { Selection } from 'devextreme-react/data-grid';

const dataSource = [
    { fruit: 'apple' },
    { fruit: 'Àpple' },
    { fruit: 'APPLE' }
];

const selectionFilter = ['fruit', '=', 'Apple'];

function App() {
    return (
        <React.Fragment>
            <DataGrid
                dataSource={dataSource}
                selectionFilter={selectionFilter}
            >
                <Selection
                    deferred={true}
                    mode="multiple"
                    sensitivity="accent"
                />
            </DataGrid>
        </React.Fragment>
    );
}

export default App;

The possible values are:

• "onClick" The selection column is always shown. Checkboxes appear once a user clicks in the column or if two or more rows are selected programmatically or using keyboard shortcuts. Checkboxes disappear once row selection is canceled.

• "onLongTap" The selection column with all the checkboxes appears and disappears on long tap (click and hold).

• "always" The selection column with all the checkboxes is always visible. A user can select a row by clicking the checkbox or its grid cell, but not the row itself.

• "none"
  The selection column with all the checkboxes is hidden. Users can select rows with keyboard shortcuts or long tap (click and hold).

Keyboard shortcuts work identically regardless of the chosen mode.

View Demo View on GitHub

See Also

• Selection - User Interaction