[!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.

Blazor 그리드 열 이동 개요

Ignite UI for Blazor 열 이동 기능을 지원하므로 표시된 열 순서에 따라 열을 표시하는 방법에 대한 유연성을 제공합니다.

Blazor Grid Column Moving Example

Ignite UI for Blazor의 열 이동은 기본적으로 켜져 있으며 그리드의 ColumnMovingMode 속성을 설정하여 제어할 수 있습니다. 이 속성에는 Deferred 또는 None의 두 가지 옵션이 있습니다. Deferred 열 이동을 허용하는 반면 None 전체 그리드에 대한 열 이동을 비활성화합니다.

열 이동이 Deferred로 설정된 경우 열을 이동하는 동안 구분 기호가 표시됩니다. 열을 이동하는 동안 마우스 포인터를 놓으면 이동된 열이 구분 기호 오른쪽에 있는 열을 대신하게 됩니다. 이 구분 기호는 각각 ColumnMovingSeparatorWidth 및 ColumnMovingSeparatorBackground 속성을 사용하여 너비와 색상을 사용자 지정할 수도 있습니다.

원하는 경우 열 이동에 애니메이션을 적용할 수도 있습니다. 이는 그리드의 ColumnMovingAnimationMode 속성을 설정하여 수행할 수 있습니다. 애니메이션은 기본적으로 켜져 있지 않습니다.

Code Snippet

다음은 지연된 열 이동, 애니메이션 활성화 및 5px 너비 구분 기호를 사용하여 Ignite UI for Blazor에서 열 이동을 구현하는 방법을 보여줍니다.

<IgbDataGrid Height="100%" Width="100%"
    DataSource="DataSource"
    ColumnMovingMode="ColumnMovingMode.Deferred"
    ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
    ColumnMovingSeparatorWidth="5" />

API References

• ColumnMovingAnimationMode
• ColumnMovingMode
• ColumnMovingSeparatorBackground
• ColumnMovingSeparatorWidth
• Deferred