[!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
Ignite UI for Web Components의 열 크기 조정은 기본적으로 켜져 있으며 그리드의 columnResizingMode 속성을 사용하여 제어할 수 있습니다. 이 속성에는 세 가지 옵션이 있습니다. 각 옵션은 아래에 설명되어 있습니다.
Deferred: 기본 옵션입니다. 크기를 조정할 때 열의 크기를 조정할 때 얼마나 커지거나 작아지는지를 보여주는 구분 기호가 나타납니다.Immediate: 크기를 조정할 때 구분 기호가 없습니다. 열의 가장자리를 끌고 그에 따라 크기를 조정하면 열의 너비가 포인터를 따라갑니다.None: 열 크기를 조정할 수 없습니다.
열 크기 조정이 Deferred로 설정된 경우 표시되는 구분 기호는 그리드의 columnResizingSeparatorBackground 및 columnResizingSeparatorWidth 속성을 각각 사용하여 색상과 너비에서 수정할 수 있습니다.
크기 조정 모드가 Deferred 전용으로 설정된 경우 크기가 조정될 때 열에 애니메이션을 적용할 수도 있습니다. 이는 columnResizingAnimationMode 속성을 Interpolate로 설정하여 수행됩니다.
그리드의 각 열은 개별적으로 크기를 조정할 수 있는지 여부를 결정할 수 있습니다. 특정 열의 크기 조정을 활성화하거나 비활성화하려면 해당 열의 IsResizingEnabled 속성을 설정하면 됩니다.
별 너비 열의 크기를 조정하면 해당 열이 고정 열로 변경됩니다.
Code Snippet
다음 코드 조각은 Web Components 데이터 그리드에서 열 크기 조정을 구현하는 방법을 보여줍니다. 이 경우 Street 열은 크기 조정이 불가능합니다. 이 경우 열 크기 조정 구분 기호의 너비는 5픽셀이 되며 크기 조정이 가능한 열도 크기 조정 시 애니메이션으로 표시됩니다.
import { ColumnResizingMode } from 'igniteui-webcomponents-grids';
import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-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;