이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

Web Components 그리드 편집

Ignite UI for Web Components 데이터 테이블/데이터 그리드는 일괄 업데이트를 통한 셀 및 행 편집을 지원합니다. 이는 현재 템플릿이 없는 열로 제한됩니다.

Web Components 그리드 편집 예시

EXAMPLE

DATA

TS

HTML

CSS

export class DataGridSharedData {

    public static getEmployees(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const employees: any[] = [];
        let maleCount: number = 0;
        let femaleCount: number = 0;
        for (let i = 0; i < count; i++) {
            const age: number = Math.round(this.getRandomNumber(20, 40));
            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(this.countries);
            const city: string = this.getRandomCity(country);
            const generation = Math.floor(age / 10) * 10 + "s";
            const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails);
            const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites);
            let photoPath: any;

            if (gender === "male") {
                maleCount++;
                if (maleCount > 26) {
                    maleCount = 1;
                }
                photoPath = this.getPhotoMale(maleCount);
            }
            else {
                femaleCount++;
                if (femaleCount > 24) {
                    femaleCount = 1;
                }
                photoPath = this.getPhotoFemale(femaleCount);
            }

            let person: any = {};
            person.Address = street + "," + city;
            person.Age = age;
            person.Birthday = this.getBirthday(age);
            person.City = city;
            person.Country = country;
            person.CountryFlag = this.getCountryFlag(country);
            person.Email = email;
            person.FirstName = firstName;
            person.Gender = this.getGenderPhoto(gender);
            person.Generation = generation;
            person.ID = this.pad(i + 1, 5);
            person.LastName = lastName;
            person.Name = firstName + " " + lastName;
            person.Phone = this.getRandomPhone();
            person.Photo = photoPath;
            person.Street = street;
            person.Salary = this.getRandomNumber(40, 200) * 1000;
            person.Sales = this.getRandomNumber(200, 980) * 1000;
            person.Website = website;
            person.Productivity = this.getProductivity();

            if (person.Salary < 50000) {
                person.Income = "Low";
            } else if (person.Salary < 100000) {
                person.Income = "Average";
            } else {
                person.Income = "High";
            }

