Blazor Tree Grid Row Selection

The Ignite UI for Blazor Row Selection feature in Blazor Tree Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgbTreeGrid:

• Ninguna selección
• Selección múltiple
• Selección única

Blazor Row Selection Example

La muestra siguiente muestra los cuatro tipos deIgbTreeGrid 's Selección de filas comportamiento. Utiliza los botones de abajo para activar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción con el botón a través de un cuadro de mensajes tipo snackbar. Usa el botón de cambio para Esconderse o Programa La casilla de selección de filas.

Setup

Para configurar la selección de filas en elIgbTreeGrid, solo necesitas establecer laRowSelection propiedad. Esta propiedad aceptaGridSelectionMode enumeración.

GridSelectionModeexpone los siguientes modos:

• Ninguno
• Soltero
• Múltiple

• MultipleCascade

A continuación veremos cada uno de ellos con más detalle.

Ninguna selección

Por defectoIgbTreeGrid, la selección de fila está deshabilitada (RowSelectiones Ninguna). Así que no puedes seleccionar o deseleccionar una fila mediante la interacción con laIgbTreeGrid interfaz; la única forma de completar estas acciones es usar los métodos de la API proporcionados.

Selección única

La selección de una sola fila ahora se puede configurar fácilmente, lo único que tienes que hacer es ponerRowSelection enSingle propiedad. Esto te da la oportunidad de seleccionar solo una fila dentro de una cuadrija. Puedes seleccionar una fila haciendo clic en una celda o pulsando la SPACE tecla cuando enfocas una celda de la fila, y por supuesto puedes seleccionar una fila haciendo clic en el campo selector de filas. Cuando se selecciona la fila o se desseleccionaRowSelectionChanging, se emite un evento.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Single
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler for selection change
    }
}

Selección múltiple

Para permitir la selección de varias filas en elIgbTreeGrid solo establece laRowSelection propiedad paraMultiple. Esto permitirá un campo selector de filas en cada fila y en elIgbTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, manteniéndose la selección durante operaciones de desplazamiento, paginación y datos, como ordenar y filtrar. La fila también puede seleccionarse haciendo clic en una celda o pulsando la SPACE tecla cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes pulsada la SHIFT tecla, esto seleccionará todo el rango de filas. En este modo de selección, cuando haces clic en una sola fila, las filas seleccionadas anteriores se desseleccionan. Si haces clic mientras mantienes pulsada la CTRL tecla, la fila se alternará y la selección anterior se conservará.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>

Cascade Selection

Para habilitar la selección de filas en cascada en elIgbTreeGrid solo establece laRowSelection propiedad paraMultipleCascade. Esto permitirá un campo selector de filas en cada fila y en elIgbTreeGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, lo que seleccionaría a todos los hijos del árbol de abajo. La selección persiste a través de desplazamientos, paginación y operaciones de datos, como ordenar y filtrar. La fila también puede seleccionarse haciendo clic en una celda o pulsando la SPACE tecla cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes la SHIFT tecla mantufa, la selección de un registro padre seleccionará todos sus hijos aunque no estén dentro del rango seleccionado. En este modo de selección, al hacer clic en una sola fila, las filas seleccionadas previamente se desplacerán. Si haces clic mientras mantienes pulsada la CTRL tecla, la fila y sus hijos se alternarán y la selección anterior se conservará.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.MultipleCascade
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>

En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un estado indeterminado.

Notas

• La selección de fila activaráRowSelectionChanging el evento. Este evento te proporciona información sobre la nueva selección, la selección antigua, las filas que se han añadido y eliminado de la selección antigua. Además, el evento se puede cancelar, así que esto te permite evitar la selección.
• Cuando la selección de filas está activada, se muestran los selectores de filas, pero si no quieres mostrarlos, puedes ponerloHideRowSelectors en true.
• Cuando cambia entre modos de selección de filas en tiempo de ejecución, esto borrará el estado de selección de filas anterior.

API usage

Select Rows Programmatically

El fragmento de código que aparece a continuación puede usarse para seleccionar una o varias filas simultáneamente (víaPrimaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puedes elegir si la selección de fila anterior se limpia o no. La selección anterior se conserva por defecto.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Select>Select</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Select()
        {
            object[] array = new object[] { 1,2, 5 };
            await this.grid.SelectRowsAsync(array, true);
        }
    }

Esto añadirá las filas que corresponden a las entradas de datos con IDs 1, 2 y 5 a laIgbTreeGrid selección.

Deselect Rows

Si necesitas deseleccionar filas programáticamente, puedes usar elDeselectRows método.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Deselect>Deselect</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Deselect()
        {
            object[] array = new object[] { 1, 2, 5 };
            await this.grid.DeselectRowsAsync(array);
        }
    }

Row Selection Event

