Web Components Diseño de cuadrícula de varias filas
El diseño de varias filas del Ignite UI for Web Components amplía las capacidades de representación de la cuadrícula Web Components. La función permite dividir un solo registro de datos en varias filas visibles.
Web Components Ejemplo de diseño de varias filas
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: number;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor(items: Array<CustomersDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CustomersDataItem(
{
ID: `ALFKI`,
Company: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: 12209,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}),
new CustomersDataItem(
{
ID: `ANATR`,
Company: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5021,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `ANTON`,
Company: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5023,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `AROUT`,
Company: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: 22000,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}),
new CustomersDataItem(
{
ID: `BERGS`,
Company: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: 17000,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}),
new CustomersDataItem(
{
ID: `BLAUS`,
Company: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: 68306,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}),
new CustomersDataItem(
{
ID: `BLONP`,
Company: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: 67000,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}),
new CustomersDataItem(
{
ID: `BOLID`,
Company: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: 28023,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}),
new CustomersDataItem(
{
ID: `BONAP`,
Company: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: 13008,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}),
new CustomersDataItem(
{
ID: `BOTTM`,
Company: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: 28000,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}),
new CustomersDataItem(
{
ID: `BSBEV`,
Company: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: 10000,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CACTU`,
Company: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: 1010,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}),
new CustomersDataItem(
{
ID: `CENTC`,
Company: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5022,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}),
new CustomersDataItem(
{
ID: `CHOPS`,
Company: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: 3012,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `COMMI`,
Company: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 34000,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CONSH`,
Company: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: 27000,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}),
new CustomersDataItem(
{
ID: `DRACD`,
Company: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: 52066,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}),
new CustomersDataItem(
{
ID: `DUMON`,
Company: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: 44000,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}),
new CustomersDataItem(
{
ID: `EASTC`,
Company: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: 41000,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}),
new CustomersDataItem(
{
ID: `ERNSH`,
Company: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: 8010,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}),
new CustomersDataItem(
{
ID: `FAMIA`,
Company: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 27000,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `FISSA`,
Company: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: 28034,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}),
new CustomersDataItem(
{
ID: `FOLIG`,
Company: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: 59000,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}),
new CustomersDataItem(
{
ID: `FOLKO`,
Company: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: 36000,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}),
new CustomersDataItem(
{
ID: `FRANK`,
Company: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: 80805,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}),
new CustomersDataItem(
{
ID: `FRANR`,
Company: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: 44000,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}),
new CustomersDataItem(
{
ID: `FRANS`,
Company: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: 10100,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcGridComponent
private _groupingExpression1: IgcGroupingExpression[] | null = null;
public get groupingExpression1(): IgcGroupingExpression[] {
if (this._groupingExpression1 == null)
{
let groupingExpression1: IgcGroupingExpression[] = [];
var groupingExpression2: IgcGroupingExpression = {} as IgcGroupingExpression;
groupingExpression2.fieldName = "Country";
groupingExpression2.ignoreCase = false;
groupingExpression2.dir = SortingDirection.Asc;
groupingExpression1.push(groupingExpression2)
this._groupingExpression1 = groupingExpression1;
}
return this._groupingExpression1;
}
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
this._bind = () => {
grid.data = this.customersData;
grid.groupingExpressions = this.groupingExpression1;
}
this._bind();
}
private _customersData: CustomersData = null;
public get customersData(): CustomersData {
if (this._customersData == null)
{
this._customersData = new CustomersData();
}
return this._customersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.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-grid
name="grid"
id="grid"
row-editable="true"
allow-filtering="true"
filter-mode="excelStyleFilter"
primary-key="Company">
<igc-grid-toolbar
>
<igc-grid-toolbar-title
>
</igc-grid-toolbar-title>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column-layout
header="ID">
<igc-column
field="ID"
row-start="1"
col-start="1"
row-end="3"
filterable="false"
width="150px">
</igc-column>
</igc-column-layout>
<igc-column-layout
pinned="true"
header="Contact Details">
<igc-column
field="Company"
header="Company"
row-start="1"
col-start="1"
col-end="3"
sortable="true"
width="350px">
</igc-column>
<igc-column
field="ContactName"
header="Name"
row-start="2"
col-start="1"
col-end="2"
groupable="true">
</igc-column>
<igc-column
field="ContactTitle"
header="Title"
row-start="2"
col-start="2"
col-end="3"
groupable="true">
</igc-column>
</igc-column-layout>
<igc-column-layout
pinned="false"
header="Address Details">
<igc-column
field="Country"
row-start="1"
col-start="1"
col-end="3"
groupable="true"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="Region"
row-start="1"
col-start="3"
col-end="5"
groupable="true"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="PostalCode"
row-start="1"
col-start="5"
col-end="7"
groupable="true"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="City"
row-start="2"
col-start="1"
col-end="4"
groupable="true"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="Address"
row-start="2"
col-start="4"
col-end="7"
filterable="false">
</igc-column>
</igc-column-layout>
<igc-column-layout
header="Phone Details">
<igc-column
field="Phone"
row-start="1"
col-start="1"
col-end="2"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="Fax"
row-start="2"
col-start="1"
col-end="2"
filterable="false"
width="220px">
</igc-column>
</igc-column-layout>
</igc-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
¿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.
La declaración de diseño de varias filas se logra a través IgcColumnLayoutComponent
del componente. Cada IgcColumnLayoutComponent
componente debe considerarse como un bloque, que contiene uno o varios IgcColumnComponent
componentes. Algunas de las características de la cuadrícula funcionan a nivel de bloque (se enumeran en la sección "Integración de características" a continuación). Por ejemplo, la virtualización usará el bloque para determinar los fragmentos virtuales, por lo tanto, para un mejor rendimiento, divida las columnas en más columnLayout
bloques si el diseño lo permite. No debe haber columnas fuera de esos bloques y no debe usarse columnGroup
al configurar un diseño de varias filas. El diseño de varias filas se implementa sobre la especificación de diseño de cuadrícula y debe cumplir con sus requisitos.
El IgcColumnComponent
componente expone cuatro IgcInputComponent
propiedades para determinar la ubicación y el intervalo de cada celda:
ColStart
: índice de columna desde el que comienza el campo. Esta propiedad es obligatoria.RowStart
: índice de fila desde el que comienza el campo. Esta propiedad es obligatoria.ColEnd
: índice de columna donde debe terminar el campo actual. La cantidad de columnas entre colStart y colEnd determinará la cantidad de columnas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en colStart + 1.RowEnd
: índice de fila donde debe terminar el campo actual. La cantidad de filas entre RowStart y RowEnd determinará la cantidad de filas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en rowStart + 1.
<igc-column-layout>
<igc-column row-start="1" col-start="1" row-end="3" field="ID"></igc-column>
</igc-column-layout>
<igc-column-layout>
<igc-column row-start="1" col-start="1" col-end="3" field="CompanyName"></igc-column>
<igc-column row-start="2" col-start="1" col-end="2" field="ContactName"></igc-column>
<igc-column row-start="2" col-start="2" col-end="3" field="ContactTitle"></igc-column>
</igc-column-layout>
<igc-column-layout>
<igc-column row-start="1" col-start="1" col-end="3" field="Country"></igc-column>
<igc-column row-start="1" col-start="3" col-end="5" field="Region"></igc-column>
<igc-column row-start="1" col-start="5" col-end="7" field="PostalCode"></igc-column>
<igc-column row-start="2" col-start="1" col-end="4" field="City"></igc-column>
<igc-column row-start="2" col-start="4" col-end="7" field="Address"></igc-column>
</igc-column-layout>
<igc-column-layout>
<igc-column row-start="1" col-start="1" field="Phone"></igc-column>
<igc-column row-start="2" col-start="1" field="Fax"></igc-column>
</igc-column-layout>
html
El resultado de la configuración anterior se puede ver en la siguiente captura de pantalla:

Las propiedades RowStart y ColStart deben establecerse para cada IgcColumnComponent en un columnLayout. El componente columnLayout no comprueba si el diseño es correcto y no genera errores ni advertencias al respecto. Los desarrolladores deben asegurarse de que la declaración de su diseño sea correcta y completa, de lo contrario, pueden terminar en un diseño roto con desalineaciones, superposiciones e inconsistencias en el navegador.
Integración de funciones
Debido al enfoque de representación completamente diferente del diseño de varias filas, algunas de las características de columna solo funcionarán en columnLayout
el componente. Estas características son la fijación de columnas y la ocultación de columnas. Por ejemplo, la clasificación y la agrupación funcionarán de la misma manera en el IgcColumnComponent
componente.
- Filtrado: solo se admite el filtrado de estilos de Excel. Establecer
FilterMode
explícitamente enFilterMode.quickFilter
no tiene ningún efecto. - Paginación: funciona con registros, no con filas visuales.
- La opción Agrupar por:
HideGroupedColumns
no tiene ningún efecto en el diseño de varias filas. Las columnas agrupadas siempre están visibles.
Actualmente no se admiten las siguientes funciones:
- Columna en movimiento
- Encabezados de varias columnas
- Exportar a Excel
- resúmenes
Navegación por teclado
IgcGridComponent
con diseños de varias filas proporciona navegación con teclado integrado.
Navegación Horizontal
- ← o →: se mueve a la celda adyacente a la izquierda/derecha dentro de la fila actual sin verse afectada por los diseños de columnas definidos. Si la celda actual abarca más de una fila, ← y → deben navegar a la primera celda a la izquierda y a la derecha con la misma
rowStart
, a menos que haya navegado a alguna otra celda adyacente antes. La navegación almacena la celda de navegación inicial y navega a las celdas con la mismarowStart
si es posible. - Ctrl + ← (INICIO) o Ctrl + → (FIN): navegue hasta el inicio o el final de la fila y seleccione la celda de acuerdo con la celda de navegación inicial.
Navegación vertical
- ↑ o ↓: se mueve a la celda de arriba/abajo en relación con una posición inicial y no se ve afectado por las filas. Si la celda actual abarca más de una columna, se seleccionará la siguiente celda activa de acuerdo con la celda de navegación inicial.
- Ctrl + ↑ o Ctrl + Abajo: navega y aplica el foco en la misma columna en la primera o en la última fila.
- Ctrl + Inicio o Ctrl + Fin: navega a la primera fila y enfoca la primera celda o navega a la última fila y enfoca la última celda.
La navegación a través de celdas que abarcan varias filas o columnas se realiza de acuerdo con la celda de navegación inicial y permitirá regresar a la celda inicial usando la tecla para la dirección opuesta. Se utiliza el mismo enfoque al navegar a través de filas de grupos.
La selección y la selección de varias celdas funcionan en el diseño, lo que significa que cuando una celda está activa, se seleccionará su diseño. Además, todas las funciones de selección múltiple, como la selección por arrastre, son aplicables y funcionarán por diseño, no por celda.
Navegación con teclado personalizado
La cuadrícula permite personalizar el comportamiento de navegación predeterminado cuando se presiona una determinada tecla. Acciones como ir a la siguiente celda o a la siguiente celda se pueden manejar fácilmente con la poderosa API de navegación por teclado:
GridKeydown
está expuesto. El evento emitiráIGridKeydownEventArgs
. Este evento está disponible solo a través de las combinaciones de teclas del teclado mencionadas anteriormente; para todas las demás acciones clave, puede usar el eventoKeyDown
.NavigateTo
: este método le permite navegar a una posición segúnRowIndex
yVisibleColumnIndex
proporcionados.
La siguiente demostración agrega navegación adicional hacia abajo/arriba mediante las teclas Enter y Shift + Enter, similar al comportamiento observado en Excel.
Manifestación
export class CompanyDataItem {
public constructor(init: Partial<CompanyDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public Address: string;
public City: string;
public Country: string;
public LifetimeSales: number;
public QuarterlySales: number;
public YearlySales: number;
public MarketPotential: number;
public AssetsCash: number;
public AccountsReceivable: number;
public AssetsBooks: number;
}
export class CompanyData extends Array<CompanyDataItem> {
public constructor(items: Array<CompanyDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CompanyDataItem(
{
ID: `abc1000`,
Company: `Sportan`,
Address: `Rapelye Street`,
City: `Oceola`,
Country: `VU`,
LifetimeSales: 40882580.18,
QuarterlySales: 430845.78,
YearlySales: 1197420.17,
MarketPotential: 4210805124.61,
AssetsCash: 264714.71,
AccountsReceivable: 63084.44,
AssetsBooks: 7534.74
}),
new CompanyDataItem(
{
ID: `abc1001`,
Company: `Bugsall`,
Address: `Hoyt Street`,
City: `Rosine`,
Country: `FM`,
LifetimeSales: 29231147.89,
QuarterlySales: 227299.97,
YearlySales: 1486467.06,
MarketPotential: 2505447478.96,
AssetsCash: 370690.39,
AccountsReceivable: 69242.24,
AssetsBooks: 12507.92
}),
new CompanyDataItem(
{
ID: `abc1002`,
Company: `Hydrocom`,
Address: `Sunnyside Court`,
City: `Cornfields`,
Country: `KE`,
LifetimeSales: 35628528.18,
QuarterlySales: 226007.91,
YearlySales: 1092555.78,
MarketPotential: 4930069033.99,
AssetsCash: 403038.64,
AccountsReceivable: 56183.05,
AssetsBooks: 8113.52
}),
new CompanyDataItem(
{
ID: `abc1003`,
Company: `Eclipto`,
Address: `Remsen Avenue`,
City: `Orin`,
Country: `TZ`,
LifetimeSales: 20178683.42,
QuarterlySales: 319645.81,
YearlySales: 1249194.57,
MarketPotential: 2488740024.16,
AssetsCash: 237368.76,
AccountsReceivable: 50048.48,
AssetsBooks: 13100.31
}),
new CompanyDataItem(
{
ID: `abc1004`,
Company: `Paprikut`,
Address: `Bay Parkway`,
City: `Motley`,
Country: `LR`,
LifetimeSales: 25575955.42,
QuarterlySales: 347046.85,
YearlySales: 1611555.66,
MarketPotential: 1923959087.58,
AssetsCash: 235064.57,
AccountsReceivable: 74596.25,
AssetsBooks: 17057.85
}),
new CompanyDataItem(
{
ID: `abc1005`,
Company: `Unia`,
Address: `Richards Street`,
City: `Herlong`,
Country: `DZ`,
LifetimeSales: 13462122.23,
QuarterlySales: 368636.73,
YearlySales: 489642.54,
MarketPotential: 1679474693.72,
AssetsCash: 498174.1,
AccountsReceivable: 92476.88,
AssetsBooks: 6961.9
}),
new CompanyDataItem(
{
ID: `abc1006`,
Company: `Isologix`,
Address: `Williams Court`,
City: `Marysville`,
Country: `JO`,
LifetimeSales: 38448387.27,
QuarterlySales: 298248.71,
YearlySales: 1904695.32,
MarketPotential: 4696918929,
AssetsCash: 383266.93,
AccountsReceivable: 76247.35,
AssetsBooks: 6818.03
}),
new CompanyDataItem(
{
ID: `abc1007`,
Company: `Deepends`,
Address: `Independence Avenue`,
City: `Riegelwood`,
Country: `NO`,
LifetimeSales: 13730298.02,
QuarterlySales: 323612.72,
YearlySales: 953860.54,
MarketPotential: 4825809829.87,
AssetsCash: 416146.08,
AccountsReceivable: 62282.5,
AssetsBooks: 13686.42
}),
new CompanyDataItem(
{
ID: `abc1008`,
Company: `Quantasis`,
Address: `Berriman Street`,
City: `Unionville`,
Country: `ID`,
LifetimeSales: 19875841.19,
QuarterlySales: 468274.38,
YearlySales: 1569184.18,
MarketPotential: 3489758844.49,
AssetsCash: 415699.26,
AccountsReceivable: 54628.5,
AssetsBooks: 19321.38
}),
new CompanyDataItem(
{
ID: `abc1009`,
Company: `Playce`,
Address: `India Street`,
City: `Joppa`,
Country: `VI`,
LifetimeSales: 45960329.03,
QuarterlySales: 448358.99,
YearlySales: 1855678.13,
MarketPotential: 2740892152.3,
AssetsCash: 447054.49,
AccountsReceivable: 69204.65,
AssetsBooks: 23522.18
}),
new CompanyDataItem(
{
ID: `abc1010`,
Company: `Ezent`,
Address: `Decatur Street`,
City: `Lithium`,
Country: `CV`,
LifetimeSales: 43613913.07,
QuarterlySales: 140288.25,
YearlySales: 594517.52,
MarketPotential: 1419141218.99,
AssetsCash: 324254.03,
AccountsReceivable: 78826.89,
AssetsBooks: 20581.79
}),
new CompanyDataItem(
{
ID: `abc1011`,
Company: `Corepan`,
Address: `Jefferson Street`,
City: `Roland`,
Country: `CA`,
LifetimeSales: 19334236.7,
QuarterlySales: 413597.57,
YearlySales: 1871048.41,
MarketPotential: 3524818686.77,
AssetsCash: 464374.02,
AccountsReceivable: 68634.68,
AssetsBooks: 16572.39
}),
new CompanyDataItem(
{
ID: `abc1012`,
Company: `Quonata`,
Address: `Bristol Street`,
City: `Belgreen`,
Country: `ER`,
LifetimeSales: 21467135.56,
QuarterlySales: 224717.89,
YearlySales: 657562.96,
MarketPotential: 3686684834.77,
AssetsCash: 345941.49,
AccountsReceivable: 51842.73,
AssetsBooks: 12948.79
}),
new CompanyDataItem(
{
ID: `abc1013`,
Company: `Empirica`,
Address: `Eaton Court`,
City: `Hampstead`,
Country: `LY`,
LifetimeSales: 21711544.57,
QuarterlySales: 290740.22,
YearlySales: 1202336.44,
MarketPotential: 2343942535.11,
AssetsCash: 331479.28,
AccountsReceivable: 61027.27,
AssetsBooks: 6199.99
}),
new CompanyDataItem(
{
ID: `abc1014`,
Company: `Eventix`,
Address: `Gain Court`,
City: `Dowling`,
Country: `NG`,
LifetimeSales: 27108803.74,
QuarterlySales: 322969.25,
YearlySales: 951465.66,
MarketPotential: 4841022751.3,
AssetsCash: 287818.89,
AccountsReceivable: 79152.96,
AssetsBooks: 9047.59
}),
new CompanyDataItem(
{
ID: `abc1015`,
Company: `Dogspa`,
Address: `Quay Street`,
City: `Marne`,
Country: `TW`,
LifetimeSales: 15372014.44,
QuarterlySales: 376294.9,
YearlySales: 978453.71,
MarketPotential: 1275418042.2,
AssetsCash: 374628.65,
AccountsReceivable: 84888.29,
AssetsBooks: 20578.59
}),
new CompanyDataItem(
{
ID: `abc1016`,
Company: `Jumpstack`,
Address: `Quincy Street`,
City: `Hobucken`,
Country: `CF`,
LifetimeSales: 38882346.28,
QuarterlySales: 140607.23,
YearlySales: 1197166.82,
MarketPotential: 4820347822.28,
AssetsCash: 231516.29,
AccountsReceivable: 87415.74,
AssetsBooks: 12896.54
}),
new CompanyDataItem(
{
ID: `abc1017`,
Company: `Sybixtex`,
Address: `Ryder Street`,
City: `Alderpoint`,
Country: `IO`,
LifetimeSales: 21445732.45,
QuarterlySales: 369036.23,
YearlySales: 499606.34,
MarketPotential: 2807389991.36,
AssetsCash: 408474.47,
AccountsReceivable: 65344.38,
AssetsBooks: 8862.63
}),
new CompanyDataItem(
{
ID: `abc1018`,
Company: `Dognosis`,
Address: `Wolcott Street`,
City: `Edgewater`,
Country: `GL`,
LifetimeSales: 41661881.98,
QuarterlySales: 141108.09,
YearlySales: 522969.48,
MarketPotential: 4374478218.15,
AssetsCash: 225730.61,
AccountsReceivable: 72839.21,
AssetsBooks: 8728.07
}),
new CompanyDataItem(
{
ID: `abc1019`,
Company: `Twiggery`,
Address: `Irwin Street`,
City: `Blackgum`,
Country: `ZM`,
LifetimeSales: 36017506.06,
QuarterlySales: 354562.4,
YearlySales: 1449893.92,
MarketPotential: 1948021644.72,
AssetsCash: 376383.08,
AccountsReceivable: 62385.03,
AssetsBooks: 14270.75
}),
new CompanyDataItem(
{
ID: `abc1020`,
Company: `Bizmatic`,
Address: `Jerome Street`,
City: `Sylvanite`,
Country: `MM`,
LifetimeSales: 11722193.14,
QuarterlySales: 213212.65,
YearlySales: 1310614.58,
MarketPotential: 3463018300.01,
AssetsCash: 252123.01,
AccountsReceivable: 57229.43,
AssetsBooks: 19165.76
}),
new CompanyDataItem(
{
ID: `abc1021`,
Company: `Accel`,
Address: `Louisiana Avenue`,
City: `Cornucopia`,
Country: `IE`,
LifetimeSales: 27607249.98,
QuarterlySales: 236774.12,
YearlySales: 1546611.47,
MarketPotential: 2024251139.72,
AssetsCash: 294508.31,
AccountsReceivable: 71612.5,
AssetsBooks: 18155.66
}),
new CompanyDataItem(
{
ID: `abc1022`,
Company: `Brainquil`,
Address: `Tompkins Avenue`,
City: `Hanover`,
Country: `MX`,
LifetimeSales: 25699331.36,
QuarterlySales: 186296.88,
YearlySales: 736119.79,
MarketPotential: 1098592989.14,
AssetsCash: 321341.22,
AccountsReceivable: 82055.95,
AssetsBooks: 10149.55
}),
new CompanyDataItem(
{
ID: `abc1023`,
Company: `Eplode`,
Address: `Desmond Court`,
City: `Lupton`,
Country: `GA`,
LifetimeSales: 22446181.35,
QuarterlySales: 346390.58,
YearlySales: 712190.68,
MarketPotential: 2534215258.43,
AssetsCash: 266537.14,
AccountsReceivable: 87164.54,
AssetsBooks: 24489.71
}),
new CompanyDataItem(
{
ID: `abc1024`,
Company: `Crustatia`,
Address: `Woodhull Street`,
City: `Conestoga`,
Country: `GR`,
LifetimeSales: 48060275.78,
QuarterlySales: 319385.17,
YearlySales: 1662973.16,
MarketPotential: 3562317203.73,
AssetsCash: 471269.15,
AccountsReceivable: 98834.5,
AssetsBooks: 10641.41
}),
new CompanyDataItem(
{
ID: `abc1025`,
Company: `Buzzness`,
Address: `Guider Avenue`,
City: `Gratton`,
Country: `MD`,
LifetimeSales: 26377352.6,
QuarterlySales: 439844.54,
YearlySales: 601430.59,
MarketPotential: 1486755775.28,
AssetsCash: 252524.24,
AccountsReceivable: 51795.96,
AssetsBooks: 10315.84
}),
new CompanyDataItem(
{
ID: `abc1026`,
Company: `Helixo`,
Address: `Logan Street`,
City: `Broadlands`,
Country: `RE`,
LifetimeSales: 31633703.02,
QuarterlySales: 256392.06,
YearlySales: 602291.9,
MarketPotential: 4323633265.68,
AssetsCash: 468025.56,
AccountsReceivable: 95638.46,
AssetsBooks: 22985.41
}),
new CompanyDataItem(
{
ID: `abc1027`,
Company: `Geekosis`,
Address: `Dictum Court`,
City: `Bellamy`,
Country: `NF`,
LifetimeSales: 29268437.79,
QuarterlySales: 147691.1,
YearlySales: 1691764.93,
MarketPotential: 1362207226.45,
AssetsCash: 434628.23,
AccountsReceivable: 66871.54,
AssetsBooks: 12574.59
}),
new CompanyDataItem(
{
ID: `abc1028`,
Company: `Zipak`,
Address: `Hendrix Street`,
City: `Enetai`,
Country: `MH`,
LifetimeSales: 18691983.29,
QuarterlySales: 218666.54,
YearlySales: 1038077.26,
MarketPotential: 1362313421.44,
AssetsCash: 276294.7,
AccountsReceivable: 59302.02,
AssetsBooks: 11183.04
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebColumnLayoutDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnLayoutComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { CompanyDataItem, CompanyData } from './CompanyData';
import { IgcGridKeydownEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcGridComponent
private companyInfo: IgcColumnLayoutComponent
private company: IgcColumnComponent
private country: IgcColumnComponent
private city: IgcColumnComponent
private address: IgcColumnComponent
private sales: IgcColumnLayoutComponent
private lifetimeSales: IgcColumnComponent
private quarterly: IgcColumnComponent
private yearly: IgcColumnComponent
private marketPotentialInfo: IgcColumnLayoutComponent
private marketPotential: IgcColumnComponent
private assets: IgcColumnLayoutComponent
private assetsCash: IgcColumnComponent
private accountsReceivable: IgcColumnComponent
private assetsBooks: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
this.webGridMRLCustomNavigationEvent = this.webGridMRLCustomNavigationEvent.bind(this);
var companyInfo = this.companyInfo = document.getElementById('CompanyInfo') as IgcColumnLayoutComponent;
var company = this.company = document.getElementById('Company') as IgcColumnComponent;
var country = this.country = document.getElementById('Country') as IgcColumnComponent;
var city = this.city = document.getElementById('City') as IgcColumnComponent;
var address = this.address = document.getElementById('Address') as IgcColumnComponent;
var sales = this.sales = document.getElementById('Sales') as IgcColumnLayoutComponent;
var lifetimeSales = this.lifetimeSales = document.getElementById('LifetimeSales') as IgcColumnComponent;
var quarterly = this.quarterly = document.getElementById('Quarterly') as IgcColumnComponent;
var yearly = this.yearly = document.getElementById('Yearly') as IgcColumnComponent;
var marketPotentialInfo = this.marketPotentialInfo = document.getElementById('MarketPotentialInfo') as IgcColumnLayoutComponent;
var marketPotential = this.marketPotential = document.getElementById('MarketPotential') as IgcColumnComponent;
var assets = this.assets = document.getElementById('Assets') as IgcColumnLayoutComponent;
var assetsCash = this.assetsCash = document.getElementById('AssetsCash') as IgcColumnComponent;
var accountsReceivable = this.accountsReceivable = document.getElementById('AccountsReceivable') as IgcColumnComponent;
var assetsBooks = this.assetsBooks = document.getElementById('AssetsBooks') as IgcColumnComponent;
this._bind = () => {
grid.data = this.companyData;
grid.addEventListener("gridKeydown", this.webGridMRLCustomNavigationEvent);
}
this._bind();
}
private _companyData: CompanyData = null;
public get companyData(): CompanyData {
if (this._companyData == null)
{
this._companyData = new CompanyData();
}
return this._companyData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
WebColumnLayoutDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridMRLCustomNavigationEvent(args: CustomEvent<IgcGridKeydownEventArgs>): void {
const target = args.detail.target;
const grid: IgcGridComponent = this.grid;
if ((args.detail.event as any).key.toLowerCase() === 'enter') {
args.detail.event.preventDefault();
args.detail.cancel = true;
const rowIndex = target.row.index === undefined ? target.index : target.row.index;
(grid as any).navigateTo((args.detail.event as any).shiftKey ? rowIndex - 1 : rowIndex + 1, target.column.visibleIndex,
(obj: any) => {
obj.target.activate();
});
}
}
}
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-grid
auto-generate="false"
name="grid"
id="grid"
id="grid">
<igc-column-layout
name="CompanyInfo"
id="CompanyInfo"
header="Company">
<igc-column
name="Company"
id="Company"
field="Company"
header="Company"
row-start="1"
col-start="1"
col-end="3">
</igc-column>
<igc-column
name="Country"
id="Country"
field="Country"
header="Country"
row-start="2"
col-start="1">
</igc-column>
<igc-column
name="City"
id="City"
field="City"
header="City"
row-start="2"
col-start="2">
</igc-column>
<igc-column
name="Address"
id="Address"
field="Address"
header="Address"
row-start="3"
col-start="1"
col-end="3">
</igc-column>
</igc-column-layout>
<igc-column-layout
name="Sales"
id="Sales"
header="Sales">
<igc-column
name="LifetimeSales"
id="LifetimeSales"
field="LifetimeSales"
header="Lifetime Sales"
row-start="1"
row-end="3"
col-start="1"
col-end="3">
</igc-column>
<igc-column
name="Quarterly"
id="Quarterly"
field="QuarterlySales"
header="Quarterly"
row-start="3"
col-start="1">
</igc-column>
<igc-column
name="Yearly"
id="Yearly"
field="YearlySales"
header="Yearly"
row-start="3"
col-start="2">
</igc-column>
</igc-column-layout>
<igc-column-layout
name="MarketPotentialInfo"
id="MarketPotentialInfo"
header="Market Potential">
<igc-column
name="MarketPotential"
id="MarketPotential"
field="MarketPotential"
header="Market Potential"
row-start="1"
row-end="4"
col-start="1">
</igc-column>
</igc-column-layout>
<igc-column-layout
name="Assets"
id="Assets"
header="Assets">
<igc-column
name="AssetsCash"
id="AssetsCash"
field="AssetsCash"
header="Assets Cash"
row-start="1"
col-start="1">
</igc-column>
<igc-column
name="AccountsReceivable"
id="AccountsReceivable"
field="AccountsReceivable"
header="Accounts Receivable"
row-start="1"
col-start="2"
col-end="4">
</igc-column>
<igc-column
name="AssetsBooks"
id="AssetsBooks"
field="AssetsBooks"
header="Assets Books"
row-start="2"
row-end="4"
col-start="1"
col-end="4">
</igc-column>
</igc-column-layout>
</igc-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#grid {
--ig-size: var(--ig-size-medium);
}
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-grid class="grid"></igc-grid>
html
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-cell-active-border-color: #ffcd0f;
--ig-grid-cell-selected-background: #6f6f6f;
--ig-grid-row-hover-background: #fde069;
--ig-grid-row-selected-background: #8d8d8d;
--ig-grid-header-background: #494949;
--ig-grid-header-text-color: #fff;
}
css
Manifestación
export class CustomersDataItem {
public constructor(init: Partial<CustomersDataItem>) {
Object.assign(this, init);
}
public ID: string;
public Company: string;
public ContactName: string;
public ContactTitle: string;
public Address: string;
public City: string;
public Region: string;
public PostalCode: number;
public Country: string;
public Phone: string;
public Fax: string;
}
export class CustomersData extends Array<CustomersDataItem> {
public constructor(items: Array<CustomersDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CustomersDataItem(
{
ID: `ALFKI`,
Company: `Alfreds Futterkiste`,
ContactName: `Maria Anders`,
ContactTitle: `Sales Representative`,
Address: `Obere Str. 57`,
City: `Berlin`,
Region: `East`,
PostalCode: 12209,
Country: `Germany`,
Phone: `030-0074321`,
Fax: `030-0076545`
}),
new CustomersDataItem(
{
ID: `ANATR`,
Company: `Ana Trujillo Emparedados y helados`,
ContactName: `Ana Trujillo`,
ContactTitle: `Owner`,
Address: `Avda. de la Constitución 2222`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5021,
Country: `Mexico`,
Phone: `(5) 555-4729`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `ANTON`,
Company: `Antonio Moreno Taquería`,
ContactName: `Antonio Moreno`,
ContactTitle: `Owner`,
Address: `Mataderos 2312`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5023,
Country: `Mexico`,
Phone: `(5) 555-3932`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `AROUT`,
Company: `Around the Horn`,
ContactName: `Thomas Hardy`,
ContactTitle: `Sales Representative`,
Address: `120 Hanover Sq.`,
City: `London`,
Region: `East`,
PostalCode: 22000,
Country: `UK`,
Phone: `(171) 555-7788`,
Fax: `(171) 555-6750`
}),
new CustomersDataItem(
{
ID: `BERGS`,
Company: `Berglunds snabbköp`,
ContactName: `Christina Berglund`,
ContactTitle: `Order Administrator`,
Address: `Berguvsvägen 8`,
City: `Luleå`,
Region: `South`,
PostalCode: 17000,
Country: `Sweden`,
Phone: `0921-12 34 65`,
Fax: `0921-12 34 67`
}),
new CustomersDataItem(
{
ID: `BLAUS`,
Company: `Blauer See Delikatessen`,
ContactName: `Hanna Moos`,
ContactTitle: `Sales Representative`,
Address: `Forsterstr. 57`,
City: `Mannheim`,
Region: `East`,
PostalCode: 68306,
Country: `Germany`,
Phone: `0621-08460`,
Fax: `0621-08924`
}),
new CustomersDataItem(
{
ID: `BLONP`,
Company: `Blondesddsl père et fils`,
ContactName: `Frédérique Citeaux`,
ContactTitle: `Marketing Manager`,
Address: `24, place Kléber`,
City: `Strasbourg`,
Region: `East`,
PostalCode: 67000,
Country: `France`,
Phone: `88.60.15.31`,
Fax: `88.60.15.32`
}),
new CustomersDataItem(
{
ID: `BOLID`,
Company: `Bólido Comidas preparadas`,
ContactName: `Martín Sommer`,
ContactTitle: `Owner`,
Address: `C/ Araquil, 67`,
City: `Madrid`,
Region: `East`,
PostalCode: 28023,
Country: `Spain`,
Phone: `(91) 555 22 82`,
Fax: `(91) 555 91 99`
}),
new CustomersDataItem(
{
ID: `BONAP`,
Company: `Bon app'`,
ContactName: `Laurence Lebihan`,
ContactTitle: `Owner`,
Address: `12, rue des Bouchers`,
City: `Marseille`,
Region: `West`,
PostalCode: 13008,
Country: `France`,
Phone: `91.24.45.40`,
Fax: `91.24.45.41`
}),
new CustomersDataItem(
{
ID: `BOTTM`,
Company: `Bottom-Dollar Markets`,
ContactName: `Elizabeth Lincoln`,
ContactTitle: `Accounting Manager`,
Address: `23 Tsawassen Blvd.`,
City: `Tsawassen`,
Region: `BC`,
PostalCode: 28000,
Country: `Canada`,
Phone: `(604) 555-4729`,
Fax: `(604) 555-3745`
}),
new CustomersDataItem(
{
ID: `BSBEV`,
Company: `B's Beverages`,
ContactName: `Victoria Ashworth`,
ContactTitle: `Sales Representative`,
Address: `Fauntleroy Circus`,
City: `London`,
Region: `South`,
PostalCode: 10000,
Country: `UK`,
Phone: `(171) 555-1212`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CACTU`,
Company: `Cactus Comidas para llevar`,
ContactName: `Patricio Simpson`,
ContactTitle: `Sales Agent`,
Address: `Cerrito 333`,
City: `Buenos Aires`,
Region: `East`,
PostalCode: 1010,
Country: `Argentina`,
Phone: `(1) 135-5555`,
Fax: `(1) 135-4892`
}),
new CustomersDataItem(
{
ID: `CENTC`,
Company: `Centro comercial Moctezuma`,
ContactName: `Francisco Chang`,
ContactTitle: `Marketing Manager`,
Address: `Sierras de Granada 9993`,
City: `México D.F.`,
Region: `South`,
PostalCode: 5022,
Country: `Mexico`,
Phone: `(5) 555-3392`,
Fax: `(5) 555-7293`
}),
new CustomersDataItem(
{
ID: `CHOPS`,
Company: `Chop-suey Chinese`,
ContactName: `Yang Wang`,
ContactTitle: `Owner`,
Address: `Hauptstr. 29`,
City: `Bern`,
Region: `East`,
PostalCode: 3012,
Country: `Switzerland`,
Phone: `0452-076545`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `COMMI`,
Company: `Comércio Mineiro`,
ContactName: `Pedro Afonso`,
ContactTitle: `Sales Associate`,
Address: `Av. dos Lusíadas, 23`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 34000,
Country: `Brazil`,
Phone: `(11) 555-7647`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `CONSH`,
Company: `Consolidated Holdings`,
ContactName: `Elizabeth Brown`,
ContactTitle: `Sales Representative`,
Address: `Berkeley Gardens 12 Brewery`,
City: `London`,
Region: `South`,
PostalCode: 27000,
Country: `UK`,
Phone: `(171) 555-2282`,
Fax: `(171) 555-9199`
}),
new CustomersDataItem(
{
ID: `DRACD`,
Company: `Drachenblut Delikatessen`,
ContactName: `Sven Ottlieb`,
ContactTitle: `Order Administrator`,
Address: `Walserweg 21`,
City: `Aachen`,
Region: `South`,
PostalCode: 52066,
Country: `Germany`,
Phone: `0241-039123`,
Fax: `0241-059428`
}),
new CustomersDataItem(
{
ID: `DUMON`,
Company: `Du monde entier`,
ContactName: `Janine Labrune`,
ContactTitle: `Owner`,
Address: `67, rue des Cinquante Otages`,
City: `Nantes`,
Region: `East`,
PostalCode: 44000,
Country: `France`,
Phone: `40.67.88.88`,
Fax: `40.67.89.89`
}),
new CustomersDataItem(
{
ID: `EASTC`,
Company: `Eastern Connection`,
ContactName: `Ann Devon`,
ContactTitle: `Sales Agent`,
Address: `35 King George`,
City: `London`,
Region: `East`,
PostalCode: 41000,
Country: `UK`,
Phone: `(171) 555-0297`,
Fax: `(171) 555-3373`
}),
new CustomersDataItem(
{
ID: `ERNSH`,
Company: `Ernst Handel`,
ContactName: `Roland Mendel`,
ContactTitle: `Sales Manager`,
Address: `Kirchgasse 6`,
City: `Graz`,
Region: `South`,
PostalCode: 8010,
Country: `Austria`,
Phone: `7675-3425`,
Fax: `7675-3426`
}),
new CustomersDataItem(
{
ID: `FAMIA`,
Company: `Familia Arquibaldo`,
ContactName: `Aria Cruz`,
ContactTitle: `Marketing Assistant`,
Address: `Rua Orós, 92`,
City: `Sao Paulo`,
Region: `SP`,
PostalCode: 27000,
Country: `Brazil`,
Phone: `(11) 555-9857`,
Fax: `(5) 555-3745`
}),
new CustomersDataItem(
{
ID: `FISSA`,
Company: `FISSA Fabrica Inter. Salchichas S.A.`,
ContactName: `Diego Roel`,
ContactTitle: `Accounting Manager`,
Address: `C/ Moralzarzal, 86`,
City: `Madrid`,
Region: `East`,
PostalCode: 28034,
Country: `Spain`,
Phone: `(91) 555 94 44`,
Fax: `(91) 555 55 93`
}),
new CustomersDataItem(
{
ID: `FOLIG`,
Company: `Folies gourmandes`,
ContactName: `Martine Rancé`,
ContactTitle: `Assistant Sales Agent`,
Address: `184, chaussée de Tournai`,
City: `Lille`,
Region: `South`,
PostalCode: 59000,
Country: `France`,
Phone: `20.16.10.16`,
Fax: `20.16.10.17`
}),
new CustomersDataItem(
{
ID: `FOLKO`,
Company: `Folk och fä HB`,
ContactName: `Maria Larsson`,
ContactTitle: `Owner`,
Address: `Åkergatan 24`,
City: `Bräcke`,
Region: `East`,
PostalCode: 36000,
Country: `Sweden`,
Phone: `0695-34 67 21`,
Fax: `0695 33-4455`
}),
new CustomersDataItem(
{
ID: `FRANK`,
Company: `Frankenversand`,
ContactName: `Peter Franken`,
ContactTitle: `Marketing Manager`,
Address: `Berliner Platz 43`,
City: `München`,
Region: `East`,
PostalCode: 80805,
Country: `Germany`,
Phone: `089-0877310`,
Fax: `089-0877451`
}),
new CustomersDataItem(
{
ID: `FRANR`,
Company: `France restauration`,
ContactName: `Carine Schmitt`,
ContactTitle: `Marketing Manager`,
Address: `54, rue Royale`,
City: `Nantes`,
Region: `South`,
PostalCode: 44000,
Country: `France`,
Phone: `40.32.21.21`,
Fax: `40.32.21.20`
}),
new CustomersDataItem(
{
ID: `FRANS`,
Company: `Franchi S.p.A.`,
ContactName: `Paolo Accorti`,
ContactTitle: `Sales Representative`,
Address: `Via Monte Bianco 34`,
City: `Torino`,
Region: `East`,
PostalCode: 10100,
Country: `Italy`,
Phone: `011-4988260`,
Fax: `011-4988261`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcGridComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
this._bind = () => {
grid.data = this.customersData;
}
this._bind();
}
private _customersData: CustomersData = null;
public get customersData(): CustomersData {
if (this._customersData == null)
{
this._customersData = new CustomersData();
}
return this._customersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.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-grid
name="grid"
id="grid"
id="grid"
primary-key="Company">
<igc-column-layout
hidden="true"
header="ID">
<igc-column
field="ID"
row-start="1"
col-start="1"
row-end="3"
filterable="false"
width="150px">
</igc-column>
</igc-column-layout>
<igc-column-layout
pinned="true"
header="Contact Details">
<igc-column
field="Company"
header="Company"
row-start="1"
col-start="1"
col-end="3"
sortable="true"
width="350px">
</igc-column>
<igc-column
field="ContactName"
header="Name"
row-start="2"
col-start="1"
col-end="2">
</igc-column>
<igc-column
field="ContactTitle"
header="Title"
row-start="2"
col-start="2"
col-end="3">
</igc-column>
</igc-column-layout>
<igc-column-layout
pinned="false"
header="Address Details">
<igc-column
field="Country"
row-start="1"
col-start="1"
col-end="3"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="Region"
row-start="1"
col-start="3"
col-end="5"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="PostalCode"
row-start="1"
col-start="5"
col-end="7"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="City"
row-start="2"
col-start="1"
col-end="4"
filterable="false"
width="220px">
</igc-column>
<igc-column
field="Address"
row-start="2"
col-start="4"
col-end="7">
</igc-column>
</igc-column-layout>
<igc-column-layout
header="Phone Details">
<igc-column
field="Phone"
row-start="1"
col-start="1"
col-end="2"
width="220px">
</igc-column>
<igc-column
field="Fax"
row-start="2"
col-start="1"
col-end="2"
width="220px">
</igc-column>
</igc-column-layout>
</igc-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#grid {
--ig-grid-cell-active-border-color: #ffcd0f;
--ig-grid-cell-selected-background: #6f6f6f;
--ig-grid-row-hover-background: #fde069;
--ig-grid-row-selected-background: #8d8d8d;
--ig-grid-header-background: #494949;
--ig-grid-header-text-color: #fff;
}
css
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.