Descripción general de la selección de cuadrícula Blazor
Con la función Ignite UI for Blazor Select en Blazor Grid, puede interactuar y manipular datos fácilmente mediante simples interacciones con el mouse. Hay tres modos de selección disponibles:
- Selección de fila
- Selección de celda
- Column selection
Con la propiedad RowSelection
, puede especificar:
- Ninguno
- Soltero
- Selección múltiple
Blazor Grid Selection Example
El siguiente ejemplo demuestra tres tipos de comportamientos de selección de celdas en IgbGrid
. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles.
Blazor Grid Selection Options
La Ignite UI for Blazor IgbGrid
proporciona tres modos de selección diferentes: selección de filas, selección de celdas y selección de columnas. De forma predeterminada, solo el modo de selección de celdas múltiples está habilitado en IgbGrid
. Para cambiar/habilitar el modo de selección, puede usar las propiedades RowSelection
, CellSelection
o Selectable
.
Blazor Grid Row Selection
La propiedad RowSelection
le permite especificar las siguientes opciones:
- La selección
None
fila estaría deshabilitada paraIgbGrid
. Single
: estará disponible la selección de solo una fila dentro deIgbGrid
.Multiple
: la selección de varias filas estaría disponible usando los selectores de filas, con una combinación de teclas como Ctrl + clic, o presionando la tecla de espacio una vez que una celda está enfocada.
Vaya al tema Selección de filas para obtener más información.
Blazor Grid Cell Selection
La propiedad CellSelection
le permite especificar las siguientes opciones:
None
: la selección de celdas estaría deshabilitada paraIgbGrid
.Single
: estará disponible la selección de solo una celda dentro deIgbGrid
.Multiple
: actualmente, este es el estado predeterminado de la selección enIgbGrid
. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic continuamente con el botón izquierdo del mouse.
Vaya al tema Selección de celda para obtener más información.
Blazor Grid Column Selection
La propiedad Selectable
le permite especificar las siguientes opciones para cada IgbColumn
. La selección de columna correspondiente se habilitará o deshabilitará si esta propiedad se establece en verdadero o falso, respectivamente.
Esto lleva a las siguientes tres variaciones:
- Selección única: haga clic con el mouse sobre la celda de la columna.
- Selección de varias columnas: mantenga presionado Ctrl + clic del mouse sobre las celdas de la columna.
- Selección de columnas de rango: mantener presionada la tecla Mayús + clic del mouse selecciona todo lo que se encuentra en el medio.
Vaya al tema Selección de columnas para obtener más información.
Blazor Grid Context Menu
Usando el evento ContextMenu
puedes agregar un menú contextual personalizado para facilitar tu trabajo con IgbGrid
. Con un clic derecho en el cuerpo de la grilla, el evento emite la celda en la que se activa. El menú contextual funcionará con la celda emitida.
Si hay una selección multicelda, pondremos lógica, que comprobará si la celda seleccionada está en el área de selección multicelda. Si es así, también emitiremos los valores de las celdas seleccionadas.
Básicamente la función principal se verá así:
public void RightClick(MouseEventArgs e)
{
this.MenuX = e.ClientX + "px";
this.MenuY = e.ClientY + "px";
}
public void onMenuShow(IgbGridCellEventArgs e)
{
IgbGridCellEventArgsDetail detail = e.Detail;
this.ShowMenu = true;
this.ClickedCell = detail.Cell;
}
El menú contextual tendrá las siguientes funciones:
- Copia el valor de la celda seleccionada.
- Copie el dataRow de la celda seleccionada.
- Si la celda seleccionada está dentro de un rango de selección de varias celdas, copie todos los datos seleccionados.
public void CopyCellData()
{
this.ShowMenu = false;
this.SelectedData = this.ClickedCell.Value.ToString();
StateHasChanged();
}
public async void CopyRowData()
{
this.ShowMenu = false;
NwindDataItem rowData = this.NwindData.ElementAt(this.ClickedCell.Id.RowIndex);
this.SelectedData = JsonConvert.SerializeObject(rowData);
StateHasChanged();
}
public async void CopyCellsData()
{
this.ShowMenu = false;
var selectedData = await this.grid.GetSelectedDataAsync(true, false);
this.SelectedData = JsonConvert.SerializeObject(selectedData);
StateHasChanged();
}
IgbGrid
buscará los datos copiados y los pegará en un elemento contenedor.
La plantilla que vamos a utilizar para combinar la grilla con el menú contextual:
<div class="container vertical">
<div class="wrapper" oncontextmenu="event.preventDefault()">
<IgbGrid AutoGenerate="false"
CellSelection="GridSelectionMode.Multiple"
ContextMenu="onMenuShow"
@oncontextmenu="RightClick"
Name="grid"
@ref="grid"
Data="NwindData">
<IgbColumn Field="ProductID"
Header="Product ID">
</IgbColumn>
<IgbColumn Field="ProductName"
Header="Product Name">
</IgbColumn>
<IgbColumn Field="UnitsInStock"
Header="Units In Stock"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn Field="UnitPrice"
Header="Units Price"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn Field="Discontinued"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
<IgbColumn Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
</IgbGrid>
<div class="selected-data-area">
@SelectedData
</div>
</div>
@if (ShowMenu)
{
<div id="menu" class="contextmenu" style="left: @MenuX; top: @MenuY">
<span id="copySingleCell" class="item" @onclick="CopyCellData">
<IgbIcon @ref=icon IconName="content_copy" Collection="material"></IgbIcon>Copy Cell Data
</span>
<span id="copyRow" class="item" @onclick="CopyRowData">
<IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Row Data
</span>
<span id="copyMultiCells" class="item" @onclick="CopyCellsData">
<IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Cells Data
</span>
</div>
}
</div>
Seleccione varias celdas y presione el botón derecho del mouse. Aparecerá el menú contextual y después de seleccionar Copiar datos de celdas, los datos seleccionados aparecerán en el cuadro vacío de la derecha.
El resultado es:
Known Issues and Limitations
Cuando la grilla no tiene PrimaryKey
configurada y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la grilla), una fila perderá el siguiente estado después de un dato. solicitud completa:
- Selección de fila
- Fila Expandir/contraer
- Edición de filas
- Fijación de filas
API References
Additional Resources
- Selección de fila
- Selección de celda
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Virtualización y rendimiento
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.