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

    Web Components Grid Column Chooser 개요

    Ignite UI for Web Components 데이터 그리드는 UIIgcDataGridToolbarComponent를 통해 컴포넌트 또는 컴포넌트별로columnChooser 열을 표시하고 숨기는 기능을 지원하며, 페이지 어디에나 유연하게 배치할 수 있습니다. 열의 속성은isHidden 수동 열 생성을 위해 단일 열을 빠르게 숨기거나 표시하는 데도 사용할 수 있으며, 의isHidden 값은 컴포넌트에columnChooser 반영됩니다. 각 방법은 열의 가시 상태를 바꾸기 위해 서로 교환하여 사용할 수 있습니다.

    Web Components Grid Column Chooser Example

    Toolbar's Column Chooser UI

    컬럼 선택 UI는 그리드와는 별개로 컴포넌트IgcDataGridToolbarComponent 내에서 접근할 수 있습니다. 이 목적을 위해 우리는 툴바의columnChooser 속성을 true로 설정하기만 하면 됩니다. 툴바IgcButtonComponent에 표시되고, 클릭하면 컬럼 선택기 UI가 표시됩니다. 이 버튼은 숨겨진 열의 총합도 보여줍니다. 툴바가 생성되지 않았다면, 속성을 활성화columnChooser 하면 아무런 효과가 없고 버튼이 숨겨집니다.

    이 기능은IgcDataGridToolbarComponent 속성을 사용toolbarTitle 해 툴바에 제목을 추가하거나, 속성을 설정IgcButtonComponent 하여 텍스트columnChooserText를 배치하거나, 설정을columnChooserTitle 통해 열 선택기 UI에 제목 헤더를 추가하는 등의 추가 속성을 제공합니다.

    컬럼 선택기는 그리드columnHidingAnimationMode와columnShowingAnimationMode 속성을 설정하여 애니메이션으로 설정할 수 있습니다.

    Code Snippet

    다음은 Web Components Data Grid에 대한 열 선택기 도구 모음 UI를 구현하는 방법을 보여줍니다.

    <igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-chooser="true"
    column-chooser-text="Columns"
    column-chooser-title="Column Chooser">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin"
    column-hiding-animation-mode="SlideOver">
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcDataGridToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.isHidden = true;
    this.toolbar.columnChooser = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Choose Text";
    this.toolbar.columnChooserTitle = "Choose Title Text";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    Simple Column Chooser

    예를 들어, 툴바 없이 UI를columnChooser 수동으로 표시하고 페이지 어디에나 배치하고 싶다고 가정해 봅시다. 이는 마크업에 해당 구성 요소의 인스턴스를 생성하는 것만으로도 쉽게 할 수 있습니다.

    Demo

    Code Snippet

    다음은 데이터 그리드에 대한 열 선택기 UI를 구현하는 방법을 보여줍니다.

    <igc-column-chooser
    id="columnUI"
    height="100%"
    width="250px"
    title="Column Chooser"
    show-all-text="Show All"
    hide-all-text="Hide All">
</igc-column-chooser>
<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    data-source={this.data}
    auto-generate-columns="false"
    column-hiding-animation-mode="SlideOver">
    <igx-text-column is-hidden="true" field="ProductPrice" header-text="Product Price"><igc-text-column>
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-data-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids';

private grid: IgcDataGridComponent;
private columnChooser: IgcColumnChooserComponent;

connectedCallback() {
    this.columnChooser.targetGrid = this.grid;
    this.columnChooser.showAllText = "Show All";
    this.columnChooser.hideAllText = "Hide All";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    API References