[!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.
Visão geral da fixação de colunas de grade do Web Components
O Ignite UI for Web Components Data Grid dá suporte à capacidade de fixar colunas, permitindo que os usuários finais bloqueiem uma coluna em uma ordem de coluna específica.
Uma coluna ou várias colunas podem ser fixadas no lado esquerdo ou direito da Grade de Dados. Além disso, você pode alterar o estado do pino das colunas utilizando a pinColumn função.
Web Components Grid Column Pinning Example
A API de fixação de coluna na grade de dados pode ser ativada definindo a propriedade de Pinned uma coluna ou ao defini-la utilizando a pinColumn função da grade.
A Pinned propriedade tem três opções:
- Esquerda - a ativação
Leftposicionará as colunas fixadas no lado esquerdo da grade. - Direita - habilitar
Rightposicionará as colunas fixadas no lado direito da grade. - Nenhum - habilitar
Nonedesafixará uma coluna e reposicionará seu posicionamento padrão na grade.
As colunas não afixadas adjacentes às colunas fixadas ainda manterão a rolagem horizontal.
A pinColumn função contém dois parâmetros obrigatórios. O primeiro parâmetro é a coluna a ser fixada e o segundo é com a configuração de PinnedPositions enumeração.
Code Snippet
O código a seguir demonstra como implementar a fixação de coluna na Grade de Dados do Web Components com fixação de coluna usando o método Pinned propriedade e pinColumn função:
<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
A interface do usuário de fixação de coluna pode ser acessada dentro do IgcDataGridToolbarComponent componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da columnPinning barra de ferramentas como true. A barra de ferramentas exibirá um IgcButtonComponent, quando clicado, exibirá a interface do usuário de fixação de coluna. Esse botão também exibe o total de colunas fixadas à esquerda. Se a barra de ferramentas não for criada, habilitar a columnPinning propriedade não terá efeito e ocultará o botão.
O IgcDataGridToolbarComponent fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando a toolbarTitle propriedade, colocar texto na IgcButtonComponent configuração columnPinningText da propriedade e adicionar um cabeçalho de título à configuração da interface do usuário columnPinningTitle oculta da coluna.
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";
}