[!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 Grid Column Resizing
Ignite UI for Web Components 열 크기를 조정할 수 있는 기능을 지원하여 각 열의 너비에 따라 열을 표시하는 방법을 유연하게 결정할 수 있습니다.
Web Components Grid Column Resizing Example
Column resizing in the Ignite UI for Web Components DataGrid is on by default, and can be controlled by using the columnResizingMode property of the grid. This property has three options. Each option is explained below:
Deferred: 기본 옵션. 크기 조절 시 컬럼이 크기 또는 작아지는 것을 나타내는 분리기가 나타납니다.Immediate: 사이즈를 조정할 때는 분리기가 없습니다. 열의 너비는 포인터를 따라 열의 가장자리를 드래그하고 크기를 조절할 때 따라갑니다.None: 열은 크기 조절이 불가능합니다.
열 크기 조절이 로Deferred 설정되면, 표시되는 구분자는 격자의 와columnResizingSeparatorBackground 속성을 각각 사용하여columnResizingSeparatorWidth 색상과 너비를 변경할 수 있습니다.
크기 조절 모드가 전용으로 설정Deferred 되어 있을 때 열이 크기 조절되는 모습을 애니메이션으로 만들 수도 있습니다. 이 작업은 속성을 를 로columnResizingAnimationMode 설정Interpolate 함으로써 이루어집니다.
그리드의 각 열은 개별적으로 크기를 조정할 수 있는지 여부를 결정할 수 있습니다. 특정 열의 크기 조정을 활성화하거나 비활성화하려면 해당 열의 IsResizingEnabled 속성을 설정하면 됩니다.
별 너비 열의 크기를 조정하면 해당 열이 고정 열로 변경됩니다.
Code Snippet
다음 코드 조각은 Web Components 데이터 그리드에서 열 크기 조정을 구현하는 방법을 보여줍니다. 이 경우 Street 열은 크기 조정이 불가능합니다. 이 경우 열 크기 조정 구분 기호는 너비가 5픽셀이고 크기 조정이 가능한 열은 크기 조정 시 애니메이션이 적용됩니다.
import { ColumnResizingMode } from 'igniteui-webcomponents-data-grids';
import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-data-grids';
<igc-data-grid id="grid"
auto-generate-columns="false"
height="500px"
width="500px"
column-resizing-mode="Deferred"
column-resizing-animation-mode="Interpolate"
column-moving-separator-width="5" >
<igc-text-column field="FirstName"></igc-text-column>
<igc-text-column field="LastName"></igc-text-column>
<igc-text-column field="Street" is-resizing-enabled=false></igc-text-column>
<igc-text-column field="City"></igc-text-column>
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;