Fijación de filas de cuadrícula Blazor
La función Ignite UI for Blazor Row Fining en Blazor Grid le permite fijar una o varias filas en la parte superior o inferior de la cuadrícula. Row Pinning permite a los usuarios finales fijar filas en un orden particular, duplicándolas en un área especial que siempre está visible incluso cuando desplazan IgbGrid
verticalmente. Blazor Grid tiene una interfaz de usuario de fijación de filas incorporada, que se habilita inicializando un componente IgbActionStrip
en el contexto de Grid. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de fijación de las filas a través de la API de fijación de filas.
Blazor Grid Row Pinning Example
Row Pinning UI
La interfaz de usuario integrada para fijar filas se habilita agregando un componente IgbActionStrip
con el componente IgbGridPinningActions
. La franja de acción se muestra automáticamente al pasar el cursor sobre una fila y mostrará un ícono de botón para fijar o quitar según el estado de la fila para la que se muestra. También se muestra una acción adicional que permite desplazar la copia de la fila fijada a la vista para cada fila fijada.
<IgbGrid Width="100%"
Height="100%"
PrimaryKey="Key"
AutoGenerate=true
Data=northwindEmployees
RowEditable=true>
<IgbColumn Field="ID" Editable=false></IgbColumn>
<IgbColumn Field="ContactName"></IgbColumn>
<IgbColumn Field="ContactTitle"></IgbColumn>
<IgbColumn Field="City" Sortable=true></IgbColumn>
<IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true></IgbColumn>
<IgbColumn Field="Address" Sortable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
<IgbColumn Field="Country" Sortable=true></IgbColumn>
<IgbColumn Field="Phone" Sortable=true></IgbColumn>
<IgbActionStrip>
<IgbGridPinningActions></IgbGridPinningActions>
<IgbGridEditingActions></IgbGridEditingActions>
</IgbActionStrip>
</IgbGrid>
Row Pinning API
La fijación de filas se controla a través de la entrada Pinned
de Row
. Las filas fijadas se representan en la parte superior de IgbGrid
de forma predeterminada y permanecen fijas mediante el desplazamiento vertical de las filas no fijadas en el cuerpo IgbGrid
.
this.Grid.PinRowAsync("ALFKI", 0);
También puede utilizar los métodos PinRow
o UnpinRow
de IgbGrid
para anclar o desanclar registros por su ID:
this.Grid.PinRowAsync("ALFKI", 0);
this.Grid.UnpinRowAsync("ALFKI");
Tenga en cuenta que el ID de fila es el valor de la clave principal, definido por la PrimaryKey
de la cuadrícula o la instancia de registro misma. Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la fila ya se encuentra en el estado deseado.
Se fija una fila debajo de la última fila fijada. Se puede cambiar el orden de las filas fijadas suscribiéndose al evento RowPinning
y cambiando la propiedad InsertAtIndex
de los argumentos del evento al índice de posición deseado.
<IgbGrid Width="100%"
Id="grid"
RowPinningScript="rowPinningHandler"
Height="100%"
PrimaryKey="Key"
AutoGenerate="true"
Data="northwindEmployees">
</IgbGrid>
*** In JavaScript ***
function rowPinningHandler(event) {
event.detail.insertAtIndex = 0;
}
igRegisterScript("rowPinningHandler", rowPinningHandler, false);
Pinning Position
Puede cambiar la posición de fijación de filas a través de la opción de Pinning
configuración. Le permite establecer la posición del área del pin en Superior o Inferior. Cuando se establece en Inferior, las filas ancladas se representan en la parte inferior de la cuadrícula, después de las filas no ancladas. Las filas no ancladas se pueden desplazar verticalmente, mientras que las filas ancladas permanecen fijas en la parte inferior.
<IgbGrid Id="grid"
Width="100%"
Height="100%"
Pinning=PinningConfig
PrimaryKey="Key"
AutoGenerate=true
Data=northwindEmployees>
</IgbGrid>
@code {
public string Key = "ID";
private Northwind.EmployeesType[] northwindEmployees = Array.Empty<Northwind.EmployeesType>();
public IgbPinningConfig PinningConfig = new IgbPinningConfig()
{
Rows = RowPinningPosition.Bottom
};
protected override async Task OnInitializedAsync()
{
northwindEmployees = await this.northwindService.GetEmployees() ?? northwindEmployees;
}
}
Custom Row Pinning UI
Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las filas a través de la API relacionada.
Via extra column with icon
Digamos que en lugar de una franja de acción le gustaría mostrar un ícono de pin en cada fila, permitiendo al usuario final hacer clic y cambiar el estado del pin de una fila en particular. Esto se puede hacer agregando una columna adicional con una plantilla de celda que contenga el ícono personalizado.
<IgbColumn Width="70px" BodyTemplateScript="WebGridRowPinCellTemplate"/>
// In Javascript
igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleRowPin = function toggleRowPin(index) {
var grid = document.getElementsByTagName("igc-grid")[0];
grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
const index = ctx.cell.id.rowIndex;
return html`<div>
<span onpointerdown='toggleRowPin("${index}")'>📌</span>
</div>`;
}, false);
Manifestación
Row Pinning Limitations
- Solo se pueden anclar registros que existen en la fuente de datos.
- El estado de fijación de filas no se exporta a Excel. La cuadrícula se exporta como si no se hubiera aplicado ninguna fijación de filas.
- Las copias de filas fijadas en el área desplazable de la cuadrícula son una parte integral de cómo otras características de la cuadrícula logran su funcionalidad en presencia de filas fijadas y, por lo tanto, su creación no se puede deshabilitar ni eliminar.
- Como la selección de filas funciona completamente con ID de fila, al seleccionar filas fijadas también se seleccionan sus copias (y viceversa). Además, la selección de rango (por ejemplo, usando Shift + clic) dentro del área fijada funciona de la misma manera que seleccionar un rango de filas dentro del área desplazable. La selección resultante incluye todas las filas intermedias incluso si no están fijadas actualmente. Obtener las filas seleccionadas a través de la API solo devuelve una única instancia de cada registro seleccionado.
Styling
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgbGrid class="grid"></IgbGrid>
Luego configure las propiedades CSS relacionadas para esa clase:
.grid {
--ig-grid-pinned-border-width: 5px;
--ig-grid-pinned-border-style: double;
--ig-grid-pinned-border-color: #FFCD0F;
--ig-grid-cell-active-border-color: #FFCD0F;
}
Manifestación
API References
Additional Resources
- Virtualización y rendimiento
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Cambio de tamaño de columna
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.