Cuando hay algún cambio en la selecciónRowSelectionChanging de fila, se emite un evento .RowSelectionChanging expone los siguientes argumentos:

• OldSelection- array de identificadores de fila que contiene el estado anterior de la selección de fila.
• NewSelection- array de identificadores de fila que coinciden con el nuevo estado de la selección de fila.
• Added- array de identificadores de fila que se añaden actualmente a la selección.
• Removed- array de identificadores de fila que actualmente se eliminan según el estado de selección antiguo.
• Event- el evento original que desencadenó el cambio de selección de fila.
• Cancel- Permite prevenir el cambio de selección de fila.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler
    }
}

Select All Rows

Otro método útil de API queIgbTreeGrid proporciona esSelectAllRows Por defecto, este método seleccionará todas las filas de datos, pero si se aplica filtrado, seleccionará solo las filas que coincidan con los criterios del filtro. Si llamas al método con un parámetro falso,SelectAllRows(false) siempre seleccionará todos los datos de la cuadrícula, incluso si se aplica filtrado.

Nota Ten en cuenta que esoSelectAllRows no seleccionará las filas que se eliminan.

Deselect All Rows

IgbTreeGridproporciona unDeselectAllRows método que, por defecto, deselecciona todas las filas de datos, pero si se aplica filtrado solo deselecciona las filas que cumplen con los criterios del filtro. Si llamas al método con un parámetro falso,DeselectAllRows(false) siempre borrará todo el estado de selección de fila incluso si se aplica filtrado.

How to get Selected Rows

Si necesitas ver qué filas están seleccionadas actualmente, puedes obtener sus identificadores de fila con elSelectedRows getter.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=GetSelected>Get selected</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void GetSelected()
        {
            var selected = this.grid.SelectedRows;
        }
    }

Además, asignar identificadores de fila aSelectedRows te permitirá cambiar el estado de selección de la cuadrícula.

<IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             SelectedRows=selectedRows
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
</IgbTreeGrid>

@code {
    public object[] selectedRows = new object[] { 1, 2, 5 };
}

Row Selector Templates

Puedes crear plantillas de seleccionadores de cabecera y fila en elIgbTreeGrid y también acceder a sus contextos, que ofrecen funcionalidad útil para diferentes escenarios.

Por defecto, elIgbTreeGrid gestiona todas las interacciones de selección de filas en el contenedor padre del selector de filas o en la propia fila, dejando solo la visualización de estado para la plantilla. Sobrescribir la funcionalidad base debería hacerse generalmente usando el Evento de RowSelectionChanging. En caso de que implementes una plantilla personalizada con unClick que anula la funcionalidad base, deberías detener la propagación del evento para preservar el estado correcto de la fila.

Plantilla de fila

To create a custom row selector template, within the IgbTreeGrid you can use the RowSelectorTemplate property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.

LaSelected propiedad indica si la fila actual está seleccionada o no, mientras que laIndex propiedad puede usarse para acceder al índice de filas.

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox checked></igc-checkbox>
</div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox></igc-checkbox>
</div>`;
    }
}, false);

The RowID property can be used to get a reference of an IgbTreeGrid row. This is useful when you implement a click handler on the row selector element.

En el ejemplo anterior estamos usando unIgbCheckbox y nos vinculamosrowContext.selected a suChecked propiedad. Mira esto en acción en nuestra Demo de Numeración de Filas.

Header Template

Para crear una plantilla personalizada de selector de cabecera, dentro de ,IgbTreeGrid puedes usar laHeadSelectorTemplate propiedad. Desde la plantilla puedes acceder a la variable de contexto proporcionada implícitamente, con propiedades que te dan información sobre el estado del encabezado.

LaSelectedCount propiedad te muestra cuántas filas están seleccionadas en ese momento yTotalCount cuántas filas hay en total.IgbTreeGrid​

public RenderFragment<IgbHeadSelectorTemplateContext> Template = (context) =>
{
    return @<div> <img style="min-width:80px;" src="https://es.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"/></div>;
};

LasSelectedCount propiedades yTotalCount pueden usarse para determinar si el selector de cabeza debe estar marcado o indeterminado (parcialmente seleccionado).

Row Numbering Demo

Esta demo muestra el uso de selectores personalizados de cabecera y filas. Este último se utilizaIndex para mostrar números de fila y unIgbCheckbox bound toSelected.

Excel Style Row Selectors Demo

Esta demostración utiliza plantillas personalizadas que se parecen a los selectores de filas y encabezados similares a los de Excel.

Conditional Selection Demo

Esta demo impide que algunas filas se seleccionen usando elRowSelectionChanging evento y una plantilla personalizada con la casilla desactivada para filas no seleccionables.

API References

• IgbTreeGrid
• TreeGridRow

Additional Resources

• Selección
• Selección de celda
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Virtualización y rendimiento

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub