Blazor Selección de filas de cuadrícula

    La función de selección de filas Ignite UI for Blazor en Blazor Grid permite a los usuarios seleccionar, resaltar o anular la selección de una o varias filas de datos de forma interactiva. Hay varios modos de selección disponibles en IgbGrid:

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

    Ejemplo de selección de filas Blazor

    En el ejemplo siguiente se muestran los tres tipos de IgbGrid Es decir, que Selección de filas comportamiento. Utilice el menú desplegable a continuación para habilitar cada uno de los modos de selección disponibles. Utilice la casilla de verificación para esconder o mostrar las casillas de verificación del selector de filas.

    Configuración

    Para configurar la selección de filas en IgbGrid, solo necesita configurar la propiedad RowSelection. Esta propiedad acepta la enumeración GridSelectionMode.

    GridSelectionMode expone los siguientes modos:

    • Ninguno
    • Soltero
    • Múltiple

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

    Ninguna selección

    En IgbGrid, la selección de filas predeterminada está deshabilitada (RowSelection es Ninguno). Por lo tanto, no puede seleccionar o anular la selección de una fila mediante la interacción con la interfaz de usuario IgbGrid; la única forma de completar estas acciones es utilizar los métodos API proporcionados.

    Selección única

    La selección de una sola fila ahora se puede configurar fácilmente, lo único que necesita hacer es establecer RowSelection la Single propiedad. Esto le da la oportunidad de seleccionar solo una fila dentro de una cuadrícula. Puede seleccionar una fila haciendo clic en una celda o presionando la SPACE tecla cuando se enfoca en una celda de la fila y, por supuesto, puede seleccionar una fila haciendo clic en el campo selector de filas. Cuando se selecciona o se anula la selección RowSelectionChanging, se emite un evento.

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

    Selección múltiple

    To enable multiple row selection in the IgbGrid just set the RowSelection property to Multiple. This will enable a row selector field on each row and in the IgbGrid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the SPACE key when a cell is focused. If you have selected one row and click on another while holding the SHIFT key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you click while holding the CTRL key, the row will be toggled and the previous selection will be preserved.

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

    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á habilitada, se muestran los selectores de filas, pero si no desea mostrarlos, puede configurar HideRowSelectors en verdadero.
    • Cuando cambia entre modos de selección de filas en tiempo de ejecución, esto borrará el estado de selección de filas anterior.

    Uso de API

    Seleccionar filas mediante programación

    El siguiente fragmento de código se puede utilizar para seleccionar una o varias filas simultáneamente (a través de PrimaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puede elegir si la selección de fila anterior se borrará o no. La selección anterior se conserva de forma predeterminada.

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

    Esto agregará las filas que corresponden a las entradas de datos con los ID 1, 2 y 5 a la selección IgbGrid.

    Anular la selección de filas

    Si necesita anular la selección de filas mediante programación, puede utilizar el método DeselectRows.

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

    Evento de selección de fila

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

    • OldSelection: matriz de ID de fila que contiene el estado anterior de la selección de fila.
    • NewSelection: matriz de ID de fila que coinciden con el nuevo estado de la selección de fila.
    • Added: conjunto de ID de fila que se agregan actualmente a la selección.
    • Removed: conjunto de ID de fila que se eliminan actualmente según el estado de selección anterior.
    • Event: el evento original que desencadenó el cambio de selección de fila.
    • Cancel: le permite evitar el cambio de selección de fila.
    <IgbGrid Width="100%" Id="grid" Height="100%" RowSelection=GridSelectionMode.Multiple PrimaryKey="Key" @ref=Grid AutoGenerate=true RowSelectionChanging='RowSelectionChanging' Data=northwindEmployees> </IgbGrid> @code { private void RowSelectionChanging(IgbRowSelectionEventArgs args) { // handler } }

    Seleccionar todas las filas

    Another useful API method that IgbGrid provides is SelectAllRows. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. If you call the method with false parameter, SelectAllRows(false) will always select all data in the grid, even if filtering is applied.

    Nota Tenga en cuenta que SelectAllRows no seleccionará las filas que se eliminan.

    Anular la selección de todas las filas

    IgbGrid provides a DeselectAllRows method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. If you call the method with false parameter, DeselectAllRows(false) will always clear all row selection state even if filtering is applied.

    Cómo obtener filas seleccionadas

    Si necesita ver qué filas están seleccionadas actualmente, puede obtener sus ID de fila con el captador SelectedRows.

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

    Además, asignar ID de fila a SelectedRows le permitirá cambiar el estado de selección de la cuadrícula.

    <IgbGrid Width="100%" Id="grid" Height="100%" RowSelection=GridSelectionMode.Multiple PrimaryKey="Key" SelectedRows=selectedRows @ref=Grid AutoGenerate=true Data=northwindEmployees> </IgbGrid> @code { public object[] selectedRows = new object[] { 1, 2, 5 }; }

    Plantillas de selector de filas

    Puede crear plantillas de encabezados y selectores de filas en IgbGrid y también acceder a sus contextos, lo que proporciona una funcionalidad útil para diferentes escenarios.

    De forma predeterminada, controla IgbGrid todas las interacciones de selección de filas en el contenedor principal del selector de filas o en la propia fila, dejando solo la visualización de estado de la plantilla. La invalidación de la funcionalidad base generalmente se debe realizar mediante el evento RowSelectionChanging. En caso de que implemente una plantilla personalizada con un Click controlador que invalide la funcionalidad base, debe detener la propagación del evento para conservar el estado de fila correcto.

    Plantilla de fila

    Para crear una plantilla de selector de filas personalizada, dentro de IgbGrid puede usar la propiedad RowSelectorTemplate. Desde la plantilla puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que le brindan información sobre el estado de la fila.

    La Selected propiedad muestra si la fila actual está seleccionada o no, mientras que la Index propiedad se puede usar para acceder al índice de fila.

    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);

    La RowID propiedad se puede usar para obtener una referencia de una IgbGrid fila. Esto es útil cuando se implementa un click controlador en el elemento selector de filas.

    En el ejemplo anterior estamos usando un IgbCheckbox y nos vinculamos rowContext.selected a su Checked propiedad. Vea esto en acción en nuestra demostración de numeración de filas.

    Plantilla de encabezado

    Para crear una plantilla de selector de encabezado personalizada, dentro de IgbGrid, puede usar la propiedad HeadSelectorTemplate. Desde la plantilla puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que le brindan información sobre el estado del encabezado.

    La SelectedCount propiedad muestra cuántas filas están seleccionadas actualmente, mientras que TotalCount muestra cuántas filas hay en IgbGrid total.

    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>;
};

    Las SelectedCount propiedades y TotalCount se pueden usar para determinar si el selector de cabeza debe estar marcado o indeterminado (parcialmente seleccionado).

    Demostración de numeración de filas

    Esta demostración muestra el uso de selectores de filas y encabezados personalizados. Este último usa Index para mostrar números de fila y un IgbCheckbox vinculado a Selected.

    Demostración de selectores de filas de estilo Excel

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

    Demostración de selección condicional

    Esta demostración evita que se seleccionen algunas filas mediante el evento RowSelectionChanging y una plantilla personalizada con la casilla de verificación deshabilitada para filas no seleccionables.

    Referencias de API

    Recursos adicionales

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