[!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 열을 이동할 수 있는 기능을 지원하므로 표시되는 열 순서에 따라 열을 표시할 방법을 유연하게 결정할 수 있습니다.
Web Components Grid Column Moving Example
Ignite UI for Web Components 데이터 그리드에서 열이 이동하는 것은 기본적으로 켜져 있으며, 그리드의 속성을 설정columnMovingMode 하여 제어할 수 있습니다. 이 부동산에는 두 가지 옵션이 있습니다.DeferredNoneDeferred 열의 이동을 허용하는 반면None, 전체 그리드에 대한 열의 이동은 비활성화됩니다.
열 이동이 로Deferred 설정되면, 열을 이동할 때 분리기가 나타납니다. 열을 이동할 때, 마우스 포인터를 놓으면, 이동한 열이 구분자 오른쪽에 있는 열을 대신하게 됩니다. 이 구분자는 각각 와columnMovingSeparatorWidth 속성을 사용하여columnMovingSeparatorBackground 너비와 색상을 커스터마이즈할 수도 있습니다.
원한다면 열의 움직임을 애니메이션으로 만들 수도 있습니다. 이는 그리드의 속성을 설정columnMovingAnimationMode 함으로써 할 수 있습니다. 애니메이션은 기본적으로 켜져 있지 않습니다.
Code Snippet
다음은 지연된 열 이동, 활성화된 애니메이션 및 5px 너비의 구분 기호를 사용하여 Ignite UI for Web Components에서 열 이동을 구현하는 방법을 보여줍니다.
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingMode } from 'igniteui-webcomponents-data-grids';
<igc-data-grid id="grid"
height="100%"
width="100%"
column-moving-mode="Deferred"
column-moving-animation-mode="SlideOver"
column-moving-separator-width="5">
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;