            employees.push(person);
        }
        return employees;
    }

    public static getProductivity(weekCount?: number): any[] {
        if (weekCount === undefined) {
            weekCount = 52;
        }
        const productivity: any[] = [];
        for (let w = 0; w < weekCount; w++) {
            const value = this.getRandomNumber(-50, 50);
            productivity.push({Value: value, Week: w});
        }
        return productivity;
    }

    public static getSales(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const names: string[] = [
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard",
            "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ];
        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", "Japan", "Germany"];
        const status: string[] = ["Packing", "Shipped", "Delivered"];
        const sales: any[] = [];

        for (let i = 0; i < count; i++) {
            const price = this.getRandomNumber(100, 900);
            const items = this.getRandomNumber(10, 80);
            const value = price * items;
            const margin = this.getRandomNumber(3, 10);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                BundlePrice: price,
                ProductPrice: price,
                Margin: margin,
                OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()),
                OrderItems: items,
                OrderValue: value, //  Math.round(value / 1000) + "," + Math.round(value % 1000),
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                Profit: profit,
                Countries: country,
                CountryFlag: this.getCountryFlag(country),
                Status: this.getRandomItem(status)
            });
        }
        return sales;
    }

    public static getHouses(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const houses: any[] = [];
        const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"];
        const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"];
        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", "Japan", "Germany"];

        for (let i = 0; i < count; i++) {
            const year: number = this.getRandomNumber(1950, 2015);
            const age: number = 2020 - year;

            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const initials = firstName.substr(0, 1).toLowerCase();
            const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails);

            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(countries);
            const city: string = this.getRandomCity(country);

            houses.push({
                Address: street + "," + city,
                Age: age,
                Agent: firstName + " " + lastName,
                Area: this.getRandomNumber(50, 300),
                Baths: this.getRandomNumber(1, 3),
                Built: year,
                City: city,
                Country: country,
                CountryFlag: this.getCountryFlag(country),
                Email: email,
                ID: this.pad(i + 1, 5),
                Phone: this.getRandomPhone(),
                Price: this.getRandomNumber(210, 900) * 1000,
                Property: this.getRandomItem(property),
                Rooms: this.getRandomNumber(2, 5),
                SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()),
                Street: street,
            });
        }
        return houses;
    }

    private static websites: string[] = [ ".com", ".gov", ".edu", ".org"];
    private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"];
    private static genders: string[] = ["male", "female"];
    private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"];
    private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"];
    private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"];
    private static countries: string[] = ["USA", "UK", "France", "Canada", "Poland"];
    private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"];
    private static citiesUK: string[] = ["London", "Liverpool", "Manchester"];
    private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"];
    private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"];
    private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"];
    private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"];
    private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"];
    private static roadSuffixes: string[] = ["Road", "Street", "Way"];
    private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"];

    private static getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    private static getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    private static getRandomDate(start: Date, end: Date) {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
    }

    private static getRandomPhone(): string {
        const phoneCode = this.getRandomNumber(100, 900);
        const phoneNum1 = this.getRandomNumber(100, 900);
        const phoneNum2 = this.getRandomNumber(1000, 9000);
        const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
        return phone;
    }

    private static getRandomGender(): string {
        return this.getRandomItem(this.genders);
    }

    private static getRandomNameLast(): string {
        return this.getRandomItem(this.lastNames);
    }

    private static getRandomNameFirst(gender: string): string {
        if (gender === "male") {
            return this.getRandomItem(this.maleNames);
        }
        else {
            return this.getRandomItem(this.femaleNames);
        }
    }

    private static getRandomCity(country: string): string {
        if (country === "Canada") {
            return this.getRandomItem(this.citiesCA);
        } else if (country === "France") {
            return this.getRandomItem(this.citiesFR);
        } else if (country === "Poland") {
            return this.getRandomItem(this.citiesPL);
        } else if (country === "USA") {
            return this.getRandomItem(this.citiesUS);
        } else if (country === "Japan") {
            return this.getRandomItem(this.citiesJP);
        } else if (country === "Germany") {
            return this.getRandomItem(this.citiesGR);
        } else { // if (country === "United Kingdom") {
            return this.getRandomItem(this.citiesUK);
        }
    }

    private static getRandomStreet(): string {
        const num = Math.round(this.getRandomNumber(100, 300)).toString();
        const road = this.getRandomItem(this.roadNames);
        const suffix = this.getRandomItem(this.roadSuffixes);
        return num + " " + road + " " + suffix;
    }

    private static getBirthday(age: number): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear() - age;
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    private static getPhotoMale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people//GUY' + this.pad(id, 2) + '.png';
    }

    private static getPhotoFemale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this.pad(id, 2) + '.png';
    }

    private static getGenderPhoto(gender: string): string {
        return 'https://static.infragistics.com/xplatform/images/genders/' + gender + '.png';
    }

    private static getCountryFlag(country: string): string {
        return 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png';
    }

    private static pad(num: number, size: number) {
        let s = num + "";
        while (s.length < size) {
            s = "0" + s;
        }
        return s;
    }

}
tsコピー

import { DataGridSharedData } from './DataGridSharedData';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { IgcGridCellValueChangingEventArgs } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids';
import { GridActivationMode, DataGridSelectionMode, EditModeType } from 'igniteui-webcomponents-data-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataGridModule,
    IgcGridColumnOptionsModule
);

export class DataGridCellEditing {

    public grid: IgcDataGridComponent;
    public data: any[];
    public commitButton: HTMLButtonElement;
    public undoButton: HTMLButtonElement;
    public redoButton: HTMLButtonElement;

    constructor() {

        this.data = DataGridSharedData.getEmployees();

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        if (this.grid !== null){
            this.grid.dataSource = this.data;
            this.grid.activationMode = GridActivationMode.Cell;
            this.grid.selectionMode = DataGridSelectionMode.SingleCell;
            this.grid.editMode = EditModeType.Cell;
            this.grid.cellValueChanging = this.onCellValueChanging;
        }

        let dropDown = document.getElementById('editModeDropBox');
        if (dropDown !== null){
            dropDown.onchange = this.editModeChanged;
        }

        let dropDown2 = document.getElementById('editModeClickActionDropBox');
        if (dropDown2 !== null){
            dropDown2.onchange = this.editModeClickActionChanged;
        }

        this.commitButton = document.getElementById('commitClick') as HTMLButtonElement;
        if (this.commitButton !== null){
            this.commitButton.onclick = this.onCommitClick;
        }

        this.undoButton = document.getElementById('undoClick') as HTMLButtonElement;
        if (this.undoButton !== null){
            this.undoButton.onclick = this.onUndoClick;
        }

        this.redoButton = document.getElementById('redoClick') as HTMLButtonElement;
        if (this.redoButton !== null){
            this.redoButton.onclick = this.onRedoClick;
        }

        let deleteRowColumn = document.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
        if (deleteRowColumn !== null){
            deleteRowColumn.cellUpdating = this.onDeleteCellUpdating;
        }
    }

    public onCommitClick = () =>{
        this.grid.commitEdits();
        this.commitButton.disabled = true;
        this.undoButton.disabled = !this.grid.canUndo;
    }

    public onUndoClick = () =>{
        this.grid.undo();
        this.undoButton.disabled = !this.grid.canUndo;
        if (!this.grid.canUndo) {
            this.commitButton.disabled = this.grid.canCommit;
        }
        else {
            this.commitButton.disabled = !this.grid.canCommit;
        }

        this.redoButton.disabled = !this.grid.canRedo;
    }

    public onRedoClick = () =>{
        this.grid.redo();

        if (this.grid.editMode === EditModeType.Cell || this.grid.editMode === EditModeType.None) {
            this.commitButton.disabled = !this.grid.canCommit;
        }
        if (this.grid.editMode === EditModeType.CellBatch || this.grid.editMode === EditModeType.Row) {
            this.redoButton.disabled = !this.grid.canRedo;
            this.undoButton.disabled = !this.grid.canUndo;
            if(!this.grid.canUndo) {
                this.commitButton.disabled = this.grid.canCommit;
            }
            else{
                this.commitButton.disabled = !this.grid.canCommit;
            }
        }
    }

    public editModeChanged = (event: any) => {

        this.grid.cancelEdits();
        this.grid.editMode = event.target.value;
        if (this.grid.editMode === EditModeType.None || this.grid.editMode === EditModeType.Cell) {
            this.commitButton.disabled = true;
            this.undoButton.disabled = !this.grid.canUndo;
            this.redoButton.disabled = !this.grid.canRedo;
        }
    }

    public editModeClickActionChanged = (event: any) => {

        this.grid.editModeClickAction = event.target.value;
    }

    public onDeleteRowClick = (e: MouseEvent) => {

        const button = e.srcElement as HTMLButtonElement;
        const viewIndex = parseInt(button.id);
        const rowItem = this.grid.actualDataSource.getItemAtIndex(viewIndex);

        if(this.grid.editMode === EditModeType.CellBatch || this.grid.editMode === EditModeType.Row){
            this.grid.removeItem(rowItem);
            this.commitButton.disabled = !this.grid.canCommit;
            this.redoButton.disabled = !this.grid.canRedo;
            this.undoButton.disabled = !this.grid.canUndo;
        }
        else if(this.grid.editMode === EditModeType.Cell) {
            //delete grid row immediately
            this.grid.removeItem(rowItem);
        }
    }

    public onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => {
        if(s.editMode === EditModeType.CellBatch || this.grid.editMode === EditModeType.Row)
        {
            this.commitButton.disabled = !this.grid.canCommit;
            this.undoButton.disabled = false;
        }
        else if(this.grid.editMode === EditModeType.Cell || this.grid.editMode === EditModeType.None) {
            this.commitButton.disabled = this.grid.canCommit;
        }
        if(e.newValue === "") {
            this.commitButton.disabled = true;
            s.setEditError(e.editID, "Error, cell is empty");
        }
    }

    public onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => {
        const content = e.content as HTMLDivElement;
        if (content.childElementCount === 0) {
            const button = document.createElement("button") as HTMLButtonElement;
            button.innerText = "Delete";
            button.onclick = this.onDeleteRowClick;
            content.appendChild(button);
        }

        const button = content.children[0] as HTMLButtonElement;
        button.disabled = e.cellInfo.isDeleted;
        button.id = e.cellInfo.dataRow.toString();
    }
}

new DataGridCellEditing();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridCellEditing</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" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
  <div class="options horizontal">
    <button id="commitClick" disabled="true">Commit</button>
    <button id="undoClick" disabled="true">Undo</button>
    <button id="redoClick" disabled="true">Redo</button>
      <span class="options-label">Edit Mode: </span>
      <select id="editModeDropBox" class="options-label">
        <option>Cell</option>
        <option>CellBatch</option>
        <option>Row</option>
        <option>None</option>
      </select>
    <label id="excel-style-editing" >Excel Style</label>
    <span class="options-label">Edit Mode: </span>
      <select id="editModeClickActionDropBox" class="options-label">
        <option>SingleClick</option>
        <option>DoubleClick</option>
      </select>
  </div>

  <igc-data-grid
      id="grid"
      height="calc(100% - 3.5rem)"
      width="100%"
      activation-mode="Cell"
      selection-mode="SingleCell"
      default-column-min-width="125"
      is-column-options-enabled="true"
      auto-generate-columns="false"
      edit-mode-click-action="SingleClick"
      edit-mode="Cell">

      <igc-text-column field="Name" width="*>150"></igc-text-column>
      <igc-text-column field="Street" header-text="Street" width="*>155"></igc-text-column>
      <igc-text-column field="City" header-text="City" width="*>125"></igc-text-column>
      <igc-numeric-column field="Salary" header-text="Salary" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>

      <igc-image-column field="Photo" header-text="Photo" content-opacity="1"
      horizontal-alignment="center"  width="*>90"></igc-image-column>
      <igc-date-time-column field="Birthday" header-text="Date of Birth" width="*>140"></igc-date-time-column>
      <igc-template-column id="deleteRowColumn" field="Delete Row" header-text="Delete Row" width="*>140" is-column-options-enabled="false" ></igc-date-time-column>
  </igc-data-grid>
</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コピー

Edit in: Codesandbox

개요

Web Components 데이터 그리드의 편집은 다음을 사용하여 구성됩니다. editMode Web Components 그리드의 옵션입니다. 이 속성은 다음과 같은 세 가지 옵션을 사용합니다.

• None: 편집이 활성화되지 않습니다.
• Cell: 셀이 편집 모드로 들어가고 편집 모드 종료 시 값을 커밋할 수 있도록 허용합니다.
• CellBatch: 셀이 편집 모드로 들어갈 수 있도록 허용하지만 변경 사항은 커밋될 때까지 나중에 캐시됩니다.
• Row: 행이 편집 모드로 들어가고 종료 시 값을 커밋하도록 허용합니다.

​CellBatch로 설정된 경우 변경 사항을 커밋하려면 그리드에서 commitEdits 메서드를 수행해야 합니다. 그리드는 셀이 커밋될 때까지 셀을 기울임꼴로 표시하여 변경 사항을 데이터 소스에 다시 푸시할 시기를 제어합니다.

또한 onCellValueChanging 이벤트를 연결하고 새 값이 커밋되기 전에 검사하여 오류 처리를 수행할 수 있습니다. 그리드는 오류 메시지를 출력할 수 있는 setEditError 메소드를 노출합니다. 유효한 값이 입력될 때까지 셀이 편집 모드로 유지됩니다. 그렇지 않으면 유효하지 않은 값을 되돌리기 위해 그리드의 rejectEdit 메소드를 수행할 수 있습니다. 유효하지 않은 값이 발견되지 않으면 그리드의 acceptEdit 메소드를 호출하여 변경 사항을 커밋할 수도 있습니다.

후킹을 통해 그리드 수준에서 커밋을 승인하거나 거부할 수 있습니다. onDataCommitting를 통해 acceptCommit 또는 rejectCommit 전달하는 메소드 commitID 이벤트 인수를 매개변수로 사용합니다. 이 이벤트는 또한 changes 커밋되기 전에 모든 수정 사항을 저장하는 컬렉션입니다. 예를 들어 커밋이 추가, 업데이트 또는 삭제 작업에서 발생했는지 확인할 수 있습니다. TransactionType에 노출된 부동산 changes 수집하고 수행합니다. acceptCommit 또는 rejectCommit 필요할 땐.

엑셀 스타일 편집

editOnKeyPress 사용하면 Excel의 작동 방식과 유사하게 입력할 때 즉시 편집을 시작할 수 있습니다. 또한 editModeClickAction 속성을 SingleClick으로 설정하면 사용자가 다른 셀을 탐색하는 동안 셀을 빠르게 편집할 수 있습니다. 기본적으로 편집 모드로 들어가려면 두 번 클릭해야 합니다.

코드 조각

다음은 데이터 그리드 편집 및 데이터 커밋을 구성하는 방법을 보여줍니다.

<button id="clickCommit">Commit</button>
<igc-data-grid id="grid"
    height="100%"
    width="100%"
    activation-mode="Cell"
    edit-mode="Cell">
</igc-data-grid>
html

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

this.onCommitClick = this.onCommitClick.bind(this);

public onCommitClick() {
    this.grid.commitEdits();
}
ts

실행 취소/다시 실행 일괄 변경

다음은 일괄 업데이트가 활성화된 동안 변경 사항을 되돌리는 방법을 보여줍니다.

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      activation-mode="Cell"
      edit-mode="Cell">
</igc-data-grid>
<button id="undoClick" disabled="true">Undo</button>
<button id="redoClick" disabled="true">Redo</button>
html

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

public onUndoClick() {
    this.grid.undo();
    if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null)
    {
        this.redo.disabled = false;
    }
}

public onRedoClick() {
    this.grid.redo();
}
ts

오류 검증 및 무결성 커밋

다음은 편집 모드를 종료할 때 셀이 비어 있는지 확인하고 업데이트된 셀의 커밋만 수락하여 오류를 통합하는 방법을 보여줍니다.

<igc-data-grid
    id="grid"
    height="calc(100% - 50px)"
    width="100%"
    activation-mode="Cell"
    selection-mode="SingleRow"
    default-column-min-width="125"
    is-column-options-enabled="true"
    auto-generate-columns="false"
    edit-mode="Cell">
html

import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids';
import { TransactionType } from 'igniteui-webcomponents-core'

this.onCellValueChanging = this.onCellValueChanging.bind(this);
this.grid.cellValueChanging = this.onCellValueChanging;

this.onDataCommitting = this.onDataCommitting.bind(this);
this.grid.dataCommitting = this.onDataCommitting;


public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) {
    if (s.editMode === EditModeType.CellBatch && this.undo !== null)
    {
        this.undo.disabled = false;
    }

    //check if value is empty upon exiting edit mode.
    if (e.newValue === "") {
        s.setEditError(e.editID, "Error, cell is empty");
        //or revert changes
        s.rejectEdit(e.editID);
    }
    else {
        s.acceptEdit(e.editID);
    }
}

public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) {
    if (e.changes[0].transactionType === TransactionType.Update) {
        //commit was passed
        s.acceptCommit(e.commitID);
    }
    else{
        //commit was prevented
        s.rejectCommit(e.commitID);
    }
}
ts

API 참조

• CellBatch
• editModeClickAction
• editMode
• SingleClick
• TransactionType