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 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 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 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 tiene el módulo o las directivas Ignite UI for Angular Grid importados, puede comenzar a usar el igx-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.
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. 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
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 un prefijo implícito 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 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
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>
Cada una de las columnas de la cuadrícula se puede modelar por separado. La columna espera ng-template Angular directivas de módulo de cuadrícula.
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'};
Plantilla de encabezado
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.
Plantilla de celda
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 función Plantilla de celda Usando ngModel, debe llamar a los métodos de API adecuados para asegurarse de que el valor se actualice correctamente en la recopilación de datos subyacente de la cuadrícula de Angular. En el fragmento de código anterior, el ngModelChange La llamada pasa a través de la red API de edición y pasa a través de la tubería de edición de la cuadrícula, activando correctamente Transacciones (si corresponde) y el manejo de Resúmenes, selección etcetera. Sin embargo, esto ngModelChange se activará cada vez que cambie el valor de la celda, no solo cuando el usuario haya terminado de editar, lo que resultará en 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 enlazados con [(ngModel)] y no se controla el cambio de valor, el nuevo valor no se actualizará correctamente en la fuente de datos subyacente de la cuadrícula de Angular. Cuando se trata de 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 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 la 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 de acuerdo con la cuadrícula locale (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 OrderDate columna respetará solo las format propiedades y timezone, mientras que solo UnitPrice respetará las digitsInfo. Para obtener más información, consulte la documentación oficial del Angular en Localización de la 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 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';
Estamos importando el Injectable decorador, que es un ingrediente esencial en todas las definiciones de servicio Angular. Nos HttpClient proporcionará la funcionalidad para comunicarnos con los servicios de backend. Devuelve un Observable resultado al que nos suscribiremos en nuestro componente de cuadrícula.
Nota: Antes de Angular 5 se HttpClient encontraba en @angular/http y se nombraba Http.
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 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
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 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 renderizar, manipular y preservar registros de datos, tener acceso a cada registro de datos le brinda la oportunidad de personalizar el enfoque de su manejo. La data propiedad 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)
Su IgxGridComponent diseño le permite aprovechar la función de fusión de eventos que Angular ha introducido. Esta característica permite mejorar el rendimiento en 20% términos de interacciones y capacidad de respuesta. Esta característica se puede habilitar en el nivel de la aplicación simplemente estableciendo las ngZoneEventCoalescing propiedades y ngZoneRunCoalescing en true el bootstrapModule método:
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 a otras partes de una aplicación Angular con las IgxGridComponent que 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