React Tree Grid 셀 편집
트리 그리드의 Ignite UI for React 셀 편집 React React 트리 그리드 구성 요소 내의 개별 셀 내용에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for React의 그리드는 셀 편집에 사용됩니다. 그리고 때문에 기본 셀 편집 템플릿, 열 데이터 유형 Top of Form에 따라 다른 편집기가 있습니다.
또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.
React Tree Grid Cell Editing and Edit Templates Example
export class EmployeesNestedTreeDataItem {
public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
Object.assign(this, init);
}
public Age: number;
public HireDate: string;
public ID: number;
public Name: string;
public Phone: string;
public OnPTO: boolean;
public ParentID: number;
public Title: string;
}
export class EmployeesNestedTreeData extends Array<EmployeesNestedTreeDataItem> {
public constructor(items: Array<EmployeesNestedTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesNestedTreeDataItem(
{
Age: 55,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
Phone: `0251-031259`,
OnPTO: false,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 42,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
Phone: `(21) 555-0091`,
OnPTO: true,
ParentID: -1,
Title: `CEO`
}),
new EmployeesNestedTreeDataItem(
{
Age: 49,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
Phone: `(071) 23 67 22 20`,
OnPTO: true,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 61,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
Phone: `(21) 555-0091`,
OnPTO: false,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 43,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Phone: `0452-076545`,
OnPTO: true,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 29,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Phone: `(14) 555-8122`,
OnPTO: false,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 31,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Phone: `7675-3425`,
OnPTO: false,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesNestedTreeDataItem(
{
Age: 35,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
Phone: `0695-34 67 21`,
OnPTO: true,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Phone: `981-443655`,
OnPTO: false,
ParentID: 4,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Phone: `(2) 283-2951`,
OnPTO: true,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Phone: `981-443655`,
OnPTO: true,
ParentID: 5,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesNestedTreeDataItem(
{
Age: 50,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
Phone: `035-640230`,
OnPTO: false,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 27,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
Phone: `0342-023176`,
OnPTO: true,
ParentID: 10,
Title: `Senior Localization`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
Phone: `069-0245984`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
Phone: `(91) 745 6200`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
Phone: `069-0245984`,
OnPTO: true,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPaginatorModule, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrPaginator, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebPaginatorDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrPaginatorModule,
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.treeGridRef = this.treeGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate={false}
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesNestedTreeData}
primaryKey="ID"
allowFiltering={true}
foreignKey="ParentID">
<IgrPaginator
perPage={10}>
</IgrPaginator>
<IgrColumn
field="Name"
dataType="string"
editable={true}
hasSummary={true}>
</IgrColumn>
<IgrColumn
field="Title"
dataType="string"
editable={true}
hasSummary={true}>
</IgrColumn>
<IgrColumn
field="Age"
dataType="number"
editable={true}
hasSummary={true}>
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="date"
editable={true}
hasSummary={true}>
</IgrColumn>
<IgrColumn
field="OnPTO"
dataType="boolean"
editable={true}
hasSummary={true}
width="130px">
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesNestedTreeData: EmployeesNestedTreeData = null;
public get employeesNestedTreeData(): EmployeesNestedTreeData {
if (this._employeesNestedTreeData == null)
{
this._employeesNestedTreeData = new EmployeesNestedTreeData();
}
return this._employeesNestedTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebPaginatorDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
셀 편집
Editing through UI
다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.
- 두 번 클릭하면;
- 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
- 키를 누르면 Enter;
- 키를 누르면 F2;
다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.
- 키를 누를 때 Escape;
- 정렬, 필터링, 검색 및 숨기기 작업을 수행할 때
다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.
- 키를 누르면 Enter;
- 키를 누르면 F2;
- 키를 누를 때 Tab;
- 다른 셀을 한 번 클릭할 때 - 에서
IgrTreeGrid
다른 셀을 클릭하면 변경 사항이 제출됩니다. - 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.
The cell remains in edit mode when you scroll vertically or horizontally or click outside the IgrTreeGrid. This is valid for both cell editing and row editing.
Editing through API
API를 통해 IgrTreeGrid
셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 수정할 수 있습니다.
public updateCell() {
this.treeGrid.updateCell(newValue, rowID, 'Age');
}
typescript
셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을 사용하는 Update
것입니다. Cell
public updateCell() {
const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age');
// You can also get cell by rowID if primary key is defined
// const cell = this.treeGrid.getCellByKey(rowID, 'Age');
cell.update(9999);
}
typescript
Cell Editing Templates
일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.
셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.
<IgrColumn
field="race"
header="Race"
dataType="string"
editable={true}
inlineEditorTemplate={this.webGridCellEditCellTemplate}>
</IgrColumn>
tsx
index.ts 파일의 이 열에 템플릿을 전달합니다.
public webGridCellEditCellTemplate = (e: IgrCellTemplateContext) => {
let cellValues: any = [];
let uniqueValues: any = [];
const cell = e.cell;
const colIndex = cell.id.columnID;
const field: string = this.grid1.getColumnByVisibleIndex(colIndex).field;
let index = 0;
for (const i of this.roleplayDataStats as any) {
if (uniqueValues.indexOf(i[field]) === -1) {
cellValues.push(
<>
<IgrSelectItem
selected={e.cell.value == i[field]}
value={i[field]}
>
<div>{i[field]}</div>
</IgrSelectItem>
</>
);
uniqueValues.push(i[field]);
}
index++;
}
return (
<>
<IgrSelect
onChange={(x: any) => {
setTimeout(() => {
cell.editValue = x.target.value;
});
}}
>
{cellValues}
</IgrSelect>
</>
);
};
typescript
추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.
export class RoleplayTreeGridDataItem {
public constructor(init: Partial<RoleplayTreeGridDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public Age: string;
public Alignment: string;
public Race: string;
public Class: string;
}
export class RoleplayTreeGridData extends Array<RoleplayTreeGridDataItem> {
public constructor(items: Array<RoleplayTreeGridDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new RoleplayTreeGridDataItem(
{
ID: 1,
ParentID: 8,
Name: `Stredo`,
Age: `244`,
Alignment: `💜 Lawful evil`,
Race: `👩 Human`,
Class: `🎻 Bard`
}),
new RoleplayTreeGridDataItem(
{
ID: 2,
ParentID: 7,
Name: `Haluun`,
Age: `40`,
Alignment: `🤍 Unaligned`,
Race: `🧒🏻 Hafling`,
Class: `🙏🏻 Monk`
}),
new RoleplayTreeGridDataItem(
{
ID: 3,
ParentID: 9,
Name: `Ivellios`,
Age: `244`,
Alignment: `🧡 Chaotic good`,
Race: `👩 Human`,
Class: `⚔️ Paladin`
}),
new RoleplayTreeGridDataItem(
{
ID: 4,
ParentID: -1,
Name: `Tes`,
Age: `35`,
Alignment: `💜 Lawful evil`,
Race: `🎭 Changeling`,
Class: `🧙♂️ Wizard`
}),
new RoleplayTreeGridDataItem(
{
ID: 5,
ParentID: 3,
Name: `Kalla`,
Age: `47`,
Alignment: `🤎 Neutral evil`,
Race: `🤖 Warforged`,
Class: `🦹♂️ Sorcerer`
}),
new RoleplayTreeGridDataItem(
{
ID: 6,
ParentID: 2,
Name: `Halimath Dundragon`,
Age: `149`,
Alignment: `🤍 Unaligned`,
Race: `🐲 Dragonborn`,
Class: `⚔️ Paladin`
}),
new RoleplayTreeGridDataItem(
{
ID: 7,
ParentID: 5,
Name: `Iriphawa`,
Age: `39`,
Alignment: `💛 Lawful neutral`,
Race: `🧝🏻♂️ Half-Elf`,
Class: `🏹 Ranger`
}),
new RoleplayTreeGridDataItem(
{
ID: 8,
ParentID: 6,
Name: `Quaf`,
Age: `25`,
Alignment: `💚 Neutral`,
Race: `👩 Human`,
Class: `🥊 Fighter`
}),
new RoleplayTreeGridDataItem(
{
ID: 9,
ParentID: 10,
Name: `Rat Scratch`,
Age: `15`,
Alignment: `🤎 Neutral evil`,
Race: `🐡 Locathah`,
Class: `🍁 Druid`
}),
new RoleplayTreeGridDataItem(
{
ID: 10,
ParentID: 4,
Name: `Slicer`,
Age: `57`,
Alignment: `💜 Lawful evil`,
Race: `🐡 Locathah`,
Class: `💪 Barbarian`
}),
new RoleplayTreeGridDataItem(
{
ID: 11,
ParentID: 7,
Name: `Nereones Ahlorsath`,
Age: `95`,
Alignment: `💛 Lawful neutral`,
Race: `👩 Human`,
Class: `🥊 Fighter`
}),
new RoleplayTreeGridDataItem(
{
ID: 12,
ParentID: 9,
Name: `Nalvarti Stonecutter`,
Age: `118`,
Alignment: `❤️ Neutral good`,
Race: `🧝♀️ Elf`,
Class: `❤️ Cleric`
}),
new RoleplayTreeGridDataItem(
{
ID: 13,
ParentID: 1,
Name: `Errk`,
Age: `22`,
Alignment: `🤎 Neutral evil`,
Race: `🧝🏻♂️ Half-Elf`,
Class: `🎻 Bard`
}),
new RoleplayTreeGridDataItem(
{
ID: 14,
ParentID: 5,
Name: `Seven Thundercloud`,
Age: `43`,
Alignment: `💖 Lawful good`,
Race: `🐡 Locathah`,
Class: `⚔️ Paladin`
}),
new RoleplayTreeGridDataItem(
{
ID: 15,
ParentID: 10,
Name: `Navarra Chergoba`,
Age: `16`,
Alignment: `💜 Lawful evil`,
Race: `🐯 Tabaxi`,
Class: `❤️ Cleric`
}),
new RoleplayTreeGridDataItem(
{
ID: 16,
ParentID: 4,
Name: `Sail Snap`,
Age: `56`,
Alignment: `💖 Lawful good`,
Race: `🌳 Arboren`,
Class: `💪 Barbarian`
}),
new RoleplayTreeGridDataItem(
{
ID: 17,
ParentID: 8,
Name: `Urreek`,
Age: `17`,
Alignment: `💜 Lawful evil`,
Race: `🧝🏻♂️ Half-Elf`,
Class: `🐉 Warlock`
}),
new RoleplayTreeGridDataItem(
{
ID: 18,
ParentID: 6,
Name: `Morkral Firetamer`,
Age: `24`,
Alignment: `🤎 Neutral evil`,
Race: `🐲 Dragonborn`,
Class: `🙏🏻 Monk`
}),
new RoleplayTreeGridDataItem(
{
ID: 19,
ParentID: 2,
Name: `Vithka`,
Age: `53`,
Alignment: `💜 Lawful evil`,
Race: `🐡 Locathah`,
Class: `⚔️ Paladin`
}),
new RoleplayTreeGridDataItem(
{
ID: 20,
ParentID: 7,
Name: `Sandrue Avhoste`,
Age: `19`,
Alignment: `💙 Chaotic Neutral`,
Race: `🐲 Dragonborn`,
Class: `🗡️ Rogue`
}),
new RoleplayTreeGridDataItem(
{
ID: 21,
ParentID: 8,
Name: `Hapah Moq`,
Age: `34`,
Alignment: `💜 Lawful evil`,
Race: `🎅🏽 Dwarf`,
Class: `🎻 Bard`
}),
new RoleplayTreeGridDataItem(
{
ID: 22,
ParentID: 5,
Name: `Kothar`,
Age: `55`,
Alignment: `🤍 Unaligned`,
Race: `🧝🏻♂️ Half-Elf`,
Class: `🐉 Warlock`
}),
new RoleplayTreeGridDataItem(
{
ID: 23,
ParentID: 1,
Name: `Senen`,
Age: `40`,
Alignment: `💜 Lawful evil`,
Race: `🧒🏻 Hafling`,
Class: `🥊 Fighter`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrSelectModule } from "@infragistics/igniteui-react";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebTreeGridDescriptionModule, WebSelectDescriptionModule } from "@infragistics/igniteui-react-core";
import { RoleplayTreeGridDataItem, RoleplayTreeGridData } from './RoleplayTreeGridData';
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import { IgrSelect, IgrSelectItem } from "@infragistics/igniteui-react";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrTreeGridModule,
IgrSelectModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid1: IgrTreeGrid
private treeGrid1Ref(r: IgrTreeGrid) {
this.treeGrid1 = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.treeGrid1Ref = this.treeGrid1Ref.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate={false}
ref={this.treeGrid1Ref}
id="treeGrid1"
data={this.roleplayTreeGridData}
primaryKey="ID"
foreignKey="ParentID">
<IgrColumn
field="Name"
header="Character Name"
dataType="string">
</IgrColumn>
<IgrColumn
field="Race"
header="Race"
dataType="string"
editable={true}
inlineEditorTemplate={this.webTreeGridCellEditCellTemplate}>
</IgrColumn>
<IgrColumn
field="Class"
header="Class"
inlineEditorTemplate={this.webTreeGridCellEditCellTemplate}
dataType="string"
editable={true}>
</IgrColumn>
<IgrColumn
field="Age"
header="Age"
dataType="string"
editable={true}>
</IgrColumn>
<IgrColumn
field="Alignment"
header="Alignment"
inlineEditorTemplate={this.webTreeGridCellEditCellTemplate}
dataType="string"
editable={true}>
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _roleplayTreeGridData: RoleplayTreeGridData = null;
public get roleplayTreeGridData(): RoleplayTreeGridData {
if (this._roleplayTreeGridData == null)
{
this._roleplayTreeGridData = new RoleplayTreeGridData();
}
return this._roleplayTreeGridData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
WebSelectDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridCellEditCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {
let cellValues: any = [];
let uniqueValues: any = [];
const cell = e.dataContext.cell;
const colIndex = cell.id.columnID;
var treeGrid1 = this.treeGrid1;
const field: string = treeGrid1.getColumnByVisibleIndex(colIndex).field;
let roleplayTreeGridData = treeGrid1.data;
const key = field + "_" + cell.id.rowID;
let index = 0;
for(const i of (roleplayTreeGridData as any)){
if(uniqueValues.indexOf(i[field]) === -1 )
{
cellValues.push(<><IgrSelectItem selected={e.dataContext.cell.value == i[field]}
value={i[field]} key={key + "_" + index}>
<div key={key + "_" + index}>{i[field]}</div>
</IgrSelectItem></>);
uniqueValues.push(i[field]);
}
index++;
}
return (
<IgrSelect className="size-large" key={key} onChange={(x: any) => {
setTimeout(() => {
cell.editValue = x.target.value;
});
}}>
{cellValues}
</IgrSelect>
);
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.size-large {
--ig-size: var(--ig-size-large);
}
css
CRUD operations
Please keep in mind that when you perform some CRUD operation all of the applied pipes like filtering, sorting and grouping will be re-applied and your view will be automatically updated.
IgrTreeGrid
기본 CRUD 작업을 위한 간단한 API를 제공합니다.
Adding a new record
IgrTreeGrid
구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 메서드를 노출 addRow
합니다.
public addNewChildRow() {
// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data
// And specifying the parentRowID.
const record = this.getNewRecord();
this.treeGrid.addRow(record, 1);
}
typescript
Updating data in the Tree Grid
트리 그리드의 데이터 업데이트는 updateRow
및 updateCell
메소드를 통해 이루어지지만 그리드의 PrimaryKey가 정의된 경우에만 가능합니다. 또한 해당 업데이트 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.
// Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Tree Grid API
this.treeGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
// Directly using the cell `update` method
this.selectedCell.update(newData);
// Directly using the row `update` method
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
typescript
Deleting data from the Tree Grid
deleteRow
메소드는 primaryKey
가 정의된 경우에만 지정된 행을 제거한다는 점을 명심하십시오.
// Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();
typescript
Cell Validation on Edit Event
IgrTreeGrid
편집 이벤트를 사용하여 사용자가 상호 작용하는 방식을 변경할 수 있습니다 IgrTreeGrid
.
이 예에서는 CellEdit
이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.
가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.
<IgrTreeGrid onCellEdit={handleCellEdit}>
</IgrTreeGrid>
tsx
CellEdit
셀의 값이 커밋되려고 할 때마다 내보냅니다. CellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.
public webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
const column = args.detail.column;
if (column.field === 'Age') {
if (args.detail.newValue < 18) {
args.detail.cancel = true;
alert('Employees must be at least 18 years old!');
}
} else if (column.field === 'HireDate') {
if (args.detail.newValue > new Date().getTime()) {
args.detail.cancel = true;
alert('The employee hire date must be in the past!');
}
}
}
tsx
위의 유효성 검사가 적용된 IgrTreeGrid
결과는 아래 데모에서 볼 수 있습니다.
export class EmployeesNestedTreeDataItem {
public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
Object.assign(this, init);
}
public Age: number;
public HireDate: string;
public ID: number;
public Name: string;
public Phone: string;
public OnPTO: boolean;
public ParentID: number;
public Title: string;
}
export class EmployeesNestedTreeData extends Array<EmployeesNestedTreeDataItem> {
public constructor(items: Array<EmployeesNestedTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesNestedTreeDataItem(
{
Age: 55,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
Phone: `0251-031259`,
OnPTO: false,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 42,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
Phone: `(21) 555-0091`,
OnPTO: true,
ParentID: -1,
Title: `CEO`
}),
new EmployeesNestedTreeDataItem(
{
Age: 49,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
Phone: `(071) 23 67 22 20`,
OnPTO: true,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 61,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
Phone: `(21) 555-0091`,
OnPTO: false,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 43,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Phone: `0452-076545`,
OnPTO: true,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 29,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Phone: `(14) 555-8122`,
OnPTO: false,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 31,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Phone: `7675-3425`,
OnPTO: false,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesNestedTreeDataItem(
{
Age: 35,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
Phone: `0695-34 67 21`,
OnPTO: true,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Phone: `981-443655`,
OnPTO: false,
ParentID: 4,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Phone: `(2) 283-2951`,
OnPTO: true,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Phone: `981-443655`,
OnPTO: true,
ParentID: 5,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesNestedTreeDataItem(
{
Age: 50,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
Phone: `035-640230`,
OnPTO: false,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 27,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
Phone: `0342-023176`,
OnPTO: true,
ParentID: 10,
Title: `Senior Localization`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
Phone: `069-0245984`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
Phone: `(91) 745 6200`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
Phone: `069-0245984`,
OnPTO: true,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import { IgrGrid, IgrGridEditEventArgs } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.treeGridRef = this.treeGridRef.bind(this);
this.webTreeGridCellEdit = this.webTreeGridCellEdit.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate={false}
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesNestedTreeData}
primaryKey="ID"
onCellEdit={this.webTreeGridCellEdit}
foreignKey="ParentID">
<IgrColumn
field="Name"
dataType="string">
</IgrColumn>
<IgrColumn
field="Title"
dataType="string">
</IgrColumn>
<IgrColumn
field="Age"
dataType="number"
editable={true}>
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="date"
editable={true}>
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesNestedTreeData: EmployeesNestedTreeData = null;
public get employeesNestedTreeData(): EmployeesNestedTreeData {
if (this._employeesNestedTreeData == null)
{
this._employeesNestedTreeData = new EmployeesNestedTreeData();
}
return this._employeesNestedTreeData;
}
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 webTreeGridCellEdit(args: IgrGridEditEventArgs): void {
const column = args.detail.column;
if (column.field === 'Age') {
if (args.detail.newValue < 18) {
args.detail.cancel = true;
alert('Employees must be at least 18 years old!');
}
} else if (column.field === 'HireDate') {
if (args.detail.newValue > new Date().getTime()) {
args.detail.cancel = true;
alert('The employee hire date must be in the past!');
}
}
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<IgrTreeGrid className="treeGrid"></IgrTreeGrid>
tsx
그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.
.treeGrid {
--ig-grid-edit-mode-color: orange;
--ig-grid-cell-editing-background: lightblue;
}
css
Styling Example
export class EmployeesNestedTreeDataItem {
public constructor(init: Partial<EmployeesNestedTreeDataItem>) {
Object.assign(this, init);
}
public Age: number;
public HireDate: string;
public ID: number;
public Name: string;
public Phone: string;
public OnPTO: boolean;
public ParentID: number;
public Title: string;
}
export class EmployeesNestedTreeData extends Array<EmployeesNestedTreeDataItem> {
public constructor(items: Array<EmployeesNestedTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesNestedTreeDataItem(
{
Age: 55,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
Phone: `0251-031259`,
OnPTO: false,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 42,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
Phone: `(21) 555-0091`,
OnPTO: true,
ParentID: -1,
Title: `CEO`
}),
new EmployeesNestedTreeDataItem(
{
Age: 49,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
Phone: `(071) 23 67 22 20`,
OnPTO: true,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 61,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
Phone: `(21) 555-0091`,
OnPTO: false,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesNestedTreeDataItem(
{
Age: 43,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Phone: `0452-076545`,
OnPTO: true,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 29,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Phone: `(14) 555-8122`,
OnPTO: false,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 31,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Phone: `7675-3425`,
OnPTO: false,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesNestedTreeDataItem(
{
Age: 35,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
Phone: `0695-34 67 21`,
OnPTO: true,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Phone: `981-443655`,
OnPTO: false,
ParentID: 4,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Phone: `(2) 283-2951`,
OnPTO: true,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Phone: `981-443655`,
OnPTO: true,
ParentID: 5,
Title: `Director`
}),
new EmployeesNestedTreeDataItem(
{
Age: 44,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
Phone: `(505) 555-5939`,
OnPTO: false,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesNestedTreeDataItem(
{
Age: 50,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
Phone: `035-640230`,
OnPTO: false,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesNestedTreeDataItem(
{
Age: 27,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
Phone: `0342-023176`,
OnPTO: true,
ParentID: 10,
Title: `Senior Localization`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
Phone: `069-0245984`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 39,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
Phone: `(91) 745 6200`,
OnPTO: false,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesNestedTreeDataItem(
{
Age: 25,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
Phone: `069-0245984`,
OnPTO: true,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPaginatorModule, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrPaginator, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebPaginatorDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrPaginatorModule,
IgrTreeGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private treeGrid: IgrTreeGrid
private treeGridRef(r: IgrTreeGrid) {
this.treeGrid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.treeGridRef = this.treeGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrTreeGrid
autoGenerate={false}
ref={this.treeGridRef}
id="treeGrid"
data={this.employeesNestedTreeData}
primaryKey="ID"
allowFiltering={true}
foreignKey="ParentID">
<IgrPaginator
perPage={10}>
</IgrPaginator>
<IgrColumn
field="Name"
dataType="string"
editable={true}>
</IgrColumn>
<IgrColumn
field="Title"
dataType="string"
editable={true}>
</IgrColumn>
<IgrColumn
field="Age"
dataType="number"
editable={true}>
</IgrColumn>
<IgrColumn
field="HireDate"
dataType="date"
editable={true}>
</IgrColumn>
<IgrColumn
field="OnPTO"
dataType="boolean"
editable={true}
width="130px">
</IgrColumn>
</IgrTreeGrid>
</div>
</div>
);
}
private _employeesNestedTreeData: EmployeesNestedTreeData = null;
public get employeesNestedTreeData(): EmployeesNestedTreeData {
if (this._employeesNestedTreeData == null)
{
this._employeesNestedTreeData = new EmployeesNestedTreeData();
}
return this._employeesNestedTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebPaginatorDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#treeGrid {
--cell-editing-background: #4567bb;
--cell-active-border-color: #4567bb;
--cell-edited-value-color: #fff;
}
css