Web Components 계층적 그리드의 Ignite UI for Web Components 셀 편집은 Web Components 계층적 그리드 구성 요소 내에서 개별 셀의 콘텐츠에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for Web Components의 그리드는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 열 데이터 유형 Top of Form에 따라 다른 편집기가 있습니다.
또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"id="grid"name="grid"id="grid"primary-key="ProductID"allow-filtering="true"><igc-paginatorper-page="10"></igc-paginator><igc-columnfield="ProductName"header="Product Name"data-type="string"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="UnitsInStock"header="Units in Stock"data-type="number"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="Discontinued"header="Discontinued"data-type="boolean"sortable="true"has-summary="true"editable="true"></igc-column><igc-columnfield="ReorderLevel"header="Reorder Level"data-type="number"sortable="true"has-summary="true"editable="true"filterable="false"></igc-column><igc-row-islandchild-data-key="Locations"auto-generate="false"><igc-columnfield="Shop"header="Shop"data-type="string"editable="true"resizable="true"></igc-column><igc-columnfield="LastInventory"header="Last Inventory"data-type="date"editable="true"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을 사용하는 Update 것입니다. Cell
publicupdateCell() {
const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel');
// You can also get cell by rowID if primary key is defined// cell = this.hierarchicalGrid.getCellByKey(rowID, 'ReorderLevel');
cell.update(70);
}
typescript
constructor() {
var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
hierarchicalGrid.data = this.singersData;
column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}
public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
let cellValues: any = [];
let uniqueValues: any = [];
for(const i of (this.singersData asany)){
const field: string = ctx.cell.column.field;
if(uniqueValues.indexOf(i[field]) === -1 )
{
cellValues.push(html`<igc-select-itemvalue=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`<igc-selectstyle="width:100%; height:100%"size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>${cellValues}</igc-select>
`;
}
ts
추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebSelectDescriptionModule } from'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import HGridDndData from'./HGridDndData.json';
import { IgcCellTemplateContext } from'igniteui-webcomponents-grids/grids';
import { html, nothing } from'lit-html';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from'igniteui-webcomponents';
defineAllComponents();
import"./index.css";
exportclassSample{
private hierarchicalGrid1: IgcHierarchicalGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private _bind: () =>void;
constructor() {
var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
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;
this._bind = () => {
hierarchicalGrid1.data = this.hGridDndData;
column1.inlineEditorTemplate = this.hGridCellEditCellTemplate;
column2.inlineEditorTemplate = this.hGridCellEditCellTemplate;
column3.inlineEditorTemplate = this.hGridCellEditCellTemplate;
}
this._bind();
}
private _hGridDndData: any[] = HGridDndData;
publicgethGridDndData(): any[] {
returnthis._hGridDndData;
}
private _componentRenderer: ComponentRenderer = null;
publicgetrenderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebSelectDescriptionModule.register(context);
}
returnthis._componentRenderer;
}
public hGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
let cellValues: any = [];
let uniqueValues: any = [];
let hGridDndData = this.hierarchicalGrid1.data;
for(const i of (hGridDndData asany)){
const field: string = ctx.cell.column.field;
if(uniqueValues.indexOf(i[field]) === -1 )
{
if (ctx.cell.value == i[field]) {
cellValues.push(html`<igc-select-itemselectedvalue=${i[field]}>${(i[field])}</igc-select-item>`);
} else cellValues.push(html`<igc-select-itemvalue=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`<igc-selectstyle="width:100%; height:100%; --ig-size: var(--ig-size-large);" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>${cellValues}</igc-select>
`;
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="Name"name="hierarchicalGrid1"id="hierarchicalGrid1"><igc-columnfield="Name"header="Character Name"data-type="string"></igc-column><igc-columnfield="Race"header="Race"data-type="string"editable="true"name="column1"id="column1"></igc-column><igc-columnfield="Class"header="Class"editable="true"data-type="string"name="column2"id="column2"></igc-column><igc-columnfield="Age"header="Age"data-type="string"editable="true"></igc-column><igc-columnfield="Alignment"header="Alignment"editable="true"data-type="string"name="column3"id="column3"></igc-column><igc-row-islandchild-data-key="Skills"auto-generate="false"><igc-columnfield="Skill"header="Skill"data-type="string"editable="true"resizable="true"></igc-column><igc-columnfield="Level"header="Level"data-type="string"editable="true"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
CRUD 작업
일부 CRUD 작업을 수행하면 필터링, 정렬, 그룹화 등 적용된 모든 파이프가 다시 적용되고 뷰가 자동으로 업데이트된다는 점을 명심하세요.
publicaddRow() {
// Adding a new record// Assuming we have a `getNewRecord` method returning the new row dataconst record = this.getNewRecord();
this.hierarchicalGrid.addRow(record);
}
typescript
계층형 그리드의 데이터 업데이트
계층적 그리드의 데이터 업데이트는 및 updateCell 메서드를 통해 updateRow 수행되지만 그리드의 PrimaryKey가 정의된 경우에만 수행됩니다. 또한 각각의 업데이트 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.
// Updating the whole rowthis.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Grid APIthis.hierarchicalGrid.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
// Directly using the cell `update` methodthis.selectedCell.update(newData);
// Directly using the row `update` methodconst row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
typescript
이 예에서는 CellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.
가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.
constructor() {
var hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this);
hGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit);
}
ts
CellEdit 셀의 값이 커밋되려고 할 때마다 내보냅니다. CellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.
주문 단위 열 아래의 셀에 입력된 값이 사용 가능한 금액(재고 단위 아래의 값)보다 큰 경우 편집이 취소되고 사용자에게 취소 알림이 표시됩니다.
public webHierarchicalGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
const today = newDate();
const column = event.detail.column;
if (column.field === 'Debut') {
if (event.detail.newValue > today.getFullYear()) {
event.detail.cancel = true;
alert('The debut date must be in the past!');
}
} elseif (column.field === 'LaunchDate') {
if (event.detail.newValue > today) {
event.detail.cancel = true;
alert('The launch date must be in the past!');
}
}
}
typescript
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebPaginatorDescriptionModule } from'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent } from'igniteui-webcomponents-grids/grids';
import NwindData from'./NwindData.json';
import { IgcGridComponent, IgcGridEditEventArgs } from'igniteui-webcomponents-grids/grids';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private grid: IgcHierarchicalGridComponent
private _bind: () =>void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
this.webGridEditingEventsCellEdit = this.webGridEditingEventsCellEdit.bind(this);
this._bind = () => {
grid.data = this.nwindData;
grid.addEventListener("cellEdit", this.webGridEditingEventsCellEdit);
}
this._bind();
}
private _nwindData: any[] = NwindData;
publicgetnwindData(): any[] {
returnthis._nwindData;
}
private _componentRenderer: ComponentRenderer = null;
publicgetrenderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
WebPaginatorDescriptionModule.register(context);
}
returnthis._componentRenderer;
}
public webGridEditingEventsCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
var d = args.detail;
if (d.column != null && d.column.field == "UnitsOnOrder") {
if (d.newValue > d.rowData.UnitsInStock) {
d.cancel = true;
alert("You cannot order more than the units in stock!")
}
}
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"id="grid"name="grid"id="grid"primary-key="ProductID"allow-filtering="true"><igc-paginatorper-page="10"></igc-paginator><igc-columnfield="ProductName"header="Product Name"data-type="string"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="UnitsInStock"header="Units in Stock"data-type="number"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="UnitsOnOrder"header="Units in Order"data-type="number"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="Discontinued"header="Discontinued"data-type="boolean"sortable="true"has-summary="true"editable="true"></igc-column><igc-columnfield="ReorderLevel"header="Reorder Level"data-type="number"sortable="true"has-summary="true"editable="true"filterable="false"></igc-column><igc-row-islandchild-data-key="Locations"auto-generate="false"><igc-columnfield="Shop"header="Shop"data-type="string"editable="true"resizable="true"></igc-column><igc-columnfield="LastInventory"header="Last Inventory"data-type="date"editable="true"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"id="grid"name="grid"id="grid"primary-key="ProductID"allow-filtering="true"><igc-paginatorper-page="10"></igc-paginator><igc-columnfield="ProductName"header="Product Name"data-type="string"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="UnitsInStock"header="Units in Stock"data-type="number"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"sortable="true"has-summary="true"editable="true"resizable="true"></igc-column><igc-columnfield="Discontinued"header="Discontinued"data-type="boolean"sortable="true"has-summary="true"editable="true"></igc-column><igc-columnfield="ReorderLevel"header="Reorder Level"data-type="number"sortable="true"has-summary="true"editable="true"filterable="false"></igc-column><igc-row-islandchild-data-key="Locations"auto-generate="false"><igc-columnfield="Shop"header="Shop"data-type="string"editable="true"resizable="true"></igc-column><igc-columnfield="LastInventory"header="Last Inventory"data-type="date"editable="true"resizable="true"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html