Web Components 트리 그리드 열 크기 조정 개요
Web Components 트리 그리드의 Ignite UI for Web Components 열 크기 조정 기능을 사용하면 사용자가 트리 그리드의 열 IgcTreeGridComponent
너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, Auto-Size Columns on Initialization과 같은 몇 가지 크기 조정 옵션을 사용할 수 있습니다.
Web Components 트리 그리드 열 크기 조정 예제
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));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
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;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.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="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="Name"
data-type="string"
resizable="true"
min-width="60"
max-width="250"
width="220">
</igc-column>
<igc-column
field="Title"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="HireDate"
header="Hire Date"
data-type="date"
resizable="true">
</igc-column>
<igc-column
field="Age"
data-type="number"
resizable="true">
</igc-column>
<igc-column
field="Address"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
header="Postal Code"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Phone"
data-type="string"
resizable="true">
</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
열 크기 조정은 열 수준별로 사용하도록 설정되며, 이는 크기 조정이 IgcTreeGridComponent
가능한 열과 크기 조정이 불가능한 열을 혼합할 수 있음을 의미합니다. 이것은 의 IgcColumnComponent
입력을 resizable
통해 수행됩니다.
<igc-column field="ID" width="100px" resizable="true"></igc-column>
html
를 구독할 수 있습니다. ColumnResized
의 이벤트 IgcTreeGridComponent
열의 크기가 조정될 때 일부 사용자 지정 논리를 구현합니다. 이전 및 새 열 너비와 함께 IgcColumnComponent
객체는 이벤트 인수를 통해 노출됩니다.
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID">
<igc-column field="Title" width="100px" resizable="true" width="100px"></igc-column>
<igc-column field="HireDate" width="100px" resizable="true" width="100px"></igc-column>
</igc-tree-grid>
html
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.data = this.data;
treeGrid.columnResized = this.onResize;
}
public onResize(event) {
this.col = event.column;
this.pWidth = event.prevWidth;
this.nWidth = event.newWidth;
}
ts
픽셀/백분율 단위로 열 크기 조정
사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.
이는 다음 구성이 가능함을 의미합니다.
<igc-tree-grid id="data" primary-key="ID" foreign-key="ParentID" auto-generate="false">
<igc-column field="Title" resizable="true" width="10%"></igc-column>
<igc-column field="HireDate" resizable="true" width="100px"></igc-column>
<igc-column field="Age" data-type="Number" resizable="true"></igc-column>
</igc-tree-grid>
html
픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.
픽셀
너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.
백분율
너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.
열 크기 조정 제한
허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이것은 의 및 maxWidth
입력을 IgcColumnComponent
통해 minWidth
수행됩니다. 이 경우 크기 조정 표시기 끌기 작업이 제한되어 and maxWidth
로 정의된 minWidth
경계 외부에서 열의 크기를 조정할 수 없음을 사용자에게 알립니다.
<igc-column field="ID" width="100px" resizable="true"
min-width="60px" max-width="230px"></igc-column>
html
최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.
이는 다음과 같은 구성이 가능함을 의미합니다.
<igc-column field="ID" width="10%" resizable="true"
min-width="60px" max-width="230px"></igc-column>
html
또는
<igc-column field="ID" width="100px" resizable="true"
min-width="5%" max-width="15%"></igc-column>
html
두 번 클릭 시 열 크기 자동 조정
헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 maxWidth
설정되어 있고 새 너비가 해당 maxWidth
값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 maxWidth
값에 따라 크기가 조정됩니다.
또한 exposed autosize
method on을 사용하여 동적으로 열 크기를 자동으로 조정할 수도 있습니다 IgcColumnComponent
.
constructor() {
var id = this.id = document.getElementById('ID') as IgcColumnComponent;
id.autosize();
}
typescript
초기화 시 열 자동 크기 조정
너비를 '자동'으로 설정하여 초기화 시 각 width
크기가 자동으로 조정되도록 설정할 수 있습니다.
<igc-column width='auto'>
html
열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다.
이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.
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));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
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;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.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="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="Name"
header="Name"
data-type="string"
resizable="true"
width="220px"
min-width="200px"
max-width="250px">
</igc-column>
<igc-column
field="Title"
header="Title"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="HireDate"
header="Hire Date"
data-type="date"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="Age"
data-type="number"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="Address"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="City"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="Country"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="Fax"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="PostalCode"
header="Postal Code"
data-type="string"
resizable="true"
width="auto">
</igc-column>
<igc-column
field="Phone"
data-type="string"
resizable="true"
width="auto">
</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
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 크기 조정 핸들의 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<igc-tree-grid class="grid"></igc-tree-grid>
html
그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.
.grid {
--ig-grid-resize-line-color: #f35b04;
}
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));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
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 grid: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
this._bind = () => {
grid.data = this.employeesFlatDetails;
}
this._bind();
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
return this._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.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="container fill">
<igc-tree-grid
auto-generate="false"
name="grid"
id="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID">
<igc-column
field="Name"
data-type="string"
resizable="true"
min-width="60"
max-width="250"
width="220">
</igc-column>
<igc-column
field="Title"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="HireDate"
header="Hire Date"
data-type="date"
resizable="true">
</igc-column>
<igc-column
field="Age"
data-type="number"
resizable="true">
</igc-column>
<igc-column
field="Address"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
header="Postal Code"
data-type="string"
resizable="true">
</igc-column>
<igc-column
field="Phone"
data-type="string"
resizable="true">
</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 */
#grid {
--ig-grid-resize-line-color: #f35b04;
}
css
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.