트리 그리드 열 재정렬 및 이동
Ignite UI for Web Components의 Web Components Tree Grid Column Moving 기능을 사용하면 빠르고 쉽게 열을 재정렬할 수 있습니다. 이는 Column Moving API를 통해 수행하거나 마우스나 터치 제스처를 통해 헤더를 다른 위치로 끌어서 놓아서 수행할 수 있습니다. Web Components Tree Grid에서 고정 및 고정 해제된 열과 다중 열 헤더에 대한 열 이동을 활성화할 수 있습니다.
열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.
열 머리글이 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false로 설정해야 합니다!
고정된 영역이 최대 허용 너비(총 IgcTreeGridComponent 너비의 80%)를 초과하는 경우 시각적 단서는 최종 사용자에게 삭제 작업이 금지되고 고정이 불가능함을 알립니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.
public headerTemplate = (ctx: IgcCellTemplateContext) => {
return html`
<igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
`;
}
tsWeb 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, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
column7.headerTemplate = this.webTreeGridPinHeaderTemplate;
column8.headerTemplate = this.webTreeGridPinHeaderTemplate;
column9.headerTemplate = this.webTreeGridPinHeaderTemplate;
column10.headerTemplate = this.webTreeGridPinHeaderTemplate;
column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
}
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;
}
public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
</div>`;
};
public toggleColumnPin(field: string) {
var grid = this.treeGrid;
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
}
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"
moving="true"
column-width="200">
<igc-paginator
per-page="10"
total-records="20">
</igc-paginator>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string"
name="column2"
id="column2">
</igc-column>
<igc-column
field="ID"
data-type="number"
name="column3"
id="column3">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
name="column4"
id="column4">
</igc-column>
<igc-column
field="Age"
data-type="number"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Address"
data-type="string"
name="column6"
id="column6">
</igc-column>
<igc-column
field="City"
data-type="string"
name="column7"
id="column7">
</igc-column>
<igc-column
field="Country"
data-type="string"
name="column8"
id="column8">
</igc-column>
<igc-column
field="Fax"
data-type="string"
name="column9"
id="column9">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
name="column10"
id="column10">
</igc-column>
<igc-column
field="Phone"
data-type="string"
name="column11"
id="column11">
</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 가능 또는 이동 불가능한 열을 가질 수 있음을 의미합니다. 이것은 의 입력을 Moving 통해 수행됩니다. IgcTreeGridComponent
API
끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 API 메서드도 제공합니다.
MoveColumn- 열을 다른 열(대상) 앞이나 뒤로 이동합니다. 첫 번째 매개 변수는 이동할 열이고 두 번째 매개 변수는 대상 열입니다. 또한 선택적 세 번째 매개 변수(값을 나타 DropPosition 냄)를 허용하며, 이 매개 변수는 Position 열을 대상 열 앞 또는 뒤에 배치할지 여부를 결정합니다.
// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
typescriptmove- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.
// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
typescript열 이동 기능을 ColumnMovingEnd 사용할 때 작업이 성공하면 이벤트가 발생합니다. 또한 끌어서 놓기 기능과 비교할 때 열 이동 기능을 사용할 때는 속성을 true로 설정할 Moving 필요가 없습니다.
이벤트
열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이는 ColumnMovingStart, ColumnMoving 및 ColumnMovingEnd 입니다.
를 구독할 수 있습니다. ColumnMovingEnd의 이벤트 IgcTreeGridComponent 열을 새 위치로 놓을 때 일부 사용자 지정 논리를 구현합니다. 예를 들어, 삭제를 취소할 수 있습니다. 범주 열 뒤의 전년 대비 변동률(%) 다음 코드 스니펫의 열입니다.
<igc-tree-grid id="dataGrid" auto-generate="false" moving="true">
<igc-column field="Category"></igc-column>
<igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-tree-grid>
htmlconstructor() {
var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
dataGrid.data = this.data;
dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescriptpublic onColumnMovingEnd(event) {
if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
event.detail.cancel = true;
}
}
typescript스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다.
일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<igc-tree-grid class="grid"></igc-tree-grid>
html그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
.grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
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, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcColumnTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
column7.headerTemplate = this.webTreeGridPinHeaderTemplate;
column8.headerTemplate = this.webTreeGridPinHeaderTemplate;
column9.headerTemplate = this.webTreeGridPinHeaderTemplate;
column10.headerTemplate = this.webTreeGridPinHeaderTemplate;
column11.headerTemplate = this.webTreeGridPinHeaderTemplate;
}
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;
}
public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx as any).column;
return html`<div>
<span style="float:left">${column.field}</span>
<span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
</div>`;
};
public toggleColumnPin(field: string) {
var grid = this.treeGrid;
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
}
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"
moving="true"
column-width="200">
<igc-paginator
per-page="10"
total-records="20">
</igc-paginator>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string"
name="column2"
id="column2">
</igc-column>
<igc-column
field="ID"
data-type="number"
name="column3"
id="column3">
</igc-column>
<igc-column
field="HireDate"
data-type="date"
name="column4"
id="column4">
</igc-column>
<igc-column
field="Age"
data-type="number"
name="column5"
id="column5">
</igc-column>
<igc-column
field="Address"
data-type="string"
name="column6"
id="column6">
</igc-column>
<igc-column
field="City"
data-type="string"
name="column7"
id="column7">
</igc-column>
<igc-column
field="Country"
data-type="string"
name="column8"
id="column8">
</igc-column>
<igc-column
field="Fax"
data-type="string"
name="column9"
id="column9">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
name="column10"
id="column10">
</igc-column>
<igc-column
field="Phone"
data-type="string"
name="column11"
id="column11">
</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-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
css
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.