Web Components Hierarchical Grid Column Hiding

Ignite UI for Web Components 에는 기본 제공 열 숨김 UI가 있으며, 이 UI는 Web Components 계층적 그리드 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있습니다. 개발자는 필요에 따라 페이지 내 아무 곳에서나 열 숨기기 UI를 유연하게 정의할 수 있습니다. Web Components 계층적 그리드 열 숨기기 기능은 그리드의 크기를 줄이고 중복 필드를 탭할 필요가 없도록 하려는 경우에 특히 유용합니다.

Web Components Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

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

<igc-hierarchical-grid auto-generate="false" primary-key="ID" allow-filtering="true" name="hierarchicalGrid1" id="hierarchicalGrid1">
    <igc-column field="Artist" header="Artist" data-type="string" sortable="true"></igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"></igc-column>
    <igc-column field="Debut" header="Debut" data-type="number" hidden="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" sortable="true"> </igc-column>
</igc-hierarchical-grid>

Toolbar's Column Hiding UI

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

이를 위해 우리가해야 할 일은 내부와 IgcGridToolbarActions 내부 IgcHierarchicalGridComponent를 IgcGridToolbarHiding 모두 설정하는 것입니다. 또한 Hierarchical Grid의 래퍼에 대한 사용자 정의 스타일을 사용하여 IgcGridToolbarTitle 도구 모음에 제목을 추가할 것입니다.

<igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

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

title 속성을 사용하여 툴바의 드롭다운 버튼 안에 표시되는 제목을 설정하겠습니다.

<igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

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

Disable hiding of a column

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

<igc-hierarchical-grid>
    <igc-column field="Artist" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyAwards" data-type="String" sortable="true" disable-hiding="true"></igc-column>

    <igc-row-island>
        <igc-column field="Album" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

Styling

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

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

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

#hierarchicalGrid {
    /* 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를 IgcHierarchicalGridComponent 사용하는 방법을 배웠습니다. 열 숨김 UI에는 탐색할 몇 가지 API가 더 있으며, 이러한 API는 다음과 같습니다.

ColumnActionsComponent

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

IgcColumnComponent properties:

disableHiding

IgcGridToolbar properties:

showProgress

IgcGridToolbar methods:

IgcHierarchicalGridComponent events:

ColumnVisibilityChanged

Additional Resources

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