이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

    Web Components Grid Column Chooser 개요

    Ignite UI for Web Components Data Grid는 다음을 통해 UI를 사용하여 열을 표시하고 숨기는 기능을 지원합니다. IgcDataGridToolbarComponent component 또는 columnChooser 페이지의 아무 곳에나 배치할 수 있는 유연성을 제공하는 구성 요소입니다. 이 IsHidden 열의 속성을 사용하여 수동 열 생성을 위해 프로그래밍 방식으로 단일 열을 빠르게 숨기거나 표시할 수도 있으며, IsHidden에 반영됩니다. columnChooser 구성 요소. 각 방법을 서로 바꿔 사용하여 열의 표시 상태를 변경할 수 있습니다.

    Web Components 그리드 열 선택기 예제

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    툴바의 열 선택기 UI

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

    그만큼 IgcDataGridToolbarComponent 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. toolbarTitle 속성, 텍스트 배치 IgcButtonComponent 설정하여 ColumnChooserText 속성을 설정하고 열 선택기 UI에 제목 헤더를 추가합니다. ColumnChooserTitle.

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

    Ignite UI for Web Components | CTA 배너

    코드 조각

    다음은 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>
html
    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-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;
}
ts

    간단한 열 선택기

    도구 모음 없이 IgcColumnChooserComponent UI를 수동으로 표시하고 페이지의 원하는 위치에 배치한다고 가정해 보겠습니다. 이는 마크업에서 구성 요소의 인스턴스를 생성하기만 하면 쉽게 수행할 수 있습니다.

    데모

    EXAMPLE
    TS
    HTML
    DataGridStyles.css
    index.css
    Edit in:

    코드 조각

    다음은 데이터 그리드에 대한 열 선택기 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>
html
    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-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;
}
ts

    API 참조