Web Components Tree Grid Toolbar
La barra de herramientas Ignite UI for Web Components es un contenedor para las operaciones de la interfaz de usuario en la cuadrícula de árbol Web Components. La barra de herramientas Web Components se encuentra en la parte superior del componente Web Components, es decir, el IgcTreeGridComponent
y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede hospedar cualquier contenido personalizado o conjunto de controles de interfaz de usuario predefinidos. El conjunto predeterminado para la cuadrícula de árbol de Web Components incluye:
- Ocultación de columna
- Fijación de columnas
- Exportación de Excel
- Filtrado avanzado
La barra de herramientas y los componentes predefinidos de la interfaz de usuario admiten eventos Web Components y exponen la API para los desarrolladores.
Ejemplo de cuadrícula de barra de herramientas de Web Components
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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"
allow-advanced-filtering="true">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-advanced-filtering
>
</igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
¿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.
Los componentes predefinidos Actions
y title
de la interfaz de usuario se agregan dentro de y IgcGridToolbar
todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las características de cuadrícula correspondientes:
<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="true">
<igc-grid-toolbar>
<igc-grid-toolbar-title>Tree Grid Toolbar</igc-grid-toolbar-title>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering><igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-tree-grid>
html
Como se ve en el fragmento de código anterior, los componentes predefinidos de la interfaz de usuario de acciones están incluidos en el contenedor IgcGridToolbarActions. De esta manera, el título de la barra de herramientas se alinea a la izquierda de la barra de herramientas y las acciones se alinean a la derecha de la barra de herramientas.
Por supuesto, cada una de estas UI se puede agregar de forma independiente entre sí o puede que no se agreguen en absoluto. De esta manera, el contenedor de la barra de herramientas quedará vacío:
<igc-tree-grid primary-key="ID" foreign-key="ParentID" auto-generate="true">
<igc-grid-toolbar>
</igc-grid-toolbar>
</igc-tree-grid>
html
Para obtener una visión completa de cada uno de los componentes predeterminados de la interfaz de usuario, continúe leyendo la sección Funciones a continuación.
Características
La barra de herramientas es excelente para separar la lógica/interacciones, lo que afecta a la cuadrícula en su conjunto.
Como se muestra arriba, se puede configurar para proporcionar componentes predeterminados para controlar, ocultar columnas, fijar columnas, filtrar avanzado y exportar datos desde la cuadrícula.
Estas funciones se pueden habilitar de forma independiente entre sí siguiendo un patrón similar al componente de tarjeta del conjunto de Ignite UI for Web Components.
A continuación se enumeran las características principales de la barra de herramientas con código de ejemplo para cada una de ellas.
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { html } from 'lit-html';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
import "./index.css";
defineComponents(IgcAvatarComponent, IgcInputComponent, IgcSwitchComponent);
export class Sample {
constructor() {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
var inputTitle = document.getElementById('inputTitle') as IgcInputComponent;
var switchFiltering = document.getElementById('enableFiltering') as IgcSwitchComponent;
var switchHiding = document.getElementById('enableHiding') as IgcSwitchComponent;
var switchPinning = document.getElementById('enablePinning') as IgcSwitchComponent;
var switchExport = document.getElementById('enableExport') as IgcSwitchComponent;
var toolbarTitle = document.getElementById('toolbarTitle');
var toolbarFiltering = document.getElementById('toolbarFiltering');
var toolbarHiding = document.getElementById('toolbarHiding');
var toolbarPinning = document.getElementById('toolbarPinning');
var toolbarExporter = document.getElementById('toolbarExporter');
inputTitle.addEventListener('igcInput', (evt: CustomEvent) => {
toolbarTitle.textContent = evt.detail;
});
switchFiltering.addEventListener('igcChange', () => {
toolbarFiltering.hidden = !switchFiltering.checked;
});
switchHiding.addEventListener('igcChange', () => {
toolbarHiding.hidden = !switchHiding.checked;
});
switchPinning.addEventListener('igcChange', () => {
toolbarPinning.hidden = !switchPinning.checked;
});
switchExport.addEventListener('igcChange', () => {
toolbarExporter.hidden = !switchExport.checked;
});
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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">
<div class="container">
<div class="control_panel">
<igc-input id="inputTitle" type="text" label="Toolbar title" value="Tree grid toolbar"></igc-input>
<igc-switch id="enableFiltering" checked>Advanced Filtering</igc-switch>
<igc-switch id="enableHiding" checked>Column hiding</igc-switch>
<igc-switch id="enablePinning" checked>Column pinning</igc-switch>
<igc-switch id="enableExport" checked>Exporting</igc-switch>
</div>
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="400px">
<igc-grid-toolbar>
<igc-grid-toolbar-title id="toolbarTitle">Tree grid toolbar</igc-grid-toolbar-title>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering id="toolbarFiltering"></igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding id="toolbarHiding"></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning id="toolbarPinning"></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter id="toolbarExporter"></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column id="column1" field="Name" data-type="string"></igc-column>
<igc-column field="Title" data-type="string"></igc-column>
<igc-column field="ID" data-type="number"></igc-column>
<igc-column field="Age" data-type="number"></igc-column>
<igc-column field="HireDate" data-type="date"></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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
.control_panel {
width: 700px;
margin-bottom: 10px;
}
css
Título
Establecer un título para la barra de herramientas en su cuadrícula se logra utilizando IgcGridToolbarTitle
.
Los usuarios pueden proporcionar cualquier cosa, desde texto simple hasta plantillas más complejas.
<igc-grid-toolbar>
<igc-grid-toolbar-title>Grid toolbar title</igc-grid-toolbar-title>
</igc-grid-toolbar>
html
Comportamiento
IgcGridToolbarActions
es donde los usuarios pueden colocar acciones/interacciones en relación con la cuadrícula principal. Al igual que con la parte del título de la barra de herramientas, los usuarios pueden proporcionar cualquier cosa dentro de esa parte de la plantilla, incluidos los componentes de interacción predeterminados de la barra de herramientas.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<!-- ... -->
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Fijación de columnas
El componente IgcGridToolbarPinning
proporciona la interfaz de usuario predeterminada para interactuar con la fijación de columnas en la cuadrícula.
El componente está configurado para funcionar desde el primer momento con la cuadrícula principal que contiene la barra de herramientas, así como varias propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-pinning
title="Grid pinned columns"
prompt="Filter column collection"
column-list-height="400px">
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Ocultación de columnas
IgcGridToolbarHiding
proporciona la interfaz de usuario predeterminada para interactuar con la ocultación de columnas. Expone las mismas propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding
title="Grid column hiding"
prompt="Filter column collection"
column-list-height="400px">
</igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Filtrado avanzado
El componente Filtrado avanzado de la barra de herramientas proporciona la interfaz de usuario predeterminada para la función Filtrado avanzado. El componente expone una forma de cambiar el texto predeterminado del botón.
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-advanced-filtering>Custom text for the toggle button</igc-grid-toolbar-advanced-filtering>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Exportación de datos
Al igual que con el resto de las acciones de la barra de herramientas, la exportación se realiza a través de IgcGridToolbarExporter
listo para usar.
El componente exportador de la barra de herramientas expone varias propiedades de entrada para personalizar tanto la interfaz de usuario como la experiencia de exportación.
Estos van desde cambiar el texto que se muestra hasta habilitar/deshabilitar opciones en el menú desplegable y personalizar el nombre del archivo generado. Para obtener una referencia completa, consulte la documentación de la API de ToolbarExporter
.
Aquí hay un fragmento que muestra algunas de las opciones que se pueden personalizar a través de la plantilla Web Components:
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-exporter export-csv="true" export-excel="true" filename="exported_data">
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
html
Además de cambiar el nombre del archivo exportado, el usuario puede configurar aún más las opciones del exportador esperando el evento ToolbarExporting
y personalizando la entrada de opciones en las propiedades del evento.
De forma predeterminada, al exportar a CSV, el exportador exporta utilizando un separador de coma y utiliza una extensión '.csv' para el archivo de salida. Puede personalizar estos parámetros de exportación suscribiéndose a eventos del exportador o cambiando los valores de los campos de opciones del exportador. También puede cancelar el proceso de exportación configurando el campo de cancelación de los argumentos del evento en verdadero.
El siguiente fragmento de código demuestra la suscripción al evento de exportación de la barra de herramientas y la configuración de las opciones del exportador:
<igc-tree-grid id="treeGrid"></igc-tree-grid>
html
constructor() {
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.addEventListener("toolbarExporting", this.configureExport);
}
public configureExport(evt: CustomEvent<IgcGridToolbarExportEventArgs>) {
const args = evt.detail;
const options: IgcExporterOptionsBase = args.options;
if (options) {
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
}
ts
El siguiente ejemplo demuestra cómo personalizar los archivos exportados:
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcExporterOptionsBase, IgcGridToolbarExportEventArgs } from 'igniteui-webcomponents-grids/grids';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this.webTreeGridToolbarExporting = this.webTreeGridToolbarExporting.bind(this);
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
treeGrid.data = this.employeesFlatAvatars;
treeGrid.addEventListener("toolbarExporting", this.webTreeGridToolbarExporting);
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridToolbarExporting(evt: CustomEvent<IgcGridToolbarExportEventArgs>): void {
const args = evt.detail;
const options: IgcExporterOptionsBase = args.options;
if (options) {
options.fileName = `Report_${new Date().toDateString()}`;
(args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
columnArgs.cancel = columnArgs.header === 'Name';
});
}
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
Indicador de exportación
Cuando se utiliza el componente exportador de la barra de herramientas predeterminado, cada vez que se realiza una operación de exportación, la barra de herramientas mostrará un indicador de progreso mientras la operación está en curso.
Además, los usuarios pueden configurar la propiedad ShowProgress
la barra de herramientas y utilizarla para sus propias operaciones de larga duración o simplemente como otra forma de indicar una acción que tiene lugar en la cuadrícula.
El ejemplo que se utiliza a continuación tiene una cantidad significativa de datos, a fin de aumentar el tiempo necesario para exportar los datos para que se pueda ver la barra de progreso. Además cuenta con otro botón que simula una operación de larga duración en la red:
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, items)));
}
}
}
tsimport { IgcGridToolbarComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
import { OrdersTreeData } from './OrdersData';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
defineComponents(IgcButtonComponent);
export class Sample {
constructor() {
const localData: any[] = [];
for (let i = 0; i < 10000; i += 3) {
for (let c = 0; c < this.ordersTreeData.length; c++) {
localData.push(this.ordersTreeData[c]);
}
}
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
treeGrid.data = localData;
var toolbar = document.getElementById('toolbar') as IgcGridToolbarComponent;
var button = document.getElementById('simulate') as IgcButtonComponent;
button.addEventListener('click', () => {
toolbar.showProgress = true;
setTimeout(() => {
toolbar.showProgress = false;
}, 5000);
});
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
}
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">
<div class="container fill">
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="350px">
<igc-grid-toolbar id="toolbar">
<igc-button id="simulate">
Simulate long running operation
</igc-button>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<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="currency">
</igc-column>
<igc-column field="Price" header="Price" data-type="currency">
</igc-column>
<igc-column field="OrderDate" header="Order Date" data-type="date">
</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
Contenido personalizado
Si la parte de acciones del componente de la barra de herramientas no es suficiente para un caso de uso particular, la barra de herramientas en sí tiene una proyección de contenido general donde los usuarios pueden proporcionar una interfaz de usuario adicional. Si el usuario necesita la instancia de grid respectiva para llamadas o enlaces de API, puede crear una variable de referencia de plantilla.
Aquí hay un fragmento de muestra:
<igc-tree-grid id="grid">
<igc-grid-toolbar>
<igc-grid-toolbar-title>title</igx-grid-toolbar-title>
<!--
Everything between the toolbar tags except the default toolbar components/directives
will be projected as custom content.
-->
<igc-grid-toolbar-actions>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-tree-grid>
html
El siguiente ejemplo demuestra cómo agregar un botón adicional a la barra de herramientas para borrar el conjunto de clasificación haciendo clic en los encabezados de las columnas:
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...(newItems.slice(0, items)));
}
}
}
tsimport { IgcCellTemplateContext, IgcColumnComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { defineComponents, IgcAvatarComponent, IgcButtonComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import { EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { html } from 'lit-html';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
import "./index.css";
defineComponents(IgcButtonComponent, IgcIconComponent, IgcAvatarComponent);
const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>`;
export class Sample {
constructor() {
registerIconFromText('clear', icon, 'material');
var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = document.getElementById('column1') as IgcColumnComponent;
treeGrid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
var button = document.getElementById('clearSort') as IgcButtonComponent;
button.addEventListener("click", () => {
treeGrid.clearSort();
});
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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">
<div class="container fill">
<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" height="400px">
<igc-grid-toolbar>
<igc-grid-toolbar-title>Tree Grid Toolbar</igc-grid-toolbar-title>
<igc-button id="clearSort">
<igc-icon name="clear" collection="material"></igc-icon>Clear Sort
</igc-button>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column id="column1" field="Name" data-type="string"></igc-column>
<igc-column field="Title" data-type="string" sortable="true"></igc-column>
<igc-column field="ID" data-type="number" sortable="true"></igc-column>
<igc-column field="Age" data-type="number" sortable="true"></igc-column>
<igc-column field="HireDate" data-type="date" sortable="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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
css
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-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
Manifestación
export class EmployeesFlatAvatarsItem {
public constructor(init: Partial<EmployeesFlatAvatarsItem>) {
Object.assign(this, init);
}
public Age: number;
public Avatar: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Title: string;
}
export class EmployeesFlatAvatars extends Array<EmployeesFlatAvatarsItem> {
public constructor(items: Array<EmployeesFlatAvatarsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatAvatarsItem(
{
Age: 55,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/5.jpg`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Title: `Development Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 42,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/4.jpg`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Title: `CEO`
}),
new EmployeesFlatAvatarsItem(
{
Age: 49,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/2.jpg`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Title: `Accounting Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 61,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/4.jpg`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Title: `Localization Manager`
}),
new EmployeesFlatAvatarsItem(
{
Age: 43,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/1.jpg`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 29,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/2.jpg`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 31,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/3.jpg`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Title: `Software Development Team Lead`
}),
new EmployeesFlatAvatarsItem(
{
Age: 35,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/3.jpg`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/6.jpg`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Title: `Senior Software Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/7.jpg`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/1.jpg`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Title: `Vice President`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/8.jpg`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Title: `Director`
}),
new EmployeesFlatAvatarsItem(
{
Age: 44,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/9.jpg`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Title: `Senior Accountant`
}),
new EmployeesFlatAvatarsItem(
{
Age: 50,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/10.jpg`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 27,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/5.jpg`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Title: `Senior Localization Developer`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/women/6.jpg`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 39,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/26.jpg`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Title: `Localization Intern`
}),
new EmployeesFlatAvatarsItem(
{
Age: 25,
Avatar: `https://static.infragistics.com/xplatform/images/people/men/27.jpg`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Title: `Localization Intern`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatAvatarsItem, EmployeesFlatAvatars } from './EmployeesFlatAvatars';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.employeesFlatAvatars;
column1.bodyTemplate = this.webTreeGridAvatarCellTemplate;
}
this._bind();
}
private _employeesFlatAvatars: EmployeesFlatAvatars = null;
public get employeesFlatAvatars(): EmployeesFlatAvatars {
if (this._employeesFlatAvatars == null)
{
this._employeesFlatAvatars = new EmployeesFlatAvatars();
}
return this._employeesFlatAvatars;
}
public webTreeGridAvatarCellTemplate = (ctx: IgcCellTemplateContext) => {
return html`<div class="cell__inner">
<igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
</igc-avatar>
<span class="name">${ctx.cell.value}</span>
</div>`;
}
}
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"
allow-advanced-filtering="true">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-advanced-filtering
>
</igc-grid-toolbar-advanced-filtering>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-exporter
>
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Name"
data-type="string"
name="column1"
id="column1">
</igc-column>
<igc-column
field="Title"
data-type="string">
</igc-column>
<igc-column
field="ID"
data-type="number">
</igc-column>
<igc-column
field="Age"
data-type="number">
</igc-column>
<igc-column
field="HireDate"
data-type="date">
</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 */
.cell__inner {
display: flex;
align-items: center;
}
.name {
margin-left: 30px;
}
#grid {
--ig-grid-toolbar-background-color: #2a2b2f;
--ig-grid-toolbar-title-text-color: #ffcd0f;
--ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css
Referencias de API
El servicio Grid Toolbar tiene algunas API más para explorar, que se enumeran a continuación.
IgcTreeGridComponent
Events:ToolbarExporting
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.