Web Components Fijación de columnas de cuadrícula jerárquica

La función de fijación de columnas Ignite UI for Web Components en Web Components cuadrícula jerárquica permite a los desarrolladores bloquear columnas específicas en el orden deseado, lo que garantiza la visibilidad en todo momento, incluso cuando los usuarios se desplazan horizontalmente por el IgcGridComponent. Hay una interfaz de usuario integrada para la fijación de columnas, a la que se puede acceder a través de la barra de herramientas Web Components cuadrícula jerárquica. Además, los desarrolladores tienen la flexibilidad de crear una interfaz de usuario personalizada que cambia el estado de los pines de las columnas.

Web Components Hierarchical Grid Column Pinning Example

En este ejemplo se muestra cómo puede anclar una o varias columnas a la izquierda o a la derecha del IgcHierarchicalGridComponent archivo.

Column Pinning API

El anclaje de columnas se controla a través de la pinned propiedad de the IgcColumnComponent. Las columnas ancladas se representan en el lado izquierdo de la IgcHierarchicalGridComponent forma predeterminada y permanecen fijas a través del desplazamiento horizontal de las columnas no ancladas en el IgcHierarchicalGridComponent cuerpo.

<igc-hierarchical-grid id="hierarchicalGrid" class="hgrid" auto-generate="false"
        height="600px" width="800px" >
    <igc-column field="Artist" width="200px" pinned="true"></igc-column>
    <igc-column field="Debut" width="200px"></igc-column>
</igc-hierarchical-grid>

También puede usar los IgcHierarchicalGridComponent​ ​pinColumn métodos o unpinColumn de las IgcHierarchicalGridComponent columnas para anclar o desanclar por su nombre de campo:

this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');

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 columna ya se encuentra en el estado deseado.

Una columna está fijada a la derecha de la columna fijada más a la derecha. Se puede cambiar el orden de las columnas fijadas suscribiéndose al evento ColumnPin y cambiando la propiedad InsertAtIndex de los argumentos del evento al índice de posición deseado.

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

constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

Pinning Position

Puede cambiar la posición de fijación de la columna mediante la opción de configuración pinning. Le permite establecer la posición de las columnas en Inicio o Fin. Cuando se establece en Fin, las columnas se representan al final de la cuadrícula, después de las columnas sin fijar. Las columnas no fijadas se pueden desplazar horizontalmente, mientras que las columnas fijadas permanecen fijas a la derecha.

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

var grid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };

Demo

Custom Column Pinning UI

Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las columnas a través de la API relacionada.

Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular.

Esto se puede hacer creando una plantilla de encabezado para las columnas con un ícono personalizado.

<igc-hierarchical-grid id="hGrid" class="hierarchicalGrid" auto-generate="false"
    height="500px" width="100%">
    <igc-column id="CompanyName" field="CompanyName" header="Company Name" width="200px" pinned="true"></igx-column>
    <igc-column id="ContactName" field="ContactName" header="Contact Name" width="150px"></igx-column>
    <igc-column id="ContactTitle" field="ContactTitle" header="Contact Title" width="200px"></igx-column>
    <igc-row-island key="Orders" auto-generate="false">
        <igc-column id="OrderDate" field="OrderDate" header="Order Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="RequiredDate" field="RequiredDate" header="Required Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShippedDate" field="ShippedDate" header="Shipped Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShipVia" field="ShipVia" header="Ship Via" width="150px"></igx-column>
        <igc-row-island key="OrderDetails" auto-generate="false">
            <igc-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
            <igc-column field="Quantity" width="150px"></igx-column>
            <igc-column field="Discount" width="150px"></igx-column>
        </igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>

constructor() {
    var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    var CompanyName = this.CompanyName = document.getElementById('CompanyName') as IgcColumnComponent;
    var ContactName = this.ContactName = document.getElementById('ContactName') as IgcColumnComponent;
    var ContactTitle = this.ContactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;

    var OrderDate = this.OrderDate = document.getElementById('OrderDate') as IgcColumnComponent;
    var RequiredDate = this.RequiredDate = document.getElementById('RequiredDate') as IgcColumnComponent;
    var ShippedDate = this.ShippedDate = document.getElementById('ShippedDate') as IgcColumnComponent;
    var ShipVia = this.ShipVia = document.getElementById('ShipVia') as IgcColumnComponent;

    hGrid.data = this.data;
    CompanyName.headerTemplate = this.pinHeaderTemplate;
    ContactName.headerTemplate = this.pinHeaderTemplate;
    ContactTitle.headerTemplate = this.pinHeaderTemplate;
    OrderDate.headerTemplate = this.pinHeaderTemplate;
    RequiredDate.headerTemplate = this.pinHeaderTemplate;
    ShippedDate.headerTemplate = this.pinHeaderTemplate;
    ShipVia.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}

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

public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

Demo

Pinning Limitations

• Establecer los anchos de columna en porcentaje (%) hace que el cuerpo y el contenido del IgcHierarchicalGridComponent encabezado estén explícitamente desalineados cuando hay columnas ancladas. Para que el anclaje de columnas funcione correctamente, los anchos de las columnas deben estar en píxeles (px) o ser asignados automáticamente por el IgcHierarchicalGridComponent.

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 ID para la cuadrícula:

<igc-hierarchical-grid id="grid"></igc-hierarchical-grid>

Luego establezca las propiedades CSS relacionadas con esta clase:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

Demo

API References

• IgcHierarchicalGridComponent
• IgcColumnComponent

Additional Resources

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub