[!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 Grid Column Pinning Overview

Ignite UI for Blazor 열을 고정하는 기능을 지원하므로 최종 사용자가 특정 열 순서로 열을 잠글 수 있습니다.

하나 이상의 열을 데이터 그리드의 왼쪽이나 오른쪽에 고정할 수 있습니다. 또한 PinColumn 기능을 활용하여 열의 핀 상태를 변경할 수 있습니다.

Blazor Grid Column Pinning Example

데이터 그리드의 Column Pinning API는 열의 Pinned 속성을 설정하거나 그리드의 PinColumn 기능을 활용하여 설정할 때 활성화할 수 있습니다.

Pinned 속성에는 세 가지 옵션이 있습니다.

왼쪽 -Left 활성화하면 고정된 열이 그리드의 왼쪽에 배치됩니다.
오른쪽 -Right 활성화하면 고정된 열이 그리드 오른쪽에 배치됩니다.
없음 -None 활성화하면 열의 고정이 해제되고 그리드 내 기본 배치 위치가 변경됩니다.

고정된 열에 인접한 고정되지 않은 열은 여전히 가로 스크롤을 유지합니다.

PinColumn 함수에는 두 개의 필수 매개변수가 포함되어 있습니다. 첫 번째 매개 변수는 고정할 열이고 두 번째 매개 변수는 PinnedPositions 열거 설정입니다.

Code Snippet

다음 코드는 Pinned 속성과 PinColumn 함수를 사용하여 열 고정을 통해 Blazor Data Grid에서 열 고정을 구현하는 방법을 보여줍니다.

<IgbDataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    AutoGenerateColumns="false"
    @ref="DataGridRef">

    @*Columns Pinned Left*@
    <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />

    @*Columns Unpinned*@
    <IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
    <IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
    <IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />

    @*Columns Pinned Right*@
    <IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
</IgbDataGrid>

Toolbar's Column Pinning UI

열 고정 UI는 그리드와 별도로 IgbDataGridToolbar 구성 요소 내에서 액세스할 수 있습니다. 이를 위해 우리가 해야 할 일은 도구 모음의 columnPinning 속성을 true로 설정하는 것뿐입니다. 그러면 도구 모음에 IgbButton 표시되고, 클릭하면 열 고정 UI가 표시됩니다. 이 버튼은 고정된 왼쪽 열의 합계도 표시합니다. 도구 모음이 생성되지 않은 경우, columnPinning 속성을 활성화해도 효과가 없으며 버튼이 숨겨집니다.

그만큼 IgbDataGridToolbar 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. ToolbarTitle 속성, 텍스트 배치 IgbButton 설정하여 columnPinningText 속성을 설정하고 UI를 숨기는 열에 제목 헤더를 추가합니다. columnPinningTitle.

Demo

Code Snippet

<IgbDataGridToolbar TargetGrid="DataGridRef"
    ToolbarTitle="Grid Toolbar Title"
    ColumnPinning="true"
    ColumnPinningText="Pinning"
    ColumnPinningTitle="Column Pinning" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}

API References

IgbButton
IgbDataGridToolbar
PinColumn
PinnedPositions
Pinned