Web Components 트리 그리드 열 선택 개요

Ignite UI for Web Components의 Web Components 트리 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시하는 간단하고 Excel과 유사한 방법을 제공합니다. 입력을 통해 활성화할 수 있습니다. ColumnSelection 풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터 추출, 데이터 분석 작업 및 시각화를 수행할 수 있습니다.

Web Components 트리 그리드 열 선택 예

아래 샘플은 IgcTreeGridComponent의 열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.

* 단가(Unit Price) 및 단종(Discontinued)은 열 선택이 비활성화된 상태입니다.

export class FoodsDataItem {
    public constructor(init: Partial<FoodsDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public UnitPrice: number;
    public AddedDate: string;
    public Discontinued: boolean;

}
export class FoodsData extends Array<FoodsDataItem> {
    public constructor(items: Array<FoodsDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new FoodsDataItem({ ID: 1, ParentID: -1, Name: `Foods`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 101, ParentID: 1, Name: `Chef Antons Gumbo Mix`, UnitPrice: 21.35, AddedDate: `2011-11-11`, Discontinued: true }),
                new FoodsDataItem({ ID: 102, ParentID: 1, Name: `Grandmas Boysenberry Spread`, UnitPrice: 25, AddedDate: `2017-12-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 103, ParentID: 1, Name: `Uncle Bobs Organic Dried Pears`, UnitPrice: 30, AddedDate: `2016-07-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 104, ParentID: 1, Name: `Mishi Kobe Niku`, UnitPrice: 97, AddedDate: `2010-02-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 105, ParentID: 1, Name: `Queso Cabrales`, UnitPrice: 21, AddedDate: `2009-11-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 106, ParentID: 1, Name: `Queso Manchego La Pastora`, UnitPrice: 38, AddedDate: `2015-11-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 107, ParentID: 1, Name: `Konbu`, UnitPrice: 6, AddedDate: `2025-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 108, ParentID: 1, Name: `Tofu`, UnitPrice: 23.25, AddedDate: `2019-06-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 109, ParentID: 1, Name: `Ikura`, UnitPrice: 31, AddedDate: `2010-05-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 110, ParentID: 1, Name: `Pavlova`, UnitPrice: 17.45, AddedDate: `2018-03-28`, Discontinued: false }),
                new FoodsDataItem({ ID: 111, ParentID: 1, Name: `Alice Mutton`, UnitPrice: 39, AddedDate: `2015-08-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 112, ParentID: 1, Name: `Carnarvon Tigers`, UnitPrice: 62.5, AddedDate: `2015-09-27`, Discontinued: false }),
                new FoodsDataItem({ ID: 113, ParentID: 1, Name: `Teatime Chocolate Biscuits`, UnitPrice: 9.2, AddedDate: `2011-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 2, ParentID: -1, Name: `Beverages`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 201, ParentID: 2, Name: `Chai`, UnitPrice: 18, AddedDate: `2012-02-12`, Discontinued: false }),
                new FoodsDataItem({ ID: 202, ParentID: 2, Name: `Chang`, UnitPrice: 19, AddedDate: `2013-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 3, ParentID: -1, Name: `Sauces`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 301, ParentID: 3, Name: `Aniseed Syrup`, UnitPrice: 10, AddedDate: `2016-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 302, ParentID: 3, Name: `Chef Antons Cajun Seasoning`, UnitPrice: 22, AddedDate: `2012-03-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 303, ParentID: 3, Name: `Northwoods Cranberry Sauce`, UnitPrice: 40, AddedDate: `2012-01-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 304, ParentID: 3, Name: `Genen Shouyu`, UnitPrice: 15.5, AddedDate: `2010-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 305, ParentID: 3, Name: `Sir Rodneys Marmalade`, UnitPrice: 18, AddedDate: `2015-03-17`, Discontinued: false }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
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 propertyEditor: IgcPropertyEditorPanelComponent
    private columnSelectionEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var columnSelectionEditor = this.columnSelectionEditor = document.getElementById('columnSelectionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.treeGrid;
            treeGrid.data = this.foodsData;
        }
        this._bind();
    }

    private _foodsData: FoodsData = null;
    public get foodsData(): FoodsData {
        if (this._foodsData == null)
        {
            this._foodsData = new FoodsData();
        }
        return this._foodsData;
    }

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

}

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="PropertyEditor"
        id="PropertyEditor"
        description-type="WebTreeGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="ColumnSelection"
            name="columnSelectionEditor"
            id="columnSelectionEditor"
            label="Column Selection">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID">
            </igc-column>
            <igc-column
            field="Name">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            selectable="false">
            </igc-column>
            <igc-column
            field="AddedDate"
            header="Added Date">
            </igc-column>
            <igc-column
            field="Discontinued"
            selectable="false">
            </igc-column>
        </igc-tree-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

기본 사용법

열 선택 기능은 값을 사용하는 GridSelectionMode 입력을 ColumnSelection 통해 활성화할 수 있습니다.

상호 작용

기본 선택 모드는 None 입니다. Single 또는 Multiple으로 설정하면 표시된 모든 열을 selectable 있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.

다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택된 경우 구성 요소는 선택됨으로 표시됩니다.

* 개인 세부정보 열 그룹에서는 열 ID와 제목만 선택할 수 있습니다.

export class EmployeesFlatDetailsItem {
    public constructor(init: Partial<EmployeesFlatDetailsItem>) {
        Object.assign(this, init);
    }

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem({ Address: `Obere Str. 57`, Age: 55, City: `Berlin`, Country: `Germany`, Fax: `030-0076545`, HireDate: `2008-03-20`, ID: 1, Name: `Johnathan Winchester`, ParentID: -1, Phone: `030-0074321`, PostalCode: 12209, Title: `Development Manager`, LastName: `Winchester`, FullAddress: `Obere Str. 57, Berlin, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `Avda. de la Constitución 2222`, Age: 42, City: `México D.F.`, Country: `Mexico`, Fax: `(51) 555-3745`, HireDate: `2014-01-22`, ID: 4, Name: `Ana Sanders`, ParentID: -1, Phone: `(5) 555-4729`, PostalCode: 5021, Title: `CEO`, LastName: `Sanders`, FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Mataderos 2312`, Age: 49, City: `México D.F.`, Country: `Mexico`, Fax: `(5) 555-3995`, HireDate: `2014-01-22`, ID: 18, Name: `Victoria Lincoln`, ParentID: -1, Phone: `(5) 555-3932`, PostalCode: 5023, Title: `Accounting Manager`, LastName: `Lincoln`, FullAddress: `Mataderos 2312, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `120 Hanover Sq.`, Age: 61, City: `London`, Country: `UK`, Fax: `(171) 555-6750`, HireDate: `2010-01-01`, ID: 10, Name: `Yang Wang`, ParentID: -1, Phone: `(171) 555-7788`, PostalCode: 39000, Title: `Localization Manager`, LastName: `Wang`, FullAddress: `120 Hanover Sq., London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Berguvsvägen 8`, Age: 43, City: `Luleå`, Country: `Sweden`, Fax: `0921-12 34 67`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, ParentID: 1, Phone: `0921-12 34 65`, PostalCode: 29000, Title: `Senior Software Developer`, LastName: `Burke`, FullAddress: `Berguvsvägen 8, Luleå, Sweden` }),
                new EmployeesFlatDetailsItem({ Address: `Forsterstr. 57`, Age: 29, City: `Mannheim`, Country: `Germany`, Fax: `0621-08924`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, ParentID: 1, Phone: `0621-08460`, PostalCode: 68306, Title: `Senior Software Developer`, LastName: `Anderson`, FullAddress: `Forsterstr. 57, Mannheim, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `24, place Kléber`, Age: 31, City: `Strasbourg`, Country: `France`, Fax: `88.60.15.32`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, ParentID: 1, Phone: `88.60.15.31`, PostalCode: 67000, Title: `Software Development Team Lead`, LastName: `Reyes`, FullAddress: `24, place Kléber, Strasbourg, France` }),
                new EmployeesFlatDetailsItem({ Address: `C/ Araquil, 67`, Age: 35, City: `Madrid`, Country: `Spain`, Fax: `(911) 555 91 99`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, ParentID: 11, Phone: `(91) 555 22 82`, PostalCode: 28023, Title: `Senior Software Developer`, LastName: `Mendel`, FullAddress: `C/ Araquil, 67, Madrid, Spain` }),
                new EmployeesFlatDetailsItem({ Address: `12, rue des Bouchers`, Age: 44, City: `Marseille`, Country: `France`, Fax: `91.24.45.41`, HireDate: `2009-10-11`, ID: 12, Name: `Sven Cooper`, ParentID: 11, Phone: `91.24.45.40`, PostalCode: 13008, Title: `Senior Software Developer`, LastName: `Cooper`, FullAddress: `12, rue des Bouchers, Marseille, France` }),
                new EmployeesFlatDetailsItem({ Address: `23 Tsawassen Blvd.`, Age: 44, City: `Tsawassen`, Country: `Canada`, Fax: `(604) 555-3745`, HireDate: `2014-04-04`, ID: 14, Name: `Laurence Johnson`, ParentID: 4, Phone: `(604) 555-4729`, PostalCode: 19000, Title: `Director`, LastName: `Johnson`, FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada` }),
                new EmployeesFlatDetailsItem({ Address: `Fauntleroy Circus`, Age: 25, City: `London`, Country: `UK`, Fax: `(125) 555-3798`, HireDate: `2017-11-9`, ID: 5, Name: `Elizabeth Richards`, ParentID: 4, Phone: `(171) 555-1212`, PostalCode: 30000, Title: `Vice President`, LastName: `Richards`, FullAddress: `Fauntleroy Circus, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Cerrito 333`, Age: 39, City: `Buenos Aires`, Country: `Argentina`, Fax: `(121) 135-4892`, HireDate: `2010-03-22`, ID: 13, Name: `Trevor Ashworth`, ParentID: 5, Phone: `(1) 135-5555`, PostalCode: 1010, Title: `Director`, LastName: `Ashworth`, FullAddress: `Cerrito 333, Buenos Aires, Argentina` }),
                new EmployeesFlatDetailsItem({ Address: `Sierras de Granada 9993`, Age: 44, City: `México D.F.`, Country: `Mexico`, Fax: `(153) 555-7293`, HireDate: `2014-04-04`, ID: 17, Name: `Antonio Moreno`, ParentID: 18, Phone: `(5) 555-3392`, PostalCode: 5022, Title: `Senior Accountant`, LastName: `Moreno`, FullAddress: `Sierras de Granada 9993, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Hauptstr. 29`, Age: 50, City: `Sao Paulo`, Country: `Brazil`, Fax: `(531) 555-6691`, HireDate: `2007-11-18`, ID: 7, Name: `Pedro Rodriguez`, ParentID: 10, Phone: `0452-076545`, PostalCode: 3012, Title: `Senior Localization Developer`, LastName: `Rodriguez`, FullAddress: `Hauptstr. 29, Sao Paulo, Brazil` }),
                new EmployeesFlatDetailsItem({ Address: `Av. dos Lusíadas, 23`, Age: 27, City: `Bern`, Country: `Switzerland`, Fax: `(271) 335-357`, HireDate: `2016-02-19`, ID: 8, Name: `Casey Harper`, ParentID: 10, Phone: `(11) 555-7647`, PostalCode: 40000, Title: `Senior Localization`, LastName: `Harper`, FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland` }),
                new EmployeesFlatDetailsItem({ Address: `Berkeley Gardens 12`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-9199`, HireDate: `2017-11-09`, ID: 15, Name: `Patricia Simpson`, ParentID: 7, Phone: `(171) 555-2282`, PostalCode: 26000, Title: `Localization Intern`, LastName: `Simpson`, FullAddress: `Berkeley Gardens 12, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Walserweg 21`, Age: 39, City: `Aachen`, Country: `Germany`, Fax: `0241-059428`, HireDate: `2010-03-22`, ID: 9, Name: `Francisco Chang`, ParentID: 7, Phone: `0241-039123`, PostalCode: 52066, Title: `Localization Intern`, LastName: `Chang`, FullAddress: `Walserweg 21, Aachen, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `35 King George`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-3373`, HireDate: `2018-03-18`, ID: 16, Name: `Peter Lewis`, ParentID: 7, Phone: `(171) 555-0297`, PostalCode: 48000, Title: `Localization Intern`, LastName: `Lewis`, FullAddress: `35 King George, London, UK` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatDetails;
        }
        this._bind();
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

}

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="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID"
        column-selection="multiple">
            <igc-column
            field="Name"
            data-type="string"
            width="auto">
            </igc-column>
            <igc-column-group
            header="General Information">
                <igc-column
                field="HireDate"
                header="Hire Date"
                data-type="date">
                </igc-column>
                <igc-column-group
                header="Personal Details">
                    <igc-column
                    field="ID"
                    data-type="number">
                    </igc-column>
                    <igc-column
                    field="Title"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Age"
                    data-type="number"
                    selectable="false">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
            <igc-column-group
            header="Address Information">
                <igc-column-group
                header="Location">
                    <igc-column
                    field="Country"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="City"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Address"
                    data-type="string">
                    </igc-column>
                </igc-column-group>
                <igc-column-group
                header="Contact Information">
                    <igc-column
                    field="Phone"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="Fax"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="PostalCode"
                    header="Postal Code"
                    data-type="string">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
        </igc-tree-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

키보드 조합

키보드 조합은 그리드 ColumnSelection 입력이 다중으로 설정된 경우에만 사용할 수 있습니다.

열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.

다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.

API 조작

그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected 해당 설정을 통해 세터.

위 명령문은 선택한 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.

API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.

스타일링

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 class 설정해야 합니다.

<igc-tree-grid class="grid"></igc-tree-grid>
html

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}
css

데모

export class EmployeesFlatDetailsItem {
    public constructor(init: Partial<EmployeesFlatDetailsItem>) {
        Object.assign(this, init);
    }

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem({ Address: `Obere Str. 57`, Age: 55, City: `Berlin`, Country: `Germany`, Fax: `030-0076545`, HireDate: `2008-03-20`, ID: 1, Name: `Johnathan Winchester`, ParentID: -1, Phone: `030-0074321`, PostalCode: 12209, Title: `Development Manager`, LastName: `Winchester`, FullAddress: `Obere Str. 57, Berlin, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `Avda. de la Constitución 2222`, Age: 42, City: `México D.F.`, Country: `Mexico`, Fax: `(51) 555-3745`, HireDate: `2014-01-22`, ID: 4, Name: `Ana Sanders`, ParentID: -1, Phone: `(5) 555-4729`, PostalCode: 5021, Title: `CEO`, LastName: `Sanders`, FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Mataderos 2312`, Age: 49, City: `México D.F.`, Country: `Mexico`, Fax: `(5) 555-3995`, HireDate: `2014-01-22`, ID: 18, Name: `Victoria Lincoln`, ParentID: -1, Phone: `(5) 555-3932`, PostalCode: 5023, Title: `Accounting Manager`, LastName: `Lincoln`, FullAddress: `Mataderos 2312, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `120 Hanover Sq.`, Age: 61, City: `London`, Country: `UK`, Fax: `(171) 555-6750`, HireDate: `2010-01-01`, ID: 10, Name: `Yang Wang`, ParentID: -1, Phone: `(171) 555-7788`, PostalCode: 39000, Title: `Localization Manager`, LastName: `Wang`, FullAddress: `120 Hanover Sq., London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Berguvsvägen 8`, Age: 43, City: `Luleå`, Country: `Sweden`, Fax: `0921-12 34 67`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, ParentID: 1, Phone: `0921-12 34 65`, PostalCode: 29000, Title: `Senior Software Developer`, LastName: `Burke`, FullAddress: `Berguvsvägen 8, Luleå, Sweden` }),
                new EmployeesFlatDetailsItem({ Address: `Forsterstr. 57`, Age: 29, City: `Mannheim`, Country: `Germany`, Fax: `0621-08924`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, ParentID: 1, Phone: `0621-08460`, PostalCode: 68306, Title: `Senior Software Developer`, LastName: `Anderson`, FullAddress: `Forsterstr. 57, Mannheim, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `24, place Kléber`, Age: 31, City: `Strasbourg`, Country: `France`, Fax: `88.60.15.32`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, ParentID: 1, Phone: `88.60.15.31`, PostalCode: 67000, Title: `Software Development Team Lead`, LastName: `Reyes`, FullAddress: `24, place Kléber, Strasbourg, France` }),
                new EmployeesFlatDetailsItem({ Address: `C/ Araquil, 67`, Age: 35, City: `Madrid`, Country: `Spain`, Fax: `(911) 555 91 99`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, ParentID: 11, Phone: `(91) 555 22 82`, PostalCode: 28023, Title: `Senior Software Developer`, LastName: `Mendel`, FullAddress: `C/ Araquil, 67, Madrid, Spain` }),
                new EmployeesFlatDetailsItem({ Address: `12, rue des Bouchers`, Age: 44, City: `Marseille`, Country: `France`, Fax: `91.24.45.41`, HireDate: `2009-10-11`, ID: 12, Name: `Sven Cooper`, ParentID: 11, Phone: `91.24.45.40`, PostalCode: 13008, Title: `Senior Software Developer`, LastName: `Cooper`, FullAddress: `12, rue des Bouchers, Marseille, France` }),
                new EmployeesFlatDetailsItem({ Address: `23 Tsawassen Blvd.`, Age: 44, City: `Tsawassen`, Country: `Canada`, Fax: `(604) 555-3745`, HireDate: `2014-04-04`, ID: 14, Name: `Laurence Johnson`, ParentID: 4, Phone: `(604) 555-4729`, PostalCode: 19000, Title: `Director`, LastName: `Johnson`, FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada` }),
                new EmployeesFlatDetailsItem({ Address: `Fauntleroy Circus`, Age: 25, City: `London`, Country: `UK`, Fax: `(125) 555-3798`, HireDate: `2017-11-9`, ID: 5, Name: `Elizabeth Richards`, ParentID: 4, Phone: `(171) 555-1212`, PostalCode: 30000, Title: `Vice President`, LastName: `Richards`, FullAddress: `Fauntleroy Circus, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Cerrito 333`, Age: 39, City: `Buenos Aires`, Country: `Argentina`, Fax: `(121) 135-4892`, HireDate: `2010-03-22`, ID: 13, Name: `Trevor Ashworth`, ParentID: 5, Phone: `(1) 135-5555`, PostalCode: 1010, Title: `Director`, LastName: `Ashworth`, FullAddress: `Cerrito 333, Buenos Aires, Argentina` }),
                new EmployeesFlatDetailsItem({ Address: `Sierras de Granada 9993`, Age: 44, City: `México D.F.`, Country: `Mexico`, Fax: `(153) 555-7293`, HireDate: `2014-04-04`, ID: 17, Name: `Antonio Moreno`, ParentID: 18, Phone: `(5) 555-3392`, PostalCode: 5022, Title: `Senior Accountant`, LastName: `Moreno`, FullAddress: `Sierras de Granada 9993, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Hauptstr. 29`, Age: 50, City: `Sao Paulo`, Country: `Brazil`, Fax: `(531) 555-6691`, HireDate: `2007-11-18`, ID: 7, Name: `Pedro Rodriguez`, ParentID: 10, Phone: `0452-076545`, PostalCode: 3012, Title: `Senior Localization Developer`, LastName: `Rodriguez`, FullAddress: `Hauptstr. 29, Sao Paulo, Brazil` }),
                new EmployeesFlatDetailsItem({ Address: `Av. dos Lusíadas, 23`, Age: 27, City: `Bern`, Country: `Switzerland`, Fax: `(271) 335-357`, HireDate: `2016-02-19`, ID: 8, Name: `Casey Harper`, ParentID: 10, Phone: `(11) 555-7647`, PostalCode: 40000, Title: `Senior Localization`, LastName: `Harper`, FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland` }),
                new EmployeesFlatDetailsItem({ Address: `Berkeley Gardens 12`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-9199`, HireDate: `2017-11-09`, ID: 15, Name: `Patricia Simpson`, ParentID: 7, Phone: `(171) 555-2282`, PostalCode: 26000, Title: `Localization Intern`, LastName: `Simpson`, FullAddress: `Berkeley Gardens 12, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Walserweg 21`, Age: 39, City: `Aachen`, Country: `Germany`, Fax: `0241-059428`, HireDate: `2010-03-22`, ID: 9, Name: `Francisco Chang`, ParentID: 7, Phone: `0241-039123`, PostalCode: 52066, Title: `Localization Intern`, LastName: `Chang`, FullAddress: `Walserweg 21, Aachen, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `35 King George`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-3373`, HireDate: `2018-03-18`, ID: 16, Name: `Peter Lewis`, ParentID: 7, Phone: `(171) 555-0297`, PostalCode: 48000, Title: `Localization Intern`, LastName: `Lewis`, FullAddress: `35 King George, London, UK` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatDetails;
        }
        this._bind();
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

}

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="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID"
        column-selection="multiple">
            <igc-column
            field="Name"
            data-type="string">
            </igc-column>
            <igc-column-group
            header="General Information">
                <igc-column
                field="HireDate"
                header="Hire Date"
                data-type="date">
                </igc-column>
                <igc-column-group
                header="Personal Details">
                    <igc-column
                    field="ID"
                    data-type="number">
                    </igc-column>
                    <igc-column
                    field="Title"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Age"
                    data-type="number"
                    selectable="false">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
            <igc-column-group
            header="Address Information">
                <igc-column-group
                header="Location">
                    <igc-column
                    field="Country"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="City"
                    data-type="string">
                    </igc-column>
                    <igc-column
                    field="Address"
                    data-type="string">
                    </igc-column>
                </igc-column-group>
                <igc-column-group
                header="Contact Information">
                    <igc-column
                    field="Phone"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="Fax"
                    data-type="string"
                    selectable="false">
                    </igc-column>
                    <igc-column
                    field="PostalCode"
                    header="Postal Code"
                    data-type="string">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
        </igc-tree-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 */

#treeGrid {
	--ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

css

API 참조

열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

IgcTreeGridComponent properties:

ColumnSelection
SelectedColumns
SelectColumns
DeselectColumns
SelectAllColumns
DeselectAllColumns

IgcColumnComponent properties:

columnGroup properties:

IgcTreeGridComponent events:

OnColumnsSelectionChange

추가 리소스

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