Descripción general de la paginación de la cuadrícula de árbol de Web Components

La función de paginación Ignite UI for Web Components de Web Components cuadrícula de árbol se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. React paginación de cuadrícula mejora la experiencia del usuario y la interacción con los datos. IgcTreeGridComponent La paginación se puede configurar a través de un componente separado proyectado en el árbol de cuadrícula mediante la definición de una IgcPaginator etiqueta, similar a la adición de una columna. Al igual que en cualquier tabla Web Components, la paginación de la cuadrícula de árbol de Web Components admite plantillas para páginas personalizadas.

Web Components Tree Grid Pagination Example

En el ejemplo siguiente se representa la paginación y se exponen las opciones, el uso de elementos por página y cómo se IgcTreeGridComponent puede habilitar la paginación. El usuario también puede navegar rápidamente a través de las páginas a través de los botones "Ir a la última página" e "Ir a la IgcTreeGridComponent primera página".

EXAMPLE

DATA

TS

HTML

CSS

export class OrdersTreeDataItem {
    public constructor(init: Partial<OrdersTreeDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem(
                {
                    ID: 1,
                    ParentID: -1,
                    Name: `Order 1`,
                    Category: ``,
                    OrderDate: `2010-02-17`,
                    Units: 1844,
                    UnitPrice: 3.73,
                    Price: 6884.38,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 101,
                    ParentID: 1,
                    Name: `Chocolate Chip Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2010-02-17`,
                    Units: 834,
                    UnitPrice: 3.59,
                    Price: 2994.06,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 102,
                    ParentID: 1,
                    Name: `Red Apples`,
                    Category: `Fruit`,
                    OrderDate: `2010-02-17`,
                    Units: 371,
                    UnitPrice: 3.66,
                    Price: 1357.86,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 103,
                    ParentID: 1,
                    Name: `Butter`,
                    Category: `Diary`,
                    OrderDate: `2010-02-17`,
                    Units: 260,
                    UnitPrice: 3.45,
                    Price: 897,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 104,
                    ParentID: 1,
                    Name: `Potato Chips`,
                    Category: `Snack`,
                    OrderDate: `2010-02-17`,
                    Units: 118,
                    UnitPrice: 1.96,
                    Price: 231.28,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 105,
                    ParentID: 1,
                    Name: `Orange Juice`,
                    Category: `Beverages`,
                    OrderDate: `2010-02-17`,
                    Units: 261,
                    UnitPrice: 5.38,
                    Price: 1404.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 2,
                    ParentID: -1,
                    Name: `Order 2`,
                    Category: ``,
                    OrderDate: `2022-05-27`,
                    Units: 1831,
                    UnitPrice: 8.23,
                    Price: 15062.77,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 201,
                    ParentID: 2,
                    Name: `Frozen Shrimps`,
                    Category: `Seafood`,
                    OrderDate: `2022-05-27`,
                    Units: 120,
                    UnitPrice: 20.45,
                    Price: 2454,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 202,
                    ParentID: 2,
                    Name: `Ice Tea`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 840,
                    UnitPrice: 7,
                    Price: 5880,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 203,
                    ParentID: 2,
                    Name: `Fresh Cheese`,
                    Category: `Diary`,
                    OrderDate: `2022-05-27`,
                    Units: 267,
                    UnitPrice: 16.55,
                    Price: 4418.85,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 204,
                    ParentID: 2,
                    Name: `Carrots`,
                    Category: `Vegetables`,
                    OrderDate: `2022-05-27`,
                    Units: 360,
                    UnitPrice: 2.77,
                    Price: 997.2,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 205,
                    ParentID: 2,
                    Name: `Apple Juice`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 244,
                    UnitPrice: 5.38,
                    Price: 1312.72,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 3,
                    ParentID: -1,
                    Name: `Order 3`,
                    Category: ``,
                    OrderDate: `2022-08-04`,
                    Units: 1972,
                    UnitPrice: 3.47,
                    Price: 6849.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 301,
                    ParentID: 3,
                    Name: `Skimmed Milk 1L`,
                    Category: `Diary`,
                    OrderDate: `2022-08-04`,
                    Units: 1028,
                    UnitPrice: 3.56,
                    Price: 3659.68,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 302,
                    ParentID: 3,
                    Name: `Bananas 5 Pack`,
                    Category: `Fruit`,
                    OrderDate: `2022-08-04`,
                    Units: 370,
                    UnitPrice: 6.36,
                    Price: 2353.2,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 303,
                    ParentID: 3,
                    Name: `Cauliflower`,
                    Category: `Vegetables`,
                    OrderDate: `2022-08-04`,
                    Units: 283,
                    UnitPrice: 0.95,
                    Price: 268.85,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 304,
                    ParentID: 3,
                    Name: `White Chocolate Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2022-08-04`,
                    Units: 291,
                    UnitPrice: 1.95,
                    Price: 567.45,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 4,
                    ParentID: -1,
                    Name: `Order 4`,
                    Category: ``,
                    OrderDate: `2023-01-04`,
                    Units: 1065,
                    UnitPrice: 5.56,
                    Price: 5923.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 401,
                    ParentID: 4,
                    Name: `Mini Milk Chocolate Cookie Bites`,
                    Category: `Cookies`,
                    OrderDate: `2023-01-04`,
                    Units: 68,
                    UnitPrice: 2.25,
                    Price: 153,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 402,
                    ParentID: 4,
                    Name: `Wild Salmon Fillets`,
                    Category: `Seafood`,
                    OrderDate: `2023-01-04`,
                    Units: 320,
                    UnitPrice: 16.15,
                    Price: 5168,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 403,
                    ParentID: 4,
                    Name: `Diet Lemonade`,
                    Category: `Beverages`,
                    OrderDate: `2023-01-04`,
                    Units: 437,
                    UnitPrice: 0.5,
                    Price: 218.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 404,
                    ParentID: 4,
                    Name: `Potatoes`,
                    Category: `Vegetables`,
                    OrderDate: `2023-01-04`,
                    Units: 240,
                    UnitPrice: 1.6,
                    Price: 384,
                    Delivered: true
                }),
            ];
            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 { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
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.ordersTreeData;
        }
        this._bind();
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }

    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">
            <igc-paginator
            per-page="10">
            </igc-paginator>
            <igc-column
            field="ID"
            header="Order ID">
            </igc-column>
            <igc-column
            field="Name"
            header="Order Product">
            </igc-column>
            <igc-column
            field="Category"
            header="Category">
            </igc-column>
            <igc-column
            field="Units"
            header="Units"
            data-type="number">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="number">
            </igc-column>
            <igc-column
            field="Price"
            header="Price"
            data-type="number">
            </igc-column>
            <igc-column
            field="OrderDate"
            header="Order Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="Delivered"
            header="Delivered"
            data-type="boolean">
            </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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

.gridSize {
    --ig-size: var(--ig-size-small);
}
css

<igc-tree-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-tree-grid>
html

Usage

El IgcPaginator componente se utiliza junto con el IgcTreeGridComponent componente del ejemplo siguiente, pero puede utilizarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

<igc-tree-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-tree-grid>
html

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
    const selectOptions = [5, 15, 20, 50];
    grid.data = this.data;
    paginator.page = grid.page;
    paginator.totalRecords = grid.totalRecords;
    paginator.selectOptions = selectOptions;
}
ts

Paginator Component Demo

EXAMPLE

DATA

TS

HTML

CSS

export class OrdersTreeDataItem {
    public constructor(init: Partial<OrdersTreeDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem(
                {
                    ID: 1,
                    ParentID: -1,
                    Name: `Order 1`,
                    Category: ``,
                    OrderDate: `2010-02-17`,
                    Units: 1844,
                    UnitPrice: 3.73,
                    Price: 6884.38,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 101,
                    ParentID: 1,
                    Name: `Chocolate Chip Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2010-02-17`,
                    Units: 834,
                    UnitPrice: 3.59,
                    Price: 2994.06,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 102,
                    ParentID: 1,
                    Name: `Red Apples`,
                    Category: `Fruit`,
                    OrderDate: `2010-02-17`,
                    Units: 371,
                    UnitPrice: 3.66,
                    Price: 1357.86,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 103,
                    ParentID: 1,
                    Name: `Butter`,
                    Category: `Diary`,
                    OrderDate: `2010-02-17`,
                    Units: 260,
                    UnitPrice: 3.45,
                    Price: 897,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 104,
                    ParentID: 1,
                    Name: `Potato Chips`,
                    Category: `Snack`,
                    OrderDate: `2010-02-17`,
                    Units: 118,
                    UnitPrice: 1.96,
                    Price: 231.28,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 105,
                    ParentID: 1,
                    Name: `Orange Juice`,
                    Category: `Beverages`,
                    OrderDate: `2010-02-17`,
                    Units: 261,
                    UnitPrice: 5.38,
                    Price: 1404.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 2,
                    ParentID: -1,
                    Name: `Order 2`,
                    Category: ``,
                    OrderDate: `2022-05-27`,
                    Units: 1831,
                    UnitPrice: 8.23,
                    Price: 15062.77,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 201,
                    ParentID: 2,
                    Name: `Frozen Shrimps`,
                    Category: `Seafood`,
                    OrderDate: `2022-05-27`,
                    Units: 120,
                    UnitPrice: 20.45,
                    Price: 2454,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 202,
                    ParentID: 2,
                    Name: `Ice Tea`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 840,
                    UnitPrice: 7,
                    Price: 5880,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 203,
                    ParentID: 2,
                    Name: `Fresh Cheese`,
                    Category: `Diary`,
                    OrderDate: `2022-05-27`,
                    Units: 267,
                    UnitPrice: 16.55,
                    Price: 4418.85,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 204,
                    ParentID: 2,
                    Name: `Carrots`,
                    Category: `Vegetables`,
                    OrderDate: `2022-05-27`,
                    Units: 360,
                    UnitPrice: 2.77,
                    Price: 997.2,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 205,
                    ParentID: 2,
                    Name: `Apple Juice`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 244,
                    UnitPrice: 5.38,
                    Price: 1312.72,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 3,
                    ParentID: -1,
                    Name: `Order 3`,
                    Category: ``,
                    OrderDate: `2022-08-04`,
                    Units: 1972,
                    UnitPrice: 3.47,
                    Price: 6849.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 301,
                    ParentID: 3,
                    Name: `Skimmed Milk 1L`,
                    Category: `Diary`,
                    OrderDate: `2022-08-04`,
                    Units: 1028,
                    UnitPrice: 3.56,
                    Price: 3659.68,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 302,
                    ParentID: 3,
                    Name: `Bananas 5 Pack`,
                    Category: `Fruit`,
                    OrderDate: `2022-08-04`,
                    Units: 370,
                    UnitPrice: 6.36,
                    Price: 2353.2,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 303,
                    ParentID: 3,
                    Name: `Cauliflower`,
                    Category: `Vegetables`,
                    OrderDate: `2022-08-04`,
                    Units: 283,
                    UnitPrice: 0.95,
                    Price: 268.85,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 304,
                    ParentID: 3,
                    Name: `White Chocolate Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2022-08-04`,
                    Units: 291,
                    UnitPrice: 1.95,
                    Price: 567.45,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 4,
                    ParentID: -1,
                    Name: `Order 4`,
                    Category: ``,
                    OrderDate: `2023-01-04`,
                    Units: 1065,
                    UnitPrice: 5.56,
                    Price: 5923.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 401,
                    ParentID: 4,
                    Name: `Mini Milk Chocolate Cookie Bites`,
                    Category: `Cookies`,
                    OrderDate: `2023-01-04`,
                    Units: 68,
                    UnitPrice: 2.25,
                    Price: 153,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 402,
                    ParentID: 4,
                    Name: `Wild Salmon Fillets`,
                    Category: `Seafood`,
                    OrderDate: `2023-01-04`,
                    Units: 320,
                    UnitPrice: 16.15,
                    Price: 5168,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 403,
                    ParentID: 4,
                    Name: `Diet Lemonade`,
                    Category: `Beverages`,
                    OrderDate: `2023-01-04`,
                    Units: 437,
                    UnitPrice: 0.5,
                    Price: 218.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 404,
                    ParentID: 4,
                    Name: `Potatoes`,
                    Category: `Vegetables`,
                    OrderDate: `2023-01-04`,
                    Units: 240,
                    UnitPrice: 1.6,
                    Price: 384,
                    Delivered: true
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private paginator: IgcPaginatorComponent
    private _paginatorResourceStrings1: IgcPaginatorResourceStrings | null = null;
    public get paginatorResourceStrings1(): IgcPaginatorResourceStrings {
        if (this._paginatorResourceStrings1 == null)
        {
            var paginatorResourceStrings1: IgcPaginatorResourceStrings = {} as IgcPaginatorResourceStrings;
            paginatorResourceStrings1.igx_paginator_label = "Records per page";

            this._paginatorResourceStrings1 = paginatorResourceStrings1;
        }
        return this._paginatorResourceStrings1;
    }

    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.treeGrid;
            sizeEditor.changed = this.webTreeGridSetGridSize;
            treeGrid.data = this.ordersTreeData;
            paginator.resourceStrings = this.paginatorResourceStrings1;
        }
        this._bind();
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webTreeGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var newVal = (args.newValue as string).toLowerCase();
        var grid = document.getElementById("treeGrid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }

}

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="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="WebTreeGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            name="SizeEditor"
            id="SizeEditor"
            label="Grid Size:"
            value-type="EnumValue"
            drop-down-names="Small, Medium, Large"
            drop-down-values="Small, Medium, Large">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-paginator
            name="paginator"
            id="paginator"
            per-page="10">
            </igc-paginator>
            <igc-column
            field="ID"
            header="Order ID">
            </igc-column>
            <igc-column
            field="Name"
            header="Order Product">
            </igc-column>
            <igc-column
            field="Category"
            header="Category">
            </igc-column>
            <igc-column
            field="Units"
            header="Units"
            data-type="number">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="number">
            </igc-column>
            <igc-column
            field="Price"
            header="Price"
            data-type="number">
            </igc-column>
            <igc-column
            field="OrderDate"
            header="Order Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="Delivered"
            header="Delivered"
            data-type="boolean">
            </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 */

    #treeGrid {
        --ig-size: var(--ig-size-medium);
    }

cssコピー

Edit in: Codesandbox

API References

• IgcTreeGridComponent
• IgcPaginator

Additional Resources

• Virtualización y rendimiento
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

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

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