Web Components Edición de filas de cuadrícula de árbol

La función de edición de Ignite UI for Web Components fila en Web Components cuadrícula de árbol permite editar datos directamente dentro de IgcTreeGridComponent. Además de esta cómoda forma de manipular los datos, hay una potente API para operaciones CRUD completas. Puede realizar la edición de filas de cuadrícula haciendo clic en una fila y presionando la tecla Enter. Otra forma rápida es hacer doble clic con el ratón en la fila que hay que modificar.

Web Components Ejemplo de edición de filas de cuadrícula de árbol

En el ejemplo siguiente se muestra cómo habilitar la edición de filas en el IgcTreeGridComponent. Al cambiar el valor de una celda y, a continuación, hacer clic o navegar a otra celda de la misma fila no se actualizará el valor de fila hasta que se confirme mediante el botón Listo o se descarte mediante el botón Cancelar.

EXAMPLE

DATA

TS

HTML

CSS

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));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesNestedTreeData;
        }
        this._bind();
    }

    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;
    }

}

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"
        row-editable="true"
        row-selection="multiple">
            <igc-column
            field="Name"
            header="Full Name"
            data-type="string"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            resizable="false"
            sortable="false"
            filterable="false"
            editable="true">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </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コピー

Edit in: Codesandbox

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Cuando una fila está en modo de edición, al hacer clic en una celda de otra fila, se activará como si se presionara el botón "Listo", enviando todos los cambios realizados en la fila anterior. Si la celda recién enfocada es editable, la nueva fila también entra en modo de edición. Sin embargo, si la celda no es editable, solo la fila anterior sale del modo de edición.

Uso de edición de filas

Defina una fuente de datos enlazada con rowEditable y IgcTreeGridComponent establézcala en true:

<igc-tree-grid id="grid" primary-key="ID" width="100%" height="500px" row-editable="true">
    <igc-column field="Name" header="Name" data-type="string"></igc-column>
    <igc-column field="Age" header="Age" data-type="number"></igc-column>
    <igc-column field="Title" header="Title" data-type="string"></igc-column>
    <igc-column field="HireDate" field="Hire Date" data-type="date"></igc-column>
</igc-tree-grid>
html

constructor() {
    var grid  = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
}
ts

La configuración de la clave principal es obligatoria para las operaciones de edición de filas.

No es necesario habilitar la edición de columnas individuales. Con la propiedad rowEditable en IgcTreeGridComponent, todas las filas con la propiedad de campo definida (excepto la fila principal) serán editables. Si desea deshabilitar la edición de una columna específica, simplemente establezca la entrada editable de esa columna en false.

IgcTreeGridComponent utiliza BaseTransactionService, un proveedor interno que retiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.

Posicionamiento

• La posición predeterminada de la superposición estará debajo de la fila que está en modo de edición.

• Si no hay espacio debajo de la fila, aparecerá una superposición encima de la fila.

• Una vez que se muestra, arriba o abajo, la superposición mantendrá esta posición durante el desplazamiento, hasta que se cierre la superposición.

Comportamiento

• Si la fila está en modo de edición, la edición continuará si se hace clic en una celda de la misma fila.

• Al hacer clic en el botón "Listo", finalizará la edición de la fila y enviará los cambios a la fuente de datos o a una transacción, si está disponible. Además, la fila saldrá del modo de edición.

• Al hacer clic en el botón "Cancelar", se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.

• Si la fila está en modo de edición, al hacer clic en una celda de otra fila finalizará la edición de la fila actual y se enviarán nuevos cambios en la fila (el mismo comportamiento al hacer clic en el botón "Listo"). Si la nueva celda que recibe el foco es editable, entonces la nueva fila también ingresa al modo de edición, mientras que si la celda no es editable, solo la fila anterior sale del modo de edición.

• Si la fila está en modo de edición y IgcTreeGridComponent se desplaza de modo que la fila salga del área visible, esta última seguirá en modo de edición. Cuando IgcTreeGridComponent se desplaza, de modo que la fila vuelva a ser visible, la fila seguirá en modo de edición. Cuando se hace clic fuera de la, la IgcTreeGridComponent celda también permanecerá en modo de edición.

• Al realizar operaciones de clasificación, filtrado, búsqueda y ocultación, se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.

• Al realizar operaciones de paginación, cambio de tamaño, fijación y movimiento, saldrá del modo de edición y enviará el último valor.

• Cada celda modificada recibe un estilo de edición hasta que finaliza la edición de filas. Este es el comportamiento, cuando IgcTreeGridComponent no se proporciona con transacciones. Cuando las transacciones están disponibles, se aplica el estilo de edición de celda hasta que se confirman todos los cambios.

Navegación por teclado

• Ingrese y F2 ingresa al modo de edición de filas

• Esc sale del modo de edición de filas y no envía ninguno de los cambios de celda realizados mientras la fila estaba en modo de edición.

• Tab mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

Integración de funciones

• Cualquier operación de cambio de datos finalizará las operaciones de edición de filas y enviará los cambios de filas actuales. Esto incluirá operaciones como ordenar, cambiar criterios de agrupación y filtrado, paginación, etc.

• Los resúmenes se actualizarán una vez finalizada la edición de la fila. Lo mismo es válido para otras funciones como ordenar, filtrar, etc.

Personalización de la superposición de edición de filas

Personalizando el texto

Es posible personalizar el texto de la superposición de edición de filas mediante plantillas.

La propiedad RowChangesCount está expuesta y contiene el recuento de celdas modificadas.

public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
    return html`Changes: ${ctx.implicit}`;
}
ts

Personalización de botones

También es posible personalizar los botones de la superposición de edición de filas mediante plantillas.

public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => {
    const endRowEdit = ctx.implicit;
    return html`
        <button @click="${(event) => endRowEdit(false, event)}">Cancel</button>
        <button @click="${(event) => endRowEdit(true, event)}">Apply</button>
    `;
}
ts

Estilo

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<igc-tree-grid class="grid"></igc-tree-grid>
html

Luego configure las propiedades CSS relacionadas para esa clase:

.grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}
css

Manifestación

EXAMPLE

DATA

TS

HTML

CSS

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));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedTreeDataItem, EmployeesNestedTreeData } from './EmployeesNestedTreeData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;

        this._bind = () => {
            grid.data = this.employeesNestedTreeData;
        }
        this._bind();
    }

    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;
    }

}

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="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        foreign-key="ParentID"
        moving="true"
        row-editable="true"
        row-selection="multiple">
            <igc-column
            field="Name"
            header="Full Name"
            data-type="string"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            resizable="false"
            sortable="false"
            filterable="false"
            editable="true">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            resizable="true"
            sortable="true"
            filterable="true"
            editable="true">
            </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-banner-banner-background: #292826;
    --ig-banner-banner-message-color: #ffcd0f;
    --ig-button-foreground: #ffcd0f;
    --ig-button-hover-foreground: white;
    --ig-button-font-weight: 600;
}

cssコピー

Edit in: Codesandbox

Problemas conocidos y limitaciones

• Cuando la cuadrícula no tiene primaryKey establecida y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:

• Selección de fila
• Fila Expandir/contraer
• Edición de filas
• Fijación de filas

Referencias de API

• rowEditable
• RowEditEnter
• RowEdit
• RowEditDone
• endEdit
• field
• editable
• primaryKey
• IgcTreeGridComponent

Recursos adicionales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub