Blazor Fijación de filas de cuadrícula

La función de fijar filas Ignite UI for Blazor en Blazor Grid te permite fijar una o varias filas en la parte superior o inferior de la cuadrícula. El fijamiento de filas permite a los usuarios finales fijar filas en un orden determinado, duplicándolas en un área especial que siempre es visible incluso cuando desplazan verticalmenteIgbGrid. El Blazor Grid tiene una interfaz integrada de fijación de filas, que se habilita inicializando unIgbActionStrip componente en el contexto de Grid. Además, puedes definir una interfaz personalizada y cambiar el estado de los pines de las filas a través de la API de fijación de filas.

Blazor Grid Row Pinning Example

Row Pinning UI

La interfaz integrada de fijación de filas se activa añadiendo unIgbActionStrip componente con elIgbGridPinningActions 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.

    <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

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

this.Grid.PinRowAsync("ALFKI", 0);

También puedes usar losIgbGrid​PinRow métodosUnpinRow para fijar o desfijar registros por su ID:

this.Grid.PinRowAsync("ALFKI", 0);
this.Grid.UnpinRowAsync("ALFKI");

Ten en cuenta que el ID de fila es el valor principal de la clave, definido por laPrimaryKey de la cuadrícula o por la propia instancia del registro. Ambos métodos devolven un valor booleano que indica si su operación respectiva es exitosa o no. Normalmente, la razón por la que fallan es que la fila ya está en el estado deseado.

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.

<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

Puedes cambiar la posición de fijación de fila mediante laPinning opción de configuración. Te permite ajustar la posición del área del pasador en Arriba o Abajo. Cuando se configura en Inferior, las filas fijadas se renderizan en la parte inferior de la cuadrija, después de las filas sin fijar. Las filas sin fijar pueden desplazarse verticalmente, mientras que las filas fijas 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 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:

<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

• IgbGrid
• IgbGridRow
• IgbRowType

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.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub