React 그리드 열 선택기 개요

    Ignite UI for React IgrDataGridToolbar 구성 요소를 통해 또는 페이지의 어느 곳에나 배치할 수 있는 유연성을 제공하는 columnChooser 구성 요소를 통해 UI로 열을 표시하고 숨기는 기능을 지원합니다. 열의 IsHidden 속성을 사용하면 수동 열 생성을 위해 프로그래밍 방식으로 단일 열을 빠르게 숨기거나 표시할 수도 있으며, IsHidden 값은 columnChooser 구성 요소에 반영됩니다. 각 접근 방식은 기둥의 표시 상태를 변경하기 위해 서로 바꿔 사용할 수 있습니다.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

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

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

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

    Code Snippet

    다음은 React Data Grid용 열 선택 도구 모음 UI를 구현하는 방법을 보여줍니다.

    <IgrDataGridToolbar ref={this.onToolbarRef}
    toolbarTitle="Grid Title"
    columnChooser="true"
    columnChooserText="Columns"
    columnChooserTitle="Column Chooser">
</IgrDataGridToolbar>
<IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    dataSource={this.data}
    autoGenerateColumns="true"
    columnHidingAnimationMode="SlideOver">
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrDataGridToolbar } from 'igniteui-react-grids';

public grid : IgrDataGrid;
public toolbar: IgrDataGridToolbar;

this.onGridRef = this.onGridRef.bind(this);
this.onToolbarRef = this.onToolbarRef.bind(this);


public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.toolbar != null) {
        this.toolbar.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;

        let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent;
        productNameColumn.isHidden = true;
    }
}

public onToolbarRef(toolbar: IgrDataGridToolbar) {
    this.toolbar = toolbar;
    if (this.grid != null) {
    this.toolbar.targetGrid = this.grid;
    this.toolbar.columnChooser = "true";
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Column Chooser";
    this.toolbar.columnChooserTitle = "Column Chooser";
    }
}

    Simple Column Chooser

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

    Demo

    Code Snippet

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

    <IgrColumnChooser
    ref={this.onColumnChooserRef}
    height="100%"
    width="250px"
    title="Column Chooser"
    showAllText="Show All"
    hideAllText="Hide All">
</IgrColumnChooser>
<IgrDataGrid
    ref={this.onGridRef}
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false"
    columnHidingAnimationMode="SlideOver">
    <IgrTextColumn isHidden="true" field="ProductPrice" headerText="Product Price"/>
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrColumnChooser } from 'igniteui-react-grids';
import { ColumnMovingAnimationMode } from 'igniteui-react-grids';

public grid : IgrDataGrid;
public columnChooser: IgrColumnChooser;

public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.columnChooser) {
        this.columnChooser.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
    }
}

public onColumnChooserRef(columnChooser: IgrColumnChooser) {
    this.columnChooser = columnChooser;
    if (this.grid) {
        this.columnChooser.targetGrid = this.grid;
        this.columnChooser.showAllText = "Show All";
        this.columnChooser.hideAllText = "Hide All";
    }
}

    API References