Web Components 그리드 셀 편집
웹 구성 요소 그리드의 Ignite UI for Web Components Web Components Web Components 그리드 구성 요소 내의 개별 셀 콘텐츠에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 이는 스프레드시트, 데이터 테이블, 데이터 그리드와 같은 앱의 기본 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있도록 해줍니다. 기본적으로 Ignite UI for Web Components의 그리드는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 열 데이터 유형 Top of Form을 기반으로 하는 다양한 편집기가 있습니다.
또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.
Web Components Grid Cell Editing and Edit Templates Example
셀 편집
Editing through UI
다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.
- 두 번 클릭하면;
- 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
- 키를 누르면 Enter;
- 키를 누르면 F2;
다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.
- 키를 누를 때 Escape;
- 정렬, 필터링, 검색 및 숨기기 작업을 수행할 때
다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.
- 키를 누르면 Enter;
- 키를 누르면 F2;
- 키를 누를 때 Tab;
- 다른 셀을 한 번 클릭하면 -
IgcGridComponent
에서 다른 셀을 클릭하면 변경 사항이 제출됩니다. - 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.
[!Note] The cell remains in edit mode when you scroll vertically or horizontally or click outside the
IgcGridComponent
. This is valid for both cell editing and row editing.
Editing through API
IgcGridComponent
API를 통해 셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 가능합니다.
public updateCell() {
this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
}
셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을 사용하는 update
것입니다. Cell
public updateCell() {
const cell = this.grid1.getCellByColumn(rowIndex, 'ReorderLevel');
// You can also get cell by rowID if primary key is defined
// cell = this.grid1.getCellByKey(rowID, 'ReorderLevel');
cell.update(70);
}
Cell Editing Templates
일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.
셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.
<igc-column
field="Race"
data-type="string"
editable="true"
id="column1">
</igc-column>
index.ts 파일의 이 열에 템플릿을 전달합니다.
constructor() {
var grid1 = document.getElementById('grid1') as IgcGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = document.getElementById('column3') as IgcColumnComponent;
grid1.data = this.webGridCellEditSampleRoleplay;
column1.inlineEditorTemplate = this.webGridCellEditCellTemplate;
column2.inlineEditorTemplate = this.webGridCellEditCellTemplate;
column3.inlineEditorTemplate = this.webGridCellEditCellTemplate;
}
public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => {
let cellValues: any = [];
let uniqueValues: any = [];
for(const i of (this.webGridCellEditSampleRoleplay as any)){
const field: string = ctx.cell.column.field;
if(uniqueValues.indexOf(i[field]) === -1 )
{
cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`
<igc-select style="width:100%; height:100%" size="large" @igcChange=${(e: any) => ctx.cell.editValue = e.detail.value}>
${cellValues}
</igc-select>
`;
}
추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.
Grid Excel Style Editing
Excel 스타일 편집을 사용하면 사용자는 Excel을 사용하는 것처럼 셀을 탐색하고 신속하게 편집할 수 있습니다.
이 사용자 정의 기능을 구현하려면 IgcGridComponent
의 이벤트를 활용하면 됩니다. 먼저 그리드의 keydown 이벤트에 연결하고 거기에서 두 가지 기능을 구현할 수 있습니다.
- 상수 편집 모드
public keydownHandler(event) {
const key = event.keyCode;
const grid = this.grid;
const activeElem = grid.navigation.activeNode;
if ((key >= 48 && key <= 57) ||
(key >= 65 && key <= 90) ||
(key >= 97 && key <= 122)) {
// Number or Alphabet upper case or Alphabet lower case
const columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
const cell = grid.getCellByColumn(activeElem.row, columnName);
if (cell && !grid.crudService.cellInEditMode) {
grid.crudService.enterEditMode(cell);
cell.editValue = event.key;
}
}
}
- Enter / Shift+Enter 탐색
if (key == 13) {
let thisRow = activeElem.row;
const column = activeElem.column;
const rowInfo = grid.dataView;
// to find the next eligible cell, we will use a custom method that will check the next suitable index
let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);
// and then we will navigate to it using the grid's built in method navigateTo
this.grid.navigateTo(nextRow, column, (obj) => {
obj.target.activate();
this.grid.clearCellSelection();
this.cdr.detectChanges();
});
}
다음 적격 지수를 찾는 주요 부분은 다음과 같습니다.
//first we check if the currently selected cell is the first or the last
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
return currentRowIndex;
}
// in case using shift + enter combination, we look for the first suitable cell going up the field
if (previous) {
return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
}
// or for the next one down the field
return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
자세한 내용은 전체 샘플을 확인하세요.
Web Components 그리드 Excel 스타일 편집 샘플
위 접근 방식의 주요 이점은 다음과 같습니다.
- 지속적인 편집 모드: 셀이 선택된 동안 입력하면 입력된 값으로 즉시 편집 모드로 들어가 기존 값을 대체합니다.
- Enter / Shift+Enter 를 사용하여 탐색할 때 데이터가 아닌 행은 건너뜁니다. 이를 통해 사용자는 해당 값을 빠르게 순환할 수 있습니다.
CRUD operations
[!Note] 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.
IgcGridComponent
는 기본 CRUD 작업을 위한 간단한 API를 제공합니다.
Adding a new record
IgcGridComponent
구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 addRow
메서드를 노출합니다.
// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);
Updating data in the Grid
그리드의 데이터 업데이트는 updateRow
및 updateCell
메소드를 통해 이루어지지만 그리드의 PrimaryKey가 정의된 경우에만 가능합니다. 또한 해당 업데이트 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.
// Updating the whole row
this.grid.updateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Grid API
this.grid.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.grid.getRowByKey(rowID);
row.update(newData);
Deleting data from the Grid
deleteRow
메소드는 primaryKey
가 정의된 경우에만 지정된 행을 제거한다는 점을 명심하십시오.
// Delete row through Grid API
this.grid.deleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
const row = this.grid.getRowByIndex(rowIndex);
row.delete();
Cell Validation on Edit Event
IgcGridComponent
의 편집 이벤트를 사용하면 사용자가 IgcGridComponent
와 상호 작용하는 방식을 변경할 수 있습니다.
이 예에서는 CellEdit
이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.
가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.
constructor() {
var grid = document.getElementById('grid') as IgcGridComponent;
this.webGridCellEdit = this.webGridCellEdit.bind(this);
grid.addEventListener("cellEdit", this.webGridCellEdit);
}
CellEdit
셀의 값이 커밋되려고 할 때마다 내보냅니다. CellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.
public webGridCellEdit(event: CustomEvent<IgcGridEditEventArgs>): void {
const column = event.detail.column;
if (column.field === 'UnitsOnOrder') {
const rowData = event.detail.rowData;
if (!rowData) {
return;
}
if (event.detail.newValue > rowData.UnitsInStock) {
event.cancel = true;
alert("You cannot order more than the units in stock!");
}
}
}
주문 단위 열 아래의 셀에 입력된 값이 사용 가능한 금액(재고 단위 아래의 값)보다 큰 경우 편집이 취소되고 사용자에게 취소 알림이 표시됩니다.
IgcGridComponent
에 적용된 위의 검증 결과는 아래 데모에서 볼 수 있습니다.
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.
<igc-grid class="grid"></igc-grid>
그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.
.grid {
--ig-grid-edit-mode-color: orange;
--ig-grid-cell-editing-background: lightblue;
}