Web Components Hierarchical Grid Selection 개요

Web Components Hierarchical Grid의 Ignite UI for Web Components Select 기능을 사용하면 간단한 마우스 조작을 사용하여 데이터와 쉽게 상호 작용하고 데이터를 조작할 수 있습니다. 다음과 같은 세 가지 선택 모드를 사용할 수 있습니다.

행 선택
셀 선택
Column selection

rowSelection 속성을 사용하면 다음을 지정할 수 있습니다.

없음
하나의
다중 선택

Web Components 계층적 그리드 선택 예시

아래 샘플은 에서 세 가지 유형의 셀 선택 동작을 IgcHierarchicalGridComponent 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditorHierarchicalGrid: IgcPropertyEditorPanelComponent
    private cellSelectionEditorHierarchicalGrid: IgcPropertyEditorPropertyDescriptionComponent
    private cellSelectionEditorRowIsland: IgcPropertyEditorPropertyDescriptionComponent
    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorHierarchicalGrid = this.propertyEditorHierarchicalGrid = document.getElementById('PropertyEditorHierarchicalGrid') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditorHierarchicalGrid = this.cellSelectionEditorHierarchicalGrid = document.getElementById('CellSelectionEditorHierarchicalGrid') as IgcPropertyEditorPropertyDescriptionComponent;
        var cellSelectionEditorRowIsland = this.cellSelectionEditorRowIsland = document.getElementById('CellSelectionEditorRowIsland') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;

        this._bind = () => {
            propertyEditorHierarchicalGrid.componentRenderer = this.renderer;
            propertyEditorHierarchicalGrid.target = this.hierarchicalGrid;
            cellSelectionEditorRowIsland.changed = this.webRowIslandCellSelectionChange;
            hierarchicalGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webRowIslandCellSelectionChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var rowIsland = this.rowIsland;
        if (rowIsland)
            rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditorHierarchicalGrid"
        id="PropertyEditorHierarchicalGrid"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            label="Hierarchical Grid Cell Selection"
            property-path="CellSelection"
            name="CellSelectionEditorHierarchicalGrid"
            id="CellSelectionEditorHierarchicalGrid"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            label="Row Island Cell Selection"
            property-path=""
            name="CellSelectionEditorRowIsland"
            id="CellSelectionEditorRowIsland"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple, MultipleCascade"
            drop-down-values="None, Single, Multiple, MultipleCascade">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

css

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

Web Components 계층적 그리드 선택 옵션(Hierarchical Grid Selection Options)

Ignite UI for Web Components IgcHierarchicalGridComponent 구성 요소는 행 선택, 셀 선택 및 열 선택의 세 가지 선택 모드를 제공합니다. 기본적으로 Multi-cell selection mode만 활성화되어 있습니다 IgcHierarchicalGridComponent. 선택 모드를 변경/활성화하려면 또는 selectable 속성을 사용할 rowSelection cellSelection 수 있습니다.

Web Components 계층적 그리드 행 선택

rowSelection 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

None- 행 선택은 비활성화됩니다 IgcHierarchicalGridComponent.
Single- 내에서 IgcHierarchicalGridComponent 하나의 행만 선택할 수 있습니다.
Multiple- 다중 행 선택은 행 선택기를 사용하거나 ctrl + 클릭과 같은 키 조합을 사용하거나 셀에 초점을 맞춘 후 스페이스 키를 눌러 사용할 수 있습니다.

MultipleCascade- 계단식 선택 모드로, 사용자가 사용자 상호 작용으로 선택하는 레코드 아래의 트리에서 모든 자식을 선택합니다. 이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다.

자세한 내용은 행 선택 항목을 참조하세요.

Web Components 계층적 그리드 셀 선택

속성 cellSelection 사용하면 다음 옵션을 지정할 수 있습니다.

None- 에 대해 IgcHierarchicalGridComponent 셀 선택이 비활성화됩니다.
Single- 내에서 IgcHierarchicalGridComponent 하나의 셀만 선택할 수 있습니다.
Multiple- 현재 이것은 에서 선택 항목의 기본 상태입니다 IgcHierarchicalGridComponent. 다중 셀 선택은 왼쪽 버튼 마우스를 계속 클릭한 후 셀 위로 마우스를 드래그하여 사용할 수 있습니다.

자세한 내용은 셀 선택 항목을 참조하세요.

Web Components 계층적 그리드 열 선택(Hierarchical Grid Column Selection)

이 selectable 속성을 사용하면 각각 IgcColumnComponent에 대해 다음 옵션을 지정할 수 있습니다. 해당 열 선택은 이 속성이 각각 true 또는 false로 설정된 경우 활성화되거나 비활성화됩니다.

이로 인해 다음 세 가지 변형이 발생합니다.

단일 선택 - 열 셀을 마우스로 클릭합니다.
다중 열 선택 -Ctrl + 마우스를 누른 채 열 셀을 클릭합니다.
범위 열 선택 -Shift 키를 누른 채 마우스를 클릭하면 그 사이의 모든 항목이 선택됩니다.

자세한 내용은 열 선택 항목으로 이동하세요.

알려진 문제 및 제한 사항

그리드에 primaryKey 설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃습니다. 요청이 완료되었습니다:

행 선택
행 확장/축소
행 편집
행 고정

API 참조

IgcHierarchicalGridComponent

추가 리소스

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