Selección de fila de cuadrícula Blazor
La función Ignite UI for Blazor Row Selection en Blazor Grid permite a los usuarios seleccionar, resaltar o anular la selección de forma interactiva una o varias filas de datos. 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 debe hacer es establecer RowSelection
en la propiedad Single
. Esto le brinda la oportunidad de seleccionar sólo una fila dentro de una cuadrícula. Puede seleccionar una fila haciendo clic en una celda o presionando la tecla de espacio cuando se enfoca en una celda de la fila y, por supuesto, puede seleccionar una fila haciendo clic en el campo selector de fila. Cuando se selecciona o deselecciona una fila, se emite el evento RowSelectionChanging
.
<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
Para habilitar la selección de varias filas en IgbGrid
simplemente establezca la propiedad RowSelection
en Multiple
. Esto habilitará un campo selector de filas en cada fila y en el encabezado IgbGrid
. El selector de filas permite a los usuarios seleccionar varias filas, y la selección persiste a través del desplazamiento, la paginación y las operaciones de datos, como la clasificación y el filtrado. La fila también se puede seleccionar haciendo clic en una celda o presionando la tecla de espacio cuando una celda está enfocada. Si ha seleccionado una fila y hace clic en otra mientras mantiene presionada la tecla Mayús, esto seleccionará todo el rango de filas. En este modo de selección, cuando hace clic en una sola fila, las filas seleccionadas anteriormente se deseleccionarán. Si hace clic mientras mantiene presionada la tecla Ctrl, la fila se alternará y se conservará la selección anterior.
<IgbGrid Width="100%" Id="grid" Height="100%" RowSelection=GridSelectionMode.Multiple PrimaryKey="Key" @ref=Grid AutoGenerate=true Data=northwindEmployees> </IgbGrid>
Notas
- La selección de filas activará el evento
RowSelectionChanging
. Este evento le brinda información sobre la nueva selección, la selección anterior y las filas que se agregaron y eliminaron de la selección anterior. Además, el evento es cancelable, por lo que esto le 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
Otro método API útil que proporciona IgbGrid
es SelectAllRows
. De forma predeterminada, este método seleccionará todas las filas de datos, pero si se aplica el filtrado, seleccionará solo las filas que coincidan con los criterios del filtro. Si llama al método con un parámetro falso, SelectAllRows(false)
siempre seleccionará todos los datos en la cuadrícula, incluso si se aplica el filtrado.
Nota Tenga en cuenta que
SelectAllRows
no seleccionará las filas que se eliminan.
Anular la selección de todas las filas
IgbGrid
proporciona un método DeselectAllRows
, que de forma predeterminada anulará la selección de todas las filas de datos, pero si se aplica el filtrado, anulará la selección solo de las filas que coincidan con los criterios del filtro. Si llama al método con un parámetro falso, DeselectAllRows(false)
siempre borrará todo el estado de selección de filas incluso si se aplica el filtrado.
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, IgbGrid
maneja todas las interacciones de selección de filas en el contenedor principal del selector de filas o en la fila misma, dejando solo la visualización del estado de la plantilla. La anulación de la funcionalidad básica generalmente se debe realizar mediante el evento RowSelectionChanging. En caso de que implemente una plantilla personalizada con un controlador Click
que anule la funcionalidad básica, debe detener la propagación del evento para preservar 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 propiedad selected
muestra si la fila actual está seleccionada o no, mientras que la propiedad index
se puede usar para acceder al índice de la 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 propiedad rowID
se puede utilizar para obtener una referencia de una fila IgbGrid
. Esto es útil cuando implementas un controlador click
en el elemento selector de fila.
En el ejemplo anterior, utilizamos IgbCheckbox
y vinculamos rowContext.selected
a su propiedad checked
. 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 propiedad SelectedCount
le muestra cuántas filas están seleccionadas actualmente, mientras que totalCount
le muestra cuántas filas hay en IgbGrid
en 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 propiedades SelectedCount
y TotalCount
se pueden utilizar para determinar si el selector principal debe estar marcado o indeterminado (seleccionado parcialmente).
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
IgbGrid
IgbGridRow
Cell
Recursos adicionales
- 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.