Blazor Hierarchical Grid Column Hiding

Ignite UI for Blazor 내장된 열 숨기기 UI가 있으며, Blazor 계층적 그리드 툴바를 통해 열의 표시 상태를 변경할 수 있습니다. 개발자는 필요에 따라 페이지 내 어디에서나 열 숨기기 UI를 정의할 수 있는 유연성을 갖추고 있습니다. Blazor 계층적 그리드 열 숨기기 기능은 특히 그리드 크기를 줄이고 중복된 필드를 탭으로 이동할 필요성을 없애고자 할 때 유용합니다.

Blazor Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

먼저 데이터를 만들고 IgbHierarchicalGrid 바인딩하는 것으로 시작하겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String" Sortable="true"></IgbColumn>
    <IgbColumn Field="Photo" Header="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
</IgbHierarchicalGrid>

Toolbar's Column Hiding UI

내장된 Column Hiding UI는 도구 모음 안에 DropDown IgbHierarchicalGrid 배치됩니다. 이 정확한 드롭다운을 사용하여 Column Hiding UI를 표시하거나 숨길 수 있습니다.

이 목적을 위해 우리가해야 할 일은 와 IgbGridToolbarActions IgbGridToolbarHiding 내부 IgbHierarchicalGrid를 모두 설정하는 것입니다.

<IgbHierarchicalGrid Data="SingersData">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

IgbHierarchicalGrid 도구 모음의 열 숨기기 UI를 사용할 때 몇 가지 유용한 속성을 제공합니다.

Title 속성을 사용하여 도구 모음의 드롭다운 버튼 안에 표시되는 제목을 설정하겠습니다.

<IgbHierarchicalGrid Data=SingersData>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

이 문서의 시작 부분에 있는 Blazor 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.

Disable hiding of a column

간단히 DisableHiding 속성을 true로 설정하면 사용자가 열 숨김 UI를 통해 열을 숨기는 것을 쉽게 방지할 수 있습니다.

<IgbHierarchicalGrid>
    <IgbColumn Field="Artist" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="GrammyAwards" Sortable=true DisableHiding=true></IgbColumn>

    <IgbRowIsland>
        <IgbColumn Field="Album" Sortable=true DisableHiding=true></IgbColumn>
    </IgbRowIsland>
</IgbHierarchicalGrid>

Styling

사용 가능한 CSS 변수 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 이를 달성하기 위해 먼저 그리드에 할당할 클래스를 사용합니다.

<IgbHierarchicalGrid class="hierarchical-grid"></IgbHierarchicalGrid>

그런 다음 관련 구성 요소에 대한 관련 CSS 변수를 설정합니다. igx-column-actions 에만 스타일을 적용하므로 그리드의 나머지 부분은 영향을 받지 않습니다.

.hierarchical-grid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

Demo

API References

이 기사에서는 도구 모음에서 기본 제공 열 숨김 UI를 IgbHierarchicalGrid 사용하는 방법을 배웠습니다. 열 숨김 UI에는 탐색할 몇 가지 API가 더 있으며, 이러한 API는 아래에 나열되어 있습니다.

ColumnActionsComponent

사용된 관련 API가 포함된 추가 구성요소:

IgbColumn properties:

DisableHiding

IgbGridToolbar properties:

showProgress

IgbGridToolbar methods:

IgbHierarchicalGrid events:

ColumnVisibilityChanged

Additional Resources

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