[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Descripción general de fijación de columnas de cuadrícula Web Components
La Ignite UI for Web Components Data Grid admite la capacidad de anclar columnas, lo que permite a los usuarios finales bloquear una columna en un orden de columna particular.
Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de datos. Además, puede cambiar el estado de los pines de las columnas utilizando la función pinColumn.
Web Components Grid Column Pinning Example
La API de fijación de columnas en Data Grid se puede habilitar configurando la propiedad Pinned de una columna o al configurarla utilizando la función pinColumn de la cuadrícula.
La propiedad Pinned tiene tres opciones:
- Izquierda: habilitar
Leftcolocará las columnas fijadas en el lado izquierdo de la cuadrícula. - Derecha: habilitar
Rightcolocará las columnas fijadas en el lado derecho de la cuadrícula. - Ninguno: habilitar
Nonedesanclará una columna y reubicará su ubicación predeterminada dentro de la cuadrícula.
Las columnas no fijadas que están adyacentes a columnas fijadas seguirán manteniendo el desplazamiento horizontal.
La función pinColumn contiene dos parámetros obligatorios. El primer parámetro es la columna que se va a fijar y el segundo es la configuración de enumeración PinnedPositions.
Code Snippet
El siguiente código demuestra cómo implementar la fijación de columnas en Web Components Data Grid con fijación de columnas mediante la propiedad Pinned y la función pinColumn:
<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
auto-generate-columns="false"
default-column-min-width="120px"
scrollbar-style="thin"
>
<igc-text-column pinned="left" field="ID" header-text="Employee ID" width="100" horizontal-alignment="center"></igc-text-column>
<igc-text-column pinned="left" field="FirstName" header-text="First Name" width="170"></igc-text-column>
<igc-text-column pinned="left" field="LastName" header-text="Last Name" width="170"></igc-text-column>
<igc-date-time-column pinned="none" field="Birthday" header-text="Date of Birth" width="150" horizontal-alignment="center"></igc-date-time-column>
<igc-numeric-column pinned="none" field="Age" width="100" horizontal-alignment="center"></igc-numeric-column>
<igc-image-column pinned="none" field="CountryFlag" header-text="Country" width="140" content-opacity="1" horizontal-alignment="center"></igc-image-column>
<igc-text-column pinned="right" field="Street" header-text="Address" width="240"></igc-text-column>
<igc-text-column pinned="right" field="City" width="150" ></igc-text-column>
<igc-text-column pinned="right" field="Country" width="150" ></igc-text-column>
</igc-data-grid>
import { PinnedPositions } from 'igniteui-webcomponents-grids';
onButtonPinLeft() {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
// pinColumn Function
this.grid.pinColumn(idColumn, PinnedPositions.Left);
this.grid.pinColumn(firstNameColumn, PinnedPositions.Left);
this.grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}
onButtonPinRight() {
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.Right;
cityColumn.pinned = PinnedPositions.Right;
countryColumn.pinned = PinnedPositions.Right;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.Right);
this.grid.pinColumn(cityColumn, PinnedPositions.Right);
this.grid.pinColumn(countryColumn, PinnedPositions.Right);
}
onButtonUnPin() {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
//pinColumn function
this.grid.pinColumn(idColumn, PinnedPositions.None);
this.grid.pinColumn(firstNameColumn, PinnedPositions.None);
this.grid.pinColumn(lastNameColumn, PinnedPositions.None);
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.None;
cityColumn.pinned = PinnedPositions.None;
countryColumn.pinned = PinnedPositions.None;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.None);
this.grid.pinColumn(cityColumn, PinnedPositions.None);
this.grid.pinColumn(countryColumn, PinnedPositions.None);
}
Toolbar's Column Pinning UI
Se puede acceder a la interfaz de usuario de fijación de columnas desde el componente IgcDataGridToolbarComponent separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnPinning de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgcButtonComponent y, al hacer clic en él, se mostrará la interfaz de usuario de fijación de columnas. Este botón también muestra el total de columnas fijadas a la izquierda. Si no se crea la barra de herramientas, habilitar la propiedad columnPinning no tendrá ningún efecto y ocultará el botón.
IgcDataGridToolbarComponent proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad toolbarTitle, colocar texto en IgcButtonComponent configurando la propiedad columnPinningText y agregar un encabezado de título a la interfaz de usuario que oculta la columna configurando columnPinningTitle.
Demo
Code Snippet
<igc-dataGrid-toolbar
toolbar-title="Grid Title"
column-pinning="true"
column-pinning-text="Pinning"
column-pinning-title="Columns Pinned Left">
</igc-dataGrid-toolbar>
<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
auto-generate-columns="false"
default-column-min-width="120px"
scrollbar-style = "thin">
</igc-data-grid>
import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
private grid: IgcDataGridComponent;
private toolbar: IgcToolbarComponent;
connectedCallback() {
this.toolbar.targetGrid = this.grid;
let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
productNameColumn.pinned = true;
this.toolbar.columnPinning = true;
this.toolbar.toolbarTitle = "Grid Title";
this.toolbar.columnPinningText = "Pinning Text";
this.toolbar.columnPinningTitle = "Pinning Title Text";
}