Blazor Grid 축소형 열 그룹 개요

Blazor Grid의 Ignite UI for Blazor 접이식 열 그룹 기능은 여러 중첩된 열과 열 그룹IgbGrid을 그룹화하여 정리하고 관리할 수 있게 해주며, 이를 축소하거나 확장하여 데이터 시각화와 탐색을 개선할 수 있습니다.

Blazor Grid Collapsible Column Groups Example

Setup

시작하려면IgbGrid 그리고 접이식 다중 열 헤더 feature, 먼저 다음 명령어를 입력하여 Ignite UI for Blazor을 설치해야 합니다:

> dotnet add package IgniteUI.Blazor --version 25.2.38 (December 2025)

Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

또한 그리드에서 열 그룹을 설정하는 방법에 대한 자세한 내용을 보려면 다중 열 헤더 항목을 간략하게 살펴보는 것이 좋습니다.

Usage

축소 가능한 열 그룹은 열 그룹을 더 작은 데이터 세트로 축소/확장하는 방법을 제공하는 다중 열 헤더 기능의 일부입니다. 열 그룹이 축소되면 열의 하위 집합이 최종 사용자에게 표시되고 그룹의 다른 하위 열은 숨겨집니다. 축소/확장된 각 열은 그리드 데이터 소스에 바인딩되거나 바인딩 해제되어 계산될 수 있습니다.

열 그룹을 접을 수 있는 그룹으로 정의하려면, 다음을 설정해야 합니다.Collapsible 재산에 관한IgbColumnGroup 받는 사람 참.

속성을VisibleWhenCollapsed 최소 두 개의 자식 열로 정의해야 합니다. 그룹을 접을 때 최소 한 개의 열이 보여야 하며(VisibleWhenCollapsedtrue로 설정), 그룹을 확장할 때는 최소 한 개의 열이 숨겨져야 하며(VisibleWhenCollapsed로false 설정), 그렇지 않으면 접힘 기능이 비활성화됩니다.VisibleWhenCollapsed 만약 일부 자식 열에 대해 지정되지 않으면, 부모 상태가 확장되었든 접혔든 상관없이 이 열은 항상 보이게 됩니다.

아래 마크업을 살펴보겠습니다.

 <IgbColumnGroup Header="Customer Information" Collapsible="true">
    <!--The column below will be visible when its parent is collapsed-->
    <IgbColumn Field="CustomerName" Header="Full name" VisibleWhenCollapsed="true"></IgbColumn>
        <!--The three columns below will be visible when its parent is expanded-->
        <IgbColumn Field="CustomerID" Header="Customer ID" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumn Field="FirstName" Header="First Name" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumn Field="LastName" Header="Last Name" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumnGroup Header="Customer Address">
            <IgbColumn Field="Country" Header="Country" Sortable="true"></IgbColumn>
            <IgbColumn Field="City" Header="City" Sortable="true"></IgbColumn>
        </IgbColumnGroup>
 </IgbColumnGroup>

요약하면 모든 하위 열에는 세 가지 상태가 있습니다.

상위 항목의 확장 상태에 관계없이 항상 표시될 수 있습니다.
상위 항목이 축소되면 표시될 수 있습니다.
상위 항목이 축소되면 숨길 수 있습니다.

축소 가능한 열(collapsible)로 지정된 초기 상태는Expanded true로 설정되어 있지만, false로 설정 하면 쉽게 변경할 수 있습니다.

참고 초기에 그룹 축소 옵션은 열 숨김보다 우선합니다. 숨김 속성을 사용하여 열을 숨기도록 선언하고 동일한 열이 표시되어야 하는 그룹을 정의한 경우 해당 열이 표시됩니다.

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.