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 filtrados básicos y de estilo Excel, clasificación de datos en vivo, así como el uso de resúmenes de cuadrículas y plantillas de celdas que incluyen nuestro componente Sparkline, el componente Indicador de progreso circular. e Iconos. La demostración también incluye paginación personalizada y parte de uso por página de Angular Pagination.
Getting Started with Ignite UI for Angular Data Grid
Note
Este componente puede utilizar el HammerModule opcionalmente. Se puede importar en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.
Para comenzar con 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 a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxGridModule en su archivo app.module.ts.
// app.module.ts
import { IgxGridModule } from 'igniteui-angular';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxGridModule,
...
]
})
export class AppModule {}
Alternativamente, a partir de 16.0.0, puede importar IgxGridComponent como una dependencia independiente o usar el token IGX_GRID_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
// 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 ha importado la Ignite UI for Angular Grid, puede comenzar a usar el componente igx-grid.
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.
La propiedad autoGenerate le dice a igx-grid que genere automáticamente los IgxColumnComponent de la grilla en función de los campos de la fuente de datos. También intentará deducir el tipo de datos apropiado para la columna, si es posible. Los desarrolladores también pueden definir explícitamente las columnas y la asignación a los campos de la 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. Se espera que cualquier aplicación moderna actual siga un enfoque de diseño web responsivo, lo que significa que puede ajustar elegantemente el diseño de los elementos HTML según el tamaño del dispositivo o simplemente cambiando el tamaño del navegador. Un diseño de cuadrícula de arranque Angular era el enfoque más utilizado en el pasado, pero un sistema de diseño basado en flexibilidad como la cuadrícula CSS se ha vuelto más popular, ya que funciona en cualquier navegador. La Ignite UI for Angular permite el flujo vertical y horizontal, incluido el ajuste, justificación y alineación de contenido/texto. La Ignite UI for Angular grid admite un diseño responsivo mediante CSS, lo que le brinda la máxima flexibilidad en el comportamiento de la cuadrícula al cambiar el tamaño.
Angular Grid Styling Configuration
Note
IgxGridComponent utiliza un diseño de cuadrícula CSS, que no es compatible con IE sin prefijos, por lo que no se representará correctamente.
En Angular la mayoría de los estilos tienen prefijos implícitos gracias al complemento Autoprefixer.
Para prefijar diseños de cuadrícula sin embargo, es necesario habilitar el Prefijo automático propiedad de cuadrícula con el comentario /* autoprefixer grid:on */.
Para facilitar su trabajo, aplique el comentario en el archivo src/styles.scss.
// 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 única llamada al servidor, o puede realizar operaciones de edición/actualización de cuadrícula a medida que ocurren con las interacciones de la cuadrícula. Además de una excelente experiencia para desarrolladores como cuadrícula Angular editable con operaciones CRUD, la cuadrícula Angular incluye navegación con teclado similar a Excel. Se incluye 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
IgxColumnComponent se utiliza para definir la colección columns de la cuadrícula y para habilitar funciones por columna como clasificación y filtrado. También se encuentran disponibles plantillas de celdas, encabezados y pies de página.
Defining Columns
Desactivemos la propiedad autoGenerate y definamos 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>
Se puede crear una plantilla para cada una de las columnas de la cuadrícula por separado. La columna espera directivas del módulo de cuadrícula Angular ng-template.
También expone entradas additionalTemplateContext que se pueden usar para propiedades personalizadas y cualquier tipo de contexto de datos que desee pasar a la columna misma:
<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'};
Header Template
igxHeader apunta al encabezado de la columna proporcionando como contexto el propio objeto de la 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.
Cell Template
igxCell aplica la plantilla proporcionada a todas las celdas de la columna. El objeto de contexto proporcionado en la plantilla consta del valor de celda proporcionado implícitamente y el propio objeto de celda. Se puede utilizar para definir una plantilla donde las celdas pueden 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 proporcionado implícitamente. Esto es suficiente si solo desea presentar algunos datos y tal vez aplicar algún estilo personalizado o transformaciones de canalización sobre el valor de la celda. Sin embargo, aún más útil es tomar la instancia CellType 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 celda usando ngModel, debe llamar a los métodos API apropiados para asegurarse de que el valor se actualice correctamente en la recopilación de datos subyacente de la cuadrícula Angular. En el fragmento anterior, la llamada ngModelChange pasa a través de la API de edición de la grilla y pasa por el proceso de edición de la grilla, activando adecuadamente las transacciones (si corresponde) y manejando resúmenes, selecciones, etc. Sin embargo, este ngModelChange se activará cada vez que el valor del cambios de celda, no solo cuando el usuario termina de editar, lo que genera muchas más llamadas a la API.
Note
La cuadrícula expone un manejo predeterminado para tipos de columnas numéricas, de cadena, de fecha y booleanas. Por ejemplo, la columna mostrará un ícono check o close, en lugar de verdadero/falso de forma predeterminada, para el tipo de columna booleana.
Si los datos de una celda están vinculados con [(ngModel)] y el cambio de valor no se maneja, el nuevo valor no se actualizará correctamente en la fuente de datos subyacente de la cuadrícula Angular. Cuando se trata de editar 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 celda también garantiza que el editValue de la celda pasará correctamente por el ciclo de eventos de edición de la cuadrícula.
Cell Editing Template
La columna también acepta una última plantilla que se utilizará cuando una celda esté en modo de edición. Al igual que con las otras plantillas de columnas, el objeto de contexto proporcionado es nuevamente el valor de la celda y el objeto de la celda en sí. Por supuesto, para que la plantilla en modo de edición sea accesible para los usuarios finales, debe establecer la propiedad editable de IgxColumnComponent en true.
<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úrese de verificar la API de CellType para acostumbrarse a las propiedades proporcionadas que puede usar en sus plantillas.
Column Template API
Cada una de las plantillas de columna se puede cambiar mediante programación en cualquier momento a través del propio objeto IgxColumnComponent. 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 plantillas mismas y luego, según alguna condición, representaremos la plantilla apropiada 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 se pueden establecer en el código del evento columnInit 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 columna de fecha, numérico, moneda y porcentaje se transforman a través de Angular DatePipe, DecimalPipe, CurrencyPipe y PercentPipe en consecuencia. Esto no modifica el valor original, solo el valor que se muestra en la columna. Por lo tanto, tenga en cuenta que todas las operaciones y manipulaciones de datos se realizan en función de los valores de su fuente de datos. De forma predeterminada, los valores se mostrarán según la locale de la cuadrícula (si no se especifica, recurre a la configuración regional de la aplicación, que de forma predeterminada es '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, el valor predeterminado es'mediumDate', equivalente a'MMM d, y'timezone: el desplazamiento de la zona horaria para las fechas. De forma predeterminada utiliza la zona horaria del sistema local del usuario final.digitsInfo: objetos de representación decimal. Por defecto es'1.0-3'
Para permitir personalizar el formato de visualización mediante estos parámetros, se expone la entrada pipeArgs. Una columna respetará solo las propiedades correspondientes para su tipo de datos, si se establece pipeArgs. 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>
La columna OrderDate respetará solo las propiedades format y timezone, mientras que UnitPrice solo respetará digitsInfo. Para obtener más detalles, consulte la documentación oficial Angular en Localización de su aplicación.
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 matrices.
Si utiliza columnas autoGenerate, las claves de datos deben ser idénticas.
Angular Grid Data Binding
Antes de continuar con la cuadrícula, queremos cambiar la cuadrícula 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 recuperación de datos en un servicio de datos independiente, por lo que crearemos un servicio que se encargará de la recuperació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';
Estamos importando el decorador Injectable, que es un ingrediente esencial en cada definición de servicio Angular. HttpClient nos proporcionará la funcionalidad para comunicarnos con los servicios backend. Devuelve un Observable de algún resultado al que nos suscribiremos en nuestro componente de grilla.
Nota: antes de Angular 5 HttpClient estaba ubicado en @angular/http y se llamaba Http.
Dado que recibiremos una respuesta JSON que contiene una serie de registros, también podemos ayudarnos especificando qué tipo de datos esperamos que se devuelvan en el observable definiendo una interfaz con la forma correcta. Siempre se recomienda la verificación de tipos y puede ahorrarle algunos 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 simple y consta de un método: fetchData que devolverá un Observable<NorthwindRecord[]>. En los casos en que la solicitud falla por cualquier motivo (servidor no disponible, error de red, etc.), HttpClient devolverá un error. Aprovecharemos el operador catchError que intercepta un Observable que falló y pasa el error a un controlador de errores. Nuestro controlador 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úrese de importar tanto HttpClientModule como nuestro servicio en el módulo de la 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. El enlace del ciclo de vida ngOnInit es un buen lugar para enviar la solicitud inicial.
Nota: en el código siguiente, es posible que se pregunte por qué configuramos la propiedad de registros en una matriz vacía antes de suscribirnos al servicio. La solicitud Http es asincrónica y, hasta que se complete, la propiedad de registros no estará definida, lo que generará un error cuando la cuadrícula intente vincularse a ella. Debe inicializarlo con un valor predeterminado o utilizar un BehaviorSubject.
// 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 grid autoGenerate al vincular datos remotos. Se supone que los datos están disponibles para inspeccionarlos y generar las columnas apropiadas. Por lo general, este no es el caso hasta que el servicio remoto responde y la red arroja un error. Hacer que autoGenerate esté disponible, cuando se vincula al servicio remoto, está en nuestra hoja de ruta para versiones futuras.
Complex Data Binding
IgxGridComponent admite la vinculación a objetos complejos (incluido el anidamiento a más de un nivel) a través de una "ruta" 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 grillas no admiten este tipo de enlace para las propiedades primary key, foreign key y child key cuando corresponda.
Una forma alternativa de vincular datos complejos o visualizar datos compuestos (de más de una columna) en IgxGrid es utilizar una plantilla de cuerpo personalizada para la columna. Generalmente, uno puede: - usar el value de la celda que contiene los datos anidados - usar el objeto cell en la plantilla, desde el cual acceder a row.data y, por lo tanto, recuperar cualquier valor de él, es decir, cell.row.data[field] y cell.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 planos es similar al que ya describimos anteriormente, pero en lugar del valor de la celda usaremos la propiedad data de IgxGridRow.
Dado que la cuadrícula Angular es un componente para representar, manipular y preservar registros de datos, tener acceso a cada registro de datos le brinda la oportunidad de personalizar el enfoque para manejarlo. La propiedad data le brinda 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 de estado es más fácil que nunca utilizando la nueva directiva IgxGridState incorporada.
Dimensionamiento
Consulte el tema Tamaño de la cuadrícula.
Performance (Experimental)
El diseño de IgxGridComponent le permite aprovechar la función Event Coalescing que ha introducido Angular. Esta característica permite un rendimiento mejorado con aproximadamente un 20% en términos de interacciones y capacidad de respuesta. Esta característica se puede habilitar a nivel de aplicación simplemente configurando las propiedades ngZoneEventCoalescing y ngZoneRunCoalescing en true en el método bootstrapModule:
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
.catch(err => console.error(err));
Note
Esto todavía se encuentra en una función experimental para IgxGridComponent. Esto significa que puede haber algunos comportamientos inesperados en el Grid. En caso de encontrar algún comportamiento de este tipo, contáctenos en nuestra página de Github.
Note
Habilitarlo puede afectar otras partes de una aplicación Angular con las que IgxGridComponent no 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
igxGrid usa la directiva igxForOf internamente, por lo tanto, todas las limitaciones igxForOf son válidas para igxGrid. Para obtener más detalles, consulte la sección 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