React Grid Cell Selection

    The Ignite UI for React Cell Selection in React Grid enables rich data select capabilities and offers powerful API in the IgrGrid component. The React Grid supports three selection modes:

    • Grid Multiple Cell Selection
    • Grid Single Selection
    • Grid None Selection

    Let's dive deeper into each of these options.

    React Grid Cell Selection Example

    The sample below demonstrates the three types of IgrGrid's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.

    Selection Types

    Grid Multiple-Cell Selection

    How to select cells:

    • By Mouse drag - Rectangular data selection of cells would be performed.
    • By Ctrl key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
    • Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding Shift key the cell selection range will be updated based on the first selected cell position (starting point).
    • Keyboard multi-cell selection by using the Arrow keys while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Keyboard multi-cell selection by using the Ctrl + ↑ ↓ ← → keys and Ctrl + Home/End while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Clicking with the Left Mouse key while holding Ctrl key will add single cell ranges into the selected cells collection.
    • Continuous multiple cell selection is available, by clicking with the mouse and dragging.

    Demo

    Grid Single Selection

    When you set the cellSelection to single, this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.

    When single cell is selected selected event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cells RangeSelected event is emitted.

    Grid None Selection

    If you want to disable cell selection you can just set cellSelection to none. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.

    Keyboard Navigation Interactions

    While Shift Key is Pressed

    • Shift + ↑ to add above cell to the current selection.
    • Shift + ↓ to add below cell to the current selection.
    • Shift + ← to add left cell to the current selection.
    • Shift + → to add right cell to the current selection.

    While Ctrl + Shift Keys are Pressed

    • Ctrl + Shift + ↑ to select all cells above the focused cell in the column.
    • Ctrl + Shift + ↓ to select all cells below the focused cell in the column.
    • Ctrl + Shift + ← to select all cells till the start of the row.
    • Ctrl + Shift + → to select all cells till the end of the row.
    • Ctrl + Shift + Home to select all cells from the focused cell till the first-most cell in the grid
    • Ctrl + Shift + End to select all cells from the focused cell till the last-most cell in the grid

    [!Note] Continuous scroll is possible only within Grid's body.

    Api Usage

    Below are the methods that you can use in order to select ranges, clear selection or get selected cells data.

    Select range

    selectRange - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
gridRef.current.selectRange(range);

    Clear cell selection

    clearCellSelection will clear the current cell selection.

    gridRef.current.clearCellSelection();

    Get Selected Data

    getSelectedData will return array of the selected data in format depending on the selection. Examples below:

    • If three different single cells are selected:
    expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
    • If three cells from one column are selected:
    expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
    • If three cells are selected with mouse drag from one row and three columns:
    expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
    • If three cells are selected with mouse drag from two rows and three columns:
    expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
    • If two different ranges are selected:
    expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
    • If two overlapping ranges are selected, the format would be:
    expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

    Features Integration

    The multi-cell selection is index based (DOM elements selection).

    • Sorting - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
    • Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
    • Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
    • Resizing - On column resizing selected cells will not be cleared.
    • Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
    • pinning - Selected cell will not be cleared. Same as hiding
    • groupBy - On column grouping selected cells will not be cleared.

    Styling

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

    <IgrGrid className="grid"></IgrGrid>

    Then set the related CSS properties for that class:

    .grid {
    --ig-grid-cell-selected-text-color: #FFFFFF;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062A3;
}

    Demo

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.