Fijación de filas en cuadrículas jerárquicas React

The Ignite UI for React Row Pinning feature in React Hierarchical Grid allows you to pin one or multiple rows to the top or bottom of grid. Row Pinning allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the IgrHierarchicalGrid vertically. The React Hierarchical Grid has a built-in row pinning UI, which is enabled by initializing an IgrActionStrip component in the context of Hierarchical Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

React Hierarchical Grid Row Pinning Example

Row Pinning UI

The built-in row pinning UI is enabled by adding an IgrActionStrip component with the IgrGridPinningActions component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well.

<IgrHierarchicalGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>

Row Pinning API

Row pinning is controlled through the pinned input of the Row. Pinned rows are rendered at the top of the IgrHierarchicalGrid by default and stay fixed through vertical scrolling of the unpinned rows in the IgrHierarchicalGrid body.

gridRef.current.getRowByIndex(0).pinned = true;

You may also use the IgrHierarchicalGrid's pinRow or unpinRow methods of the to pin or unpin records by their ID:

gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');

Note that the row ID is the primary key value, defined by the primaryKey of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state.

A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the RowPinning event and changing the InsertAtIndex property of the event arguments to the desired position index.

const rowPinning = (event: IgrPinRowEventArgs) => {
    event.detail.insertAtIndex = 0;
}

<IgrHierarchicalGrid autoGenerate={true} onRowPinning={rowPinning}>
</IgrHierarchicalGrid>

Pinning Position

You can change the row pinning position via the pinning configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom.

const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom }; 

<IgrHierarchicalGrid ref={gridRef} autoGenerate={true} pinning={pinning}>
</IgrHierarchicalGrid>

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.

const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
    const row = ctx.cell.row;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(row)}>📌</span>
        </>
    );
}

<IgrHierarchicalGrid primaryKey="ID" autoGenerate={false}>
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
    <IgrRowIsland childDataKey="Orders" autoGenerate={true}></IgrRowIsland>
</IgrHierarchicalGrid>

Al hacer clic en el icono personalizado, el estado del pin de la fila relacionada se puede cambiar utilizando los métodos API de la fila.

const toggleRowPin = (row: IgrRowType) => {
  row.pinned = !row.pinned;
}

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 identificadores de fila, al seleccionar filas ancladas también se seleccionan sus copias (y viceversa). Además, la selección de rango (por ejemplo, usar SHIFT + clic) dentro del área anclada 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 ancladas 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:

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

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

• IgrHierarchicalGrid
• HierarchicalGridRow
• IgrRowType

Additional Resources

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

• Ignite UI for React Forums
• Ignite UI for React GitHub