[!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.
Web Components 그리드 열 고정 개요
Ignite UI for Web Components 열을 고정하는 기능을 지원하므로 최종 사용자는 특정 열 순서로 열을 잠글 수 있습니다.
하나 이상의 열을 데이터 그리드의 왼쪽이나 오른쪽에 고정할 수 있습니다. 또한 pinColumn 함수를 활용하여 열의 핀 상태를 변경할 수 있습니다.
Web Components Grid Column Pinning Example
데이터 그리드의 Column Pinning API는 열의 Pinned 속성을 설정하거나 그리드의 pinColumn 함수를 활용하여 설정할 때 활성화할 수 있습니다.
Pinned 속성에는 세 가지 옵션이 있습니다.
- 왼쪽 -
Left활성화하면 고정된 열이 그리드의 왼쪽에 배치됩니다. - 오른쪽 -
Right활성화하면 고정된 열이 그리드 오른쪽에 배치됩니다. - 없음 -
None활성화하면 열의 고정이 해제되고 그리드 내 기본 배치 위치가 변경됩니다.
고정된 열에 인접한 고정되지 않은 열은 여전히 가로 스크롤을 유지합니다.
pinColumn 함수에는 두 개의 필수 매개변수가 포함되어 있습니다. 첫 번째 매개 변수는 고정할 열이고 두 번째 매개 변수는 PinnedPositions 열거 설정입니다.
Code Snippet
다음 코드는 Pinned 속성과 pinColumn 함수를 사용하여 열 고정을 통해 Web Components 데이터 그리드에서 열 고정을 구현하는 방법을 보여줍니다.
<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
열 고정 UI는 그리드와 별도로 IgcDataGridToolbarComponent 구성 요소 내에서 액세스할 수 있습니다. 이를 위해 우리가 해야 할 일은 도구 모음의 columnPinning 속성을 true로 설정하는 것뿐입니다. 그러면 도구 모음에 IgcButtonComponent 표시되고, 클릭하면 열 고정 UI가 표시됩니다. 이 버튼은 고정된 왼쪽 열의 합계도 표시합니다. 도구 모음이 생성되지 않은 경우, columnPinning 속성을 활성화해도 효과가 없으며 버튼이 숨겨집니다.
그만큼 IgcDataGridToolbarComponent 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. toolbarTitle 속성, 텍스트 배치 IgcButtonComponent 설정하여 columnPinningText 속성을 설정하고 UI를 숨기는 열에 제목 헤더를 추가합니다. 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";
}