Web Components Fijación de filas de cuadrícula de árboles

    The Ignite UI for Web Components Row Pinning feature in Web Components Tree 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 IgcTreeGridComponent vertically. The Web Components Tree Grid has a built-in row pinning UI, which is enabled by initializing an IgcActionStrip component in the context of Tree Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

    Web Components Tree Grid Row Pinning Example

    Row Pinning UI

    La interfaz integrada de fijación de filas se activa añadiendo unIgcActionStrip componente con elIgcGridPinningActions componente. La tira de acción se muestra automáticamente al pasar el cursor por una fila y mostrará un icono de botón de fijar o desclavar 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 para que se vea para cada fila.

    <igc-tree-grid auto-generate="false">
    <igc-column field="Name" header="Full Name"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

    Row Pinning API

    El fijamiento de fila se controla mediante lapinned entrada de laRow. Las filas fijadas se renderizan por defecto en la parte superior delIgcTreeGridComponent cuerpo y permanecen fijas mediante desplazamiento vertical de las filas sin fijar en elIgcTreeGridComponent cuerpo.

    this.grid.getRowByIndex(0).pinned = true;

    También puedes usar losIgcTreeGridComponent​pinRow métodosunpinRow para fijar o desfijar registros por su ID:

    this.grid.pinRow('ALFKI');
this.grid.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.

    Una fila queda clavada debajo de la última fila clavada. Cambiar el orden de las filas fijadas puede hacerse suscribiéndose alRowPinning evento y cambiando laInsertAtIndex propiedad de los argumentos del evento al índice de posición deseado.

    <igc-tree-grid id="grid" auto-generate="true">
</igc-tree-grid>

    constructor() {
    var grid1 = document.getElementById('grid1') as IgcTreeGridComponent;
    grid1.data = this.data;
    grid1.addEventListener("rowPinning", this.rowPinning);
}

public rowPinning(event) {
    event.detail.insertAtIndex = 0;
}

    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.

    <igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>

    var grid = document.getElementById('dataGrid') as IgcTreeGridComponent;
grid.pinning = { rows: RowPinningPosition.Bottom };

    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.

    <igc-tree-grid id="grid" primary-key="ID" auto-generate="false">
    <igc-column id="column1" name="column1"></igc-column>
</igc-tree-grid>

    constructor() {
    var grid = document.getElementById('grid') as IgcTreeGridComponent;
    var column = document.getElementById('column1') as IgcColumnComponent;

    grid.data = this.data;
    column.bodyTemplate = this.pinCellTemplate;
}

public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
   const index = ctx.cell.id.rowIndex;
    return html`<span @pointerdown=${(e: any) => this.togglePinning(index)}>📌</span>`;
}

    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.

    public togglePinning(index: number) {
    var grid = document.getElementsByTagName("igc-tree-grid")[0] as IgcTreeGridComponent;
    grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).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:

    <igc-tree-grid class="grid"></igc-tree-grid>

    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

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