Descripción general del componente Angular Data Grid
Angular Data Grid Example
Maratón de Boston 2021: en este ejemplo de cuadrícula angular, puede ver cómo los usuarios pueden realizar filtros básicos y de estilo Excel, ordenar datos en vivo y usar resúmenes de cuadrícula y plantillas de celdas que incluyen nuestro componente Sparkline, el componente Circular Progress Indicator e íconos. La demostración también incluye paginación personalizada y la parte de uso por página de Angular Pagination.
Getting Started with Ignite UI for Angular Data Grid
Note
Este componente puede utilizar elHammerModule opcional. Puede importarse en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.
Para empezar a utilizar el componente Ignite UI for Angular Data Grid, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importarlosIgxGridModule en tu archivo app.module.ts.
// app.module.ts
import { IgxGridModule } from 'igniteui-angular/grids/grid';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxGridModule,
...
]
})
export class AppModule {}
Alternativamente,16.0.0 puedes importarlosIgxGridComponent como una dependencia independiente, o usar elIGX_GRID_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
// import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-grid [data]="localData" [autoGenerate]="true"></igx-grid>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_GRID_DIRECTIVES]
/* or imports: [IgxGridComponent] */
})
export class HomeComponent {
public data: Product [];
}
Ahora que tienes importados el módulo o directivas de Ignite UI for Angular Grid, puedes empezar a usar eligx-grid componente.
Using the Angular Data Grid
<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>
La propiedad de datos vincula la cuadrícula, en este caso a una matriz local de objetos.
LaautoGenerate propiedad indica queigx-grid generen automáticamente los s deIgxColumnComponent la cuadrícula basándose en los campos fuente de datos. También intentará deducir el tipo de dato adecuado para la columna si es posible. Los desarrolladores también pueden definir explícitamente las columnas y el mapeo a los campos fuente de datos.
Angular Bootstrap Grid Definition
Ignite UI for Angular incluye una potente cuadrícula de arranque como un sistema de diseño basado en flex. Hoy en día, se espera que cualquier aplicación moderna siga un enfoque de diseño web receptivo, lo que significa que puede ajustar con gracia el diseño de los elementos HTML en función del tamaño del dispositivo o simplemente cambiando el tamaño del navegador. Un diseño de cuadrícula de arranque Angular fue el enfoque más utilizado en el pasado, pero un sistema de diseño basado en flex como CSS grid se ha vuelto más popular, ya que funciona en cualquier navegador. La Directiva de diseño Ignite UI for Angular permite el flujo vertical y horizontal, incluido el ajuste de contenido/texto, la justificación y la alineación. La cuadrícula Ignite UI for Angular admite un diseño receptivo mediante CSS, lo que le brinda la máxima flexibilidad en cómo se comporta la cuadrícula al cambiar el tamaño.
Angular Grid Styling Configuration
Note
UtilizaIgxGridComponent una disposición de cuadrícula css, que no está soportada en IE sin prefijos, por lo que no se renderizará correctamente.
En Angular la mayoría de los estilos tienen un prefijo implícito gracias al complemento Autoprefixer.
Sin embargo, para prefijar la disposición de la cuadrícula, necesitas activar la propiedad de la cuadrícula Autoprefijador junto con el comentario/* autoprefixer grid:on */.
Para facilitar tu trabajo, aplica el comentario en elsrc/styles.scss archivo.
// src/styles.scss
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
/* autoprefixer grid:on */
@include theme($default-palette);
Editable Grid Angular
Cada operación para la edición de cuadrícula Angular incluye operaciones por lotes, lo que significa que la API le brinda la opción de agrupar las ediciones en una sola llamada al servidor, o puede realizar operaciones de edición / actualización de cuadrícula a medida que ocurren con las interacciones de cuadrícula. Junto con una gran experiencia de desarrollador como una cuadrícula de Angular editable con operaciones CRUD, la cuadrícula de Angular incluye navegación por teclado similar a la de Excel. Se incluye la navegación de cuadrícula predeterminada común, además de la opción de anular cualquier opción de navegación para satisfacer las necesidades de sus clientes. Una cuadrícula editable en Angular con un excelente esquema de navegación es fundamental para cualquier aplicación de línea de negocio moderna, con la cuadrícula Ignite UI lo hacemos fácil.
Después de este tema, aprenderá más sobre la plantilla de celdas y la plantilla de edición de celdas y la edición.
Angular Grid Column Configuration
IgxColumnComponentse utiliza para definir la colección decolumns la cuadrícula y para habilitar características por columna como ordenación y filtrado. También están disponibles plantillas de celda, encabezado y pie de página.
Defining Columns
Vamos a desactivar laautoGenerate propiedad y definir la colección de columnas en el marcado:
<igx-grid #grid1 [data]="data | async" [autoGenerate]="false" (columnInit)="initColumns($event)"
(selected)="selectCell($event)" [allowFiltering]="true">
<igx-column field="Name" [sortable]="true" header=" "></igx-column>
<igx-column field="AthleteNumber" [sortable]="true" header="Athlete number" [filterable]="false"></igx-column>
<igx-column field="TrackProgress" header="Track progress" [filterable]="false">
<ng-template igxCell let-value>
<igx-linear-bar [stripped]="false" [value]="value" [max]="100"></igx-linear-bar>
</ng-template>
</igx-column>
<igx-paginator [perPage]="6">
</igx-paginator>
</igx-grid>
Cada una de las columnas de la cuadrícula puede ser plantillada por separado. La columna esperang-template Angular directivas de módulos de cuadrícula.
También exponeadditionalTemplateContext entradas que pueden usarse para propiedades personalizadas y cualquier tipo de contexto de datos que quieras pasar a la columna:
<igx-column [additionalTemplateContext]="contextObject">
<ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
{{ props.firstProperty }}
</ng-template>
</igx-column>
public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1'};
Plantilla de encabezado
igxHeaderapunta a la cabecera de columna proporcionando como contexto el propio objeto columna.
...
<igx-column field="Name">
<ng-template igxHeader let-column>
{{ column.field | uppercase }}
</ng-template>
</igx-column>
...
Note
Siempre que se utiliza una plantilla de encabezado junto con la funcionalidad de agrupar/mover, el área del encabezado de la columna se puede arrastrar y no se puede acceder a la parte de elementos personalizados de la plantilla de encabezado hasta que los marque como no arrastrables. Ejemplo a continuación.
<igx-column #col field="ProductName" header="Product Name"
[groupable]="true" [hasSummary]="true">
<ng-template igxHeader let-col>
<div class="text">{{col.field}}</div>
<igx-icon (click)="toggleSummary(col)" [attr.draggable]="false">functions
</igx-icon>
</ng-template>
</igx-column>
Como puede ver, estamos agregando un atributo arrastrable establecido en false.
Plantilla de celda
igxCellaplica la plantilla proporcionada a todas las celdas de la columna. El objeto de contexto proporcionado en la plantilla consiste en el valor de celda proporcionado implícitamente y el propio objeto celda. Puede usarse para definir una plantilla donde las células puedan crecer según su contenido, como en el siguiente ejemplo.
...
<igx-column field="Name">
<ng-template igxCell let-value>
{{ value | titlecase }}
</ng-template>
</igx-column>
...
En el fragmento anterior "tomamos" una referencia al valor de celda implícitamente proporcionado. Esto es suficiente si solo quieres presentar algunos datos y quizá aplicar algún estilo personalizado o transformaciones de tubería sobre el valor de la celda. Sin embargo, aún más útil es tomar laCellType instancia en sí, como se muestra a continuación:
<igx-grid #grid [data]="data">
<igx-column dataType="string" field="Name">
<ng-template igxCell let-cell="cell">
<!-- Implement row deleting inside the cell template itself -->
<span tabindex="0" (keydown.delete)="grid.deleteRow(cell.row.index)">{{ cell.value | titlecase }}</span>
</ng-template>
</igx-column>
<igx-column dataType="boolean" field="Subscribtion">
<ng-template igxCell let-cell="cell">
<!-- Bind the cell value through the ngModel directive and update the data source when the value is changed in the template -->
<input type="checkbox" [ngModel]="cell.value" (ngModelChange)="cell.update($event)" />
</ng-template>
</igx-column>
<igx-grid>
Al cambiar datos a través de la plantilla de celdasngModel, necesitas llamar a los métodos API apropiados para asegurarte de que el valor se actualiza correctamente en la colección de datos subyacente de la Angular grid. En el fragmento anterior, langModelChange llamada pasa por la API de edición de la cuadrícula y por la cadena de edición de la cuadrícula, activando correctamente las transacciones (si procede) y gestionando resúmenes, selección, etc. Sin embargo, estongModelChange se activa cada vez que cambie el valor de la celda, no solo cuando el usuario termine de editar, lo que resulta en muchas más llamadas a la API.
Note
La cuadrícula muestra una gestión predeterminada para números, cadenas, fechas y tipos de columna booleanas. Por ejemplo, la columna mostrarácheck unclose icono, en lugar de verdadero/falso por defecto, para el tipo de columna booleana.
Si los datos en una celda están vinculados con[(ngModel)] y el cambio de valor no se gestiona, el nuevo valor no se actualizará correctamente en la fuente de datos subyacente de la Angular cuadrícula. Al trabajar con la edición de celdas con una plantilla personalizada, se recomienda encarecidamente utilizar la plantilla de edición de celdas de la celda.
Cuando se implementa correctamente, la plantilla de edición de celdas también garantiza que las celdaseditValue pasen correctamente por el ciclo de eventos de edición en cuadrícula.
Cell Editing Template
La columna también acepta una última plantilla que se usará cuando una celda esté en modo edición. Como con las otras plantillas de columna, el objeto de contexto proporcionado es de nuevo el valor de la celda y el propio objeto celda. Por supuesto, para que la plantilla de modo de edición sea accesible para los usuarios finales, necesitas establecer laeditable propiedad de toIgxColumnComponenttrue.
<igx-column dataType="number" editable="true" field="Price">
<ng-template igxCellEditor let-cell="cell">
<label for="price">
Enter the new price tag
</label>
<input name="price" type="number" [(ngModel)]="cell.editValue" />
</ng-template>
</igx-column>
Asegúrate de revisar la APICellType para acostumbrarte a las propiedades que puedes usar en tus plantillas.
Column Template API
Cada una de las plantillas de columna puede cambiarse programáticamente en cualquier punto a través delIgxColumnComponent propio objeto. Por ejemplo, en el código siguiente, hemos declarado dos plantillas para nuestros datos de usuario. En nuestro código TypeScript obtendremos referencias a las propias plantillas y, según alguna condición, renderizaremos la plantilla correspondiente para la columna en nuestra aplicación.
<igx-grid>
<!-- Column declarations -->
</igx-grid>
<ng-template #normalView let-value>
<div class="user-details">{{ val }}</div>
<user-details-component></user-details-component>
</ng-template>
<ng-template #smallView let-value>
<div class="user-details-small">{{ val }}</div>
</ng-template>
@ViewChild("normalView", { read: TemplateRef })
public normalView: TemplateRef<any>;
@ViewChild("smallView", { read: TemplateRef })
public smallView: TemplateRef<any>;
....
const column = this.grid.getColumnByName("User");
// Return the appropriate template based on some conditiion.
// For example saved user settings, viewport size, etc.
column.bodyTemplate = this.smallView;
Las propiedades de las columnas también pueden establecerse en el código en elcolumnInit evento que se emite cuando las columnas se inicializan en la cuadrícula.
public initColumns(column: IgxGridColumn) {
const column: IgxColumnComponent = column;
if (column.field === 'ProductName') {
column.sortable = true;
column.editable = true;
}
}
El código anterior hará que la columna ProductName se pueda ordenar y editar y creará una instancia de la interfaz de usuario de las funciones correspondientes (como entradas para editar, etc.).
Custom Display Format
Todos los valores de una fecha, número, moneda y columna porcentual se transforman a través del AngularDatePipe yDecimalPipeCurrencyPipePercentPipe en consecuencia. Esto no modifica el valor original, solo el valor que se muestra en la columna. Así que ten en cuenta que todas las operaciones y manipulaciones de datos se realizan en función de los valores de tu fuente de datos. Por defecto, los valores se mostrarán según la cuadrículalocale (si no se especifica, se remite a la localización de la aplicación, que por defecto es así'en-US').
Consulte Configurar la configuración regional de su aplicación para obtener más detalles.
Además, existen parámetros opcionales para formatear:
format- determina qué partes de fecha/hora se muestran, por defecto'mediumDate', equivalentes a'MMM d, y'timezone- el desplazamiento de zona horaria para fechas. Por defecto utiliza la zona horaria local del sistema del usuario finaldigitsInfo- objetos de representación decimal. Por defecto a'1.0-3'
Para permitir la personalización del formato de visualización mediante estos parámetros, se expone lapipeArgs entrada. Una columna solo respetará las propiedades correspondientes a su tipo de dato, sipipeArgs está establecido. Ejemplo:
const pipeArgs: IColumnPipeArgs = {
format: 'longDate',
timezone: 'UTC',
digitsInfo: '1.1-2'
}
<igx-column field="OrderDate" dataType="date" [pipeArgs]="pipeArgs"></igx-column>
<igx-column field="UnitPrice" dataType="number" [pipeArgs]="pipeArgs"></igx-column>
LaOrderDate columna respetará solo lasformat propiedades ytimezone y , mientras que soloUnitPrice respetará ladigitsInfo. Para más detalles, consulta la documentación oficial Angular en Localización de tu app.
Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.
Angular Grid Data Structure
IgxGridComponent maneja datos planos y POJO anidados (objetos Java antiguos y simples). La estructura de datos específica para la representación tiene la forma:
const OBJECT_ARRAY = [{
ObjectKey1: value1,
ObjectKey2: value2,
.
.
.
ObjectKeyN: valueN
},
.
.
.
}];
const POJO = [{
ObjectKey1: value1,
ObjectKey2: value2,
.
.
.
ObjectKeyN: {
ObjectKeyN1: value1,
ObjectKeyN2: value2,
.
.
.
ObjectKeyNM: valueNM,
}
},
.
.
.
}];
Warning
Los valores clave no deben contener arrays. Si usas autoGenerate columnas, las claves de datos deben ser idénticas.
Angular Grid Data Binding
Antes de seguir adelante con la cuadrícula, queremos cambiar la cuadrícula de Angular para vincularla al servicio de datos remoto, que es el escenario común en aplicaciones a gran escala. Una buena práctica es separar toda la lógica relacionada con la obtención de datos en un servicio de datos separado, por lo que vamos a crear un servicio que se encargará de la obtención de datos del servidor.
Implementemos nuestro servicio en un archivo separado.
// northwind.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map } from 'rxjs/operators';
Importamos alInjectable decorador, que es un ingrediente esencial en la definición de cualquier Angular servicio. NosHttpClient proporcionarán la funcionalidad para comunicarnos con los servicios de backend. Devuelve unObservable resultado al que suscribiremos en nuestro componente de cuadrícula.
Nota: Antes del 5HttpClient de Angular se encontraba y@angular/http tenía nombreHttp.
Como recibiremos una respuesta JSON que contiene un array de registros, bien podemos ayudarnos especificando qué tipo de datos esperamos que se devuelvan en el observable definiendo una interfaz con la forma correcta. Siempre se recomienda comprobar el tipo y puede ahorrarte dolores de cabeza en el futuro.
// northwind.service.ts
export interface NorthwindRecord {
ProductID: number;
ProductName: string;
SupplierID: number;
CategoryID: number;
QuantityPerUnit: string;
UnitPrice: number;
UnitsInStock: number;
UnitsOnOrder: number;
ReorderLevel: number;
Discontinued: boolean;
CategoryName: string;
}
El servicio en sí es bastante sencillo y consiste en un método:fetchData que devolverá unObservable<NorthwindRecord[]>. En casos en que la solicitud falle por cualquier motivo (servidor no disponible, error de red, etc.), devolveránHttpClient un error. Aprovecharemos elcatchError operador que intercepta un observable que falló y pasa el error a un gestor de errores. Nuestro gestor de errores registrará el error y devolverá un valor seguro.
// northwind.service.ts
@Injectable()
export class NorthwindService {
private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products';
constructor(private http: HttpClient) {}
public fetchData(): Observable<NorthwindRecord[]> {
return this.http
.get(this.url)
.pipe(
map(response => response['value']),
catchError(
this.errorHandler('Error loading northwind data', [])
)
);
}
private errorHandler<T>(message: string, result: T) {
return (error: any): Observable<any> => {
console.error(`${message}: ${error.message}`);
return of(result as T);
};
}
}
Asegúrate de importar tanto elHttpClientModule servicio como nuestro en el módulo de aplicación y registrar el servicio como proveedor.
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
import { NorthwindService } from './northwind.service';
@NgModule({
imports: [
...
HttpClientModule
...
],
providers: [
NorthwindService
]
})
export class AppModule {}
Después de implementar el servicio, lo inyectaremos en el constructor de nuestro componente y lo usaremos para recuperar los datos. ElngOnInit gancho de ciclo de vida es un buen lugar para enviar la solicitud inicial.
Nota: En el código de abajo, puede que te preguntes por qué estamos configurando la propiedad de registros en un array vacío antes de suscribirte al servicio. La petición Http es asíncrona y, hasta que se complete, la propiedad de registros quedará indefinida, lo que resultará en un error cuando la cuadrícula intente vincularse a ella. Deberías inicializarlo con un valor por defecto o usar unBehaviorSubject
// my.component.ts
@Component({...})
export class MyComponent implements OnInit {
public records: NorthwindRecord[];
constructor(private northwindService: NorthwindService) {}
ngOnInit() {
this.records = [];
this.northwindService.fetchData().subscribe((records) => this.records = records);
}
}
y en la plantilla del componente:
<igx-grid [data]="records">
<igx-column field="ProductId"></igx-column>
<!-- rest of the column definitions -->
...
</igx-grid>
Nota: Por ahora, es mejor evitar la propiedad de la cuadrículaautoGenerate al vincular a datos remotos. Asume que los datos están disponibles para inspeccionarlos y generar las columnas adecuadas. Esto normalmente no ocurre hasta que responde el servicio remoto y la red genera un error. PonerautoGenerate a disposición, cuando vincula a servicio remoto, está en nuestra hoja de ruta para futuras versiones.
Complex Data Binding
El IgxGridComponent soporta vinculación a objetos complejos (incluyendo anidamiento a más profundidad de un nivel) a través de un "camino" de propiedades en el registro de datos.
Eche un vistazo al siguiente modelo de datos:
interface AminoAcid {
name: string;
abbreviation: {
short: string;
long: string;
}
weight: {
molecular: number;
residue: number;
},
formula: {
molecular: string;
residue: string;
}
...
}
Por ejemplo, para mostrar los pesos de un aminoácido dado en la cuadrícula, bastará con el siguiente fragmento
<igx-column field="weight.molecular"></igx-column>
<igx-column field="weight.residue"></igx-column>
Consulte el ejemplo a continuación para obtener información adicional. Este tipo de enlace admite todas las funciones predeterminadas que esperaría de la cuadrícula. Es decir, todas las operaciones de clasificación y filtrado funcionan de inmediato sin ninguna configuración adicional. Lo mismo ocurre con las operaciones de agrupación y edición con o sin transacciones, así como con la capacidad de crear plantillas para las celdas de la columna enlazada.
Warning
Las cuadrículas no admiten este tipo de vinculación paraprimary key yforeign keychild key propiedades cuando corresponde.
Una forma alternativa de vincular datos complejos, o de visualizar datos compuestos (de más de una columna) en IgxGrid es usar una plantilla de cuerpo personalizada para la columna. Generalmente, se puede: - usar elvalue de la celda que contiene los datos anidados - usar elcell objeto de la plantilla, desde el cual acceder a élrow.data, y así recuperar cualquier valor de él, escell.row.data[field] decir, ycell.row.data[field][nestedField]
e interpolar los de la plantilla.
<igx-column field="abbreviation.long" header="Long">
<ng-template igxCell let-cell="cell">
<div>
<div>
{{ cell.value }}
{{ cell.row.data['name'] }}
{{ cell.row.data['weight']['molecular'] }}
</div>
</div>
</ng-template>
</igx-column>
A continuación se muestran los datos que vamos a utilizar:
export const EMPLOYEE_DATA = [
{
Age: 55,
Employees: [
{
Age: 43,
HireDate: new Date(2011, 6, 3),
ID: 3,
Name: "Michael Burke",
Title: "Senior Software Developer"
},
{
Age: 29,
HireDate: new Date(2009, 6, 19),
ID: 2,
Name: "Thomas Anderson",
Title: "Senior Software Developer"
},
{
Age: 31,
HireDate: new Date(2014, 8, 18),
ID: 11,
Name: "Monica Reyes",
Title: "Software Development Team Lead"
},
{
Age: 35,
HireDate: new Date(2015, 9, 17),
ID: 6,
Name: "Roland Mendel",
Title: "Senior Software Developer"
}],
HireDate: new Date(2008, 3, 20),
ID: 1,
Name: "John Winchester",
Title: "Development Manager"
},
...
La plantilla personalizada para la columna, que representará los datos anidados:
...
<igx-column field="Employees" header="Employees" [cellClasses]="{ expand: true }" width="40%">
<ng-template #nestedDataTemp igxCell let-people let-cell="cell">
<div class="employees-container">
<igx-expansion-panel *ngFor="let person of people">
<igx-expansion-panel-header iconPosition="right">
<igx-expansion-panel-description>
{{ person.Name }}
</igx-expansion-panel-description>
</igx-expansion-panel-header>
<igx-expansion-panel-body>
<div class="description">
<igx-input-group (keydown)="stop($event)" style="--ig-size: var(--ig-size-small)">
<label igxLabel for="title">Title</label>
<input type="text" name="title" igxInput [(ngModel)]="person.Title" style="text-overflow: ellipsis;" />
</igx-input-group>
<igx-input-group (keydown)="stop($event)" style="--ig-size: var(--ig-size-small); width: 15%;">
<label igxLabel for="age">Age</label>
<input type="number" name="age" igxInput [(ngModel)]="person.Age" />
</igx-input-group>
</div>
</igx-expansion-panel-body>
</igx-expansion-panel>
</div>
</ng-template>
</igx-column>
...
Y el resultado de esta configuración es:
Working with Flat data
El enfoque de enlace de datos plano es similar al que ya hemos descrito, pero en lugar del valor de celda vamos a usar ladata propiedad de IgxGridRow.
Dado que la cuadrícula de Angular es un componente para renderizar, manipular y preservar registros de datos, tener acceso a cada registro de datos te da la oportunidad de personalizar el enfoque de su manejo. Ladata propiedad te ofrece esta oportunidad.
A continuación se muestran los datos que vamos a utilizar:
export const DATA: any[] = [
{
Address: "Obere Str. 57",
City: "Berlin",
CompanyName: "Alfreds Futterkiste",
ContactName: "Maria Anders",
ContactTitle: "Sales Representative",
Country: "Germany",
Fax: "030-0076545",
ID: "ALFKI",
Phone: "030-0074321",
PostalCode: "12209",
Region: null
},
...
]
La plantilla personalizada:
...
<igx-column field="Address" header="Address" width="25%" editable="true">
<ng-template #compositeTemp igxCell let-cell="cell">
<div class="address-container">
// In the Address column combine the Country, City and PostCode values of the corresponding data record
<span><strong>Country:</strong> {{cell.row.data.Country}}</span>
<br/>
<span><strong>City:</strong> {{cell.row.data.City}}</span>
<br/>
<span><strong>Postal Code:</strong> {{cell.row.data.PostalCode}}</span>
</div>
</ng-template>
</igx-column>
Tenga en cuenta que con la plantilla definida anteriormente no podrá realizar operaciones de edición, por lo que necesitamos una plantilla de editor.
<igx-column field="Address" header="Address" width="25%" editable="true">
<ng-template igxCellEditor let-cell="cell">
<div class="address-container">
<span>
<strong>Country:</strong> {{cell.row.data.Country}}
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.Country" />
</igx-input-group>
</span>
<br/>
<span><strong>City:</strong> {{cell.row.data.City}}</span>
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.City" />
</igx-input-group>
<br/>
<span><strong>Postal Code:</strong> {{cell.row.data.PostalCode}}</span>
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.PostalCode" />
</igx-input-group>
</div>
</ng-template>
</igx-column>
...
Y el resultado es:
Keyboard Navigation
La navegación con el teclado de Grid proporciona una rica variedad de interacciones con el teclado para el usuario. Mejora la accesibilidad y permite la navegación intuitiva a través de cualquier tipo de elementos internos (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). Consulte estos recursos para obtener más información:
- Navegación por teclado de cuadrícula
- Navegación con el teclado TreeGrid
- Navegación jerárquica por teclado en cuadrícula
- Publicación de blog: Mejora de la usabilidad, la accesibilidad y el cumplimiento de ARIA con la navegación con teclado Grid
Persistencia de estado
Lograr un marco de persistencia del estado es más fácil que nunca utilizando la nueva directiva incorporadaIgxGridState.
Dimensionamiento
Consulte el tema Tamaño de la cuadrícula.
Performance (Experimental)
ElIgxGridComponent diseño permite aprovechar la función de Fusión de Eventos que Angular ha introducido. Esta función permite mejorar el rendimiento aproximadamente20% en términos de interacciones y capacidad de respuesta. Esta función puede activarse a nivel de aplicación simplemente estableciendo lasngZoneEventCoalescing propiedades yngZoneRunCoalescing entrue elbootstrapModule método:
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
.catch(err => console.error(err));
Note
Esto sigue siendo una característica experimental para elIgxGridComponent. Esto significa que puede haber comportamientos inesperados en la Red. En caso de que te encuentres con algún comportamiento similar, por favor contáctanos en nuestra página de Github.
Note
Activarlo puede afectar a otras partes de una Angular aplicación con las que noIgxGridComponent está relacionado.
Known Limitations
| Limitación | Descripción |
|---|---|
Anchos de columna establecidos enpercentage ypx |
Actualmente no admitimos la combinación de anchos de columna con% ypx. |
Al intentar filtrar una columna de tiponumber |
Si un valor diferente anumber se ingresa en la entrada de filtrado,NaN se devuelve debido a una conversión incorrecta. |
Grid width does not depend on the column widths |
Elwidth de todas las columnas no determina la extensión de la cuadrícula en sí. Está determinado por las dimensiones del contenedor principal o por las dimensiones de la cuadrícula definida.width. |
| Cuadrícula anidada en el contenedor principal | Cuando la cuadrículawidth no está configurado y se coloca en un contenedor principal con dimensiones definidas, la cuadrícula se extiende hasta este contenedor. |
RedOnPush Estrategia de detección de cambios |
La red opera conChangeDetectionStrategy.OnPush Entonces, cada vez que aparezca alguna personalización, asegúrese de que se notifique a la cuadrícula sobre los cambios que ocurren. |
Las columnas tienen un ancho de columna mínimo permitido. Dependiendo del valor de [--ig-size] variable CSS, son los siguientes:"pequeño": 56px "medio": 64px "grande ": 80px |
Si se establece un ancho inferior al mínimo permitido, no afectará a los elementos renderizados. Se renderizarán con el ancho mínimo permitido para el correspondiente [--ig-size]. Esto puede provocar un comportamiento inesperado con la virtualización horizontal y, por lo tanto, no es compatible. |
| El alto de la fila no se ve afectado por el alto de las celdas que no se representan actualmente a la vista. | Debido a la virtualización, una columna con una plantilla personalizada (que cambia la altura de la celda) que no está en la vista no afectará la altura de la fila. La altura de la fila se verá afectada solo mientras la columna relacionada se desplaza en la vista. |
Note
igxGridusaigxForOf directiva interna, por lo que todasigxForOf las limitaciones son válidas paraigxGrid. Para más detalles, véase la sección de Problemas Conocidos de igxForOf.
API References
Theming Dependencies
- Tema IgxIcon
- Tema IgxInputGroup
- Tema IgxChip
- Tema IgxRipple
- Tema IgxButton
- Tema IgxOverlay
- Tema desplegable Igx
- Tema IgxCalendario
- Tema IgxSnackBar
- Tema IgxBadge
Tutorial video
Obtenga más información sobre cómo crear una cuadrícula de datos Angular en nuestro breve video tutorial:
Additional Resources
- Tamaño de cuadrícula
- Virtualización y rendimiento
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
- Tipos de datos de columna
- Cree operaciones CRUD con igxGrid
GitHub