Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Grid Selection

    La Ignite UI for Blazor admite la selección de filas y celdas individuales o múltiples.

    Blazor Grid Selection Example

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Descripción general

    La selección en la cuadrícula de datos Blazor se habilita a nivel de filas y celdas y se puede configurar mediante la opción SelectionMode de la cuadrícula Blazor. Esta propiedad tiene cinco opciones diferentes, que se enumeran a continuación:

    • None: la selección no está habilitada.
    • SingleCell: la selección de una sola celda está habilitada.
    • SingleRow: la selección de una sola fila está habilitada.
    • MultipleCell: la selección de múltiples celdas está habilitada.
    • MultipleRow: la selección de varias filas está habilitada.
    • RangeCell: está habilitada la selección de un rango de múltiples celdas haciendo clic y arrastrando.

    SelectionBehavior tiene como valor predeterminado ModifierBased, donde solo se selecciona una fila o celda a la vez y se requieren teclas modificadoras (CTRL) para realizar una selección múltiple de elementos. SelectionBehavior establecido en Toggle permitirá seleccionar varias filas o celdas con un solo clic.

    MultipleRow incluye la siguiente funcionalidad:

    • Haga clic y arrastre para seleccionar filas
    • Mayús y haga clic para seleccionar varias filas.
    • Mayús y presione las teclas de flecha arriba/abajo para seleccionar varias filas.

    Al presionar la barra espaciadora se alterna la selección de la fila activa entre MultipleRow o SingleRow.

    Row Range Selection

    El siguiente ejemplo demuestra cómo seleccionar o anular la selección de todas las filas de la cuadrícula. Tenga en cuenta que SelectionMode debe establecerse en MultipleRow.

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    API References