Descripción general y configuración de la red de Blazor
La tabla de datos Ignite UI for Blazor / cuadrícula de datos es un componente de cuadrícula de Blazor tabular que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos Blazor en nuestra caja de herramientas incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles.
Las tablas Blazor están optimizadas para datos de transmisión en vivo, con la capacidad de manejar un tamaño ilimitado de conjunto de datos en un número de filas o columnas.
En este ejemplo de cuadrícula Ignite UI for Blazor, puede ver cómo los usuarios pueden realizar filtrados básicos y de estilo Excel, clasificación de datos en vivo y usar resúmenes de cuadrícula, así como plantillas de celdas. La demostración también incluye un conjunto de paginación para mostrar 10 elementos por página.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--ig-size: var(--ig-size-medium);
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridAutoGenerate="false"Id="grid"Name="grid"
@ref="grid"Data="NwindData"PrimaryKey="ProductID"AllowFiltering="true"FilterMode="FilterMode.ExcelStyleFilter"><IgbPaginatorPerPage="10"></IgbPaginator><IgbColumnField="ProductName"Header="Product Name"DataType="GridColumnDataType.String"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="UnitPrice"Header="Unit Price"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="UnitsInStock"Header="Units in Stock"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="OrderDate"Header="Order Date"DataType="GridColumnDataType.Date"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="Discontinued"Header="Discontinued"DataType="GridColumnDataType.Boolean"Sortable="true"HasSummary="true"Editable="true"BodyTemplateScript="WebGridBooleanCellTemplate"Name="column1"
@ref="column1"></IgbColumn><IgbColumnField="ReorderLevel"Header="Reorder Level"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Filterable="true"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbGrid grid;
private IgbColumn column1;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<imgsrc="https://static.infragistics.com/xplatform/images/grid/active.png"title="Continued"alt="Continued" />`
} else {
return html`<imgsrc="https://static.infragistics.com/xplatform/images/grid/expired.png"title="Discontinued"alt="Discontinued" />`;
}
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--ig-size: var(--ig-size-medium);
}
css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Introducción a Blazor Data Grid
dependencias
Para comenzar a utilizar Blazor Data Grid, primero debe instalar el paquete Blazor.
Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor:
La propiedad Id es un valor de cadena y es el identificador único de la cuadrícula que se generará automáticamente si no se proporciona, mientras que data vinculan la cuadrícula, en este caso a los datos locales.
La propiedad AutoGenerate le dice a la cuadrícula que genere automáticamente los componentes IgbColumn de la cuadrícula en función de los campos de origen de datos. También intentará deducir el tipo de datos apropiado para la columna si es posible. De lo contrario, el desarrollador debe definir explícitamente las columnas y la asignación a los campos de la fuente de datos.
Cuadrícula de Blazor editable
Cada operación de edición de cuadrícula incluye operaciones por lotes, lo que significa que la API le brinda la opción de agrupar 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 excelente experiencia para desarrolladores como cuadrícula editable con operaciones CRUD, la cuadrícula incluye navegación con 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 con un excelente esquema de navegación es fundamental para cualquier aplicación de línea de negocios moderna, con la cuadrícula Ignite UI lo hacemos fácil.
IgbColumn se usa para definir la colección de columnas de la cuadrícula y para habilitar funciones por columna como ordenar y filtrar. Las plantillas de celda, encabezado y pie de página también están disponibles.
Definición de columnas
Desactivemos la propiedad AutoGenerate y definamos la colección de columnas en el marcado:
La plantilla de encabezado se puede configurar para modificar los encabezados de las columnas. Los fragmentos a continuación le muestran cómo formatear el texto del encabezado en mayúsculas.
<IgbColumnField="Name"HeaderTemplateScript="UpperCaseTemplate" />
//In JavaScript:
igRegisterScript("UpperCaseTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`${this.formatUppercase(ctx.column.field)}`;
}, false)
function formatUppercase(value) {
return value.toUpperCase();
}
razor
Nota: Cada vez que se usa una plantilla de encabezado junto con la funcionalidad de agrupar/mover, el área del encabezado de la columna se puede arrastrar y no puede acceder a la parte de elementos personalizados de la plantilla de encabezado hasta que los marque como no arrastrables. Ejemplo a continuación.
<IgbColumnField="ProductName"Header="Product Name"Groupable=trueHasSummary=trueHeaderTemplateScript="ProductNameHeaderTemplate" />
//In JavaScript:
igRegisterScript("ProductNameHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<divclass="text">${ctx.column.field}</div><igc-iconname="functions"draggable="false"></igc-icon>
`;
}, false)
razor
Como puede ver, estamos agregando el atributo Draggable establecido en falso.
Plantilla de celda
Cuando se establece la plantilla de celda, cambia 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 de celda. Se puede usar para definir una plantilla en la que el texto de las celdas se podría formatear, por ejemplo, como título.
<IgbColumnField="Name"BodyTemplateScript="NameCellTemplate"/>
//In JavaScript:
igRegisterScript("NameCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`${this.formatTitleCase(ctx.implicit)}`;
}, false);
function formatTitleCase(value) {
return value.toUpperCase();
}
razor
En el fragmento de código 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 barra vertical sobre el valor de la celda. Sin embargo, aún más útil es tomar la Cell instancia en sí, como se muestra a continuación:
<IgbGridId="grid"AutoGenerate=false><IgbColumnField="Name"BodyTemplateScript="NameCellTemplate" /><IgbColumnField="Subscription"BodyTemplateScript="SubscriptionCellTemplate" /></IgbGrid>
//In JavaScript:
igRegisterScript("NameCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<spantabindex="0" @keyup=${(e) => this.deleteRow(e, ctx.cell.id.rowIndex)}> ${this.formatTitleCase(ctx.cell.value)}</span >
`;
}, false);
igRegisterScript("SubscriptionCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html` <inputtype="checkbox"checked /> `;
} else {
return html` <inputtype="checkbox"/> `;
}
}, false);
function deleteRow(e, rowIndex) {
if (e.code === "Delete") {
this.grid.deleteRow(rowIndex);
}
}
function formatTitleCase(value) {
return value.toUpperCase();
}
razor
Nota: la cuadrícula expone un manejo predeterminado para los tipos de columna numérica, cadena, fecha y booleana. Por ejemplo, la columna mostrará el icono check o close, en lugar de verdadero/falso de forma predeterminada, para el tipo de columna booleana.
Cuando se implementa correctamente, la plantilla de edición de celdas también garantiza que el EditValue de la celda pase correctamente por el ciclo de eventos de edición de la cuadrícula.
Plantilla de edición de celdas
La columna también acepta una última plantilla que se usará cuando una celda esté en modo de edición. Al igual que con las otras plantillas de columna, el objeto de contexto proporcionado es nuevamente el valor de la celda y el objeto de la celda en sí. Por supuesto, para que los usuarios finales puedan acceder a la plantilla de modo de edición, debe establecer la propiedad Editable de la columna en verdadero.
<IgbColumnField="Price"Editable=trueDataType="GridColumnDataType.Number"InlineEditorTemplateScript="PriceCellTemplate" />
//In JavaScript:
igRegisterScript("PriceCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<label>
Enter the new price tag
</label><inputname="price"type="number"value="${ctx.cell.value}"
@change=${(e) => this.updateValue(e, ctx.cell.value)} />
`;
}, false);
function updateValue(event, value) {
}
razor
Asegúrese de consultar la API para Cell familiarizarse con las propiedades proporcionadas que puede usar en sus plantillas.
API de plantilla de columna
Cada una de las plantillas de columna se puede cambiar mediante programación en cualquier punto a través del propio objeto IgbColumn. Por ejemplo, en el siguiente código, hemos declarado dos plantillas para nuestros datos de usuario. En nuestro código TypeScript, obtendremos referencias a las plantillas y luego, según alguna condición, representaremos la plantilla adecuada para la columna en nuestra aplicación.
<IgbGridColumnInit=OnColumnInit />@code {publicvoidOnColumnInit(IgbColumnComponentEventArgs args)
{
IgbColumn column = args.Detail;
// Return the appropriate template based on some condition.// For example saved user settings, viewport size, etc.
column.BodyTemplateScript = "NormalViewTemplate";
}
}
//In JavaScript:
igRegisterScript("NormalViewTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<divclass="user-details">${ctx.cell.value}</div><user-details-component></user-details-component>
`;
}, false);
igRegisterScript("SmallViewTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<divclass="user-details-small"style="color: blue">${ctx.cell.value}</div>
`;
}, false);
razor
Las propiedades de columna también se pueden establecer en código en el evento ColumnInit que se emite cuando las columnas se inicializan en la cuadrícula.
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.).
Formato de visualización personalizado
Hay 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. Predeterminado a 1.0-3
Para permitir la personalización del 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:
IgbGrid 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:
public class AminoAcid
{
public string Name { get; set; }
public AminoAbbreviation Abbreviation { get; set; }
public AminoWeight Weight { get; set; }
}
public class AminoAbbreviation
{
public string Short { get; set; }
public string Long { get; set; }
}
public class AminoWeight
{
public double Molecular { get; set; }
public double Residue { get; set; }
}
razor
Por ejemplo, para mostrar los pesos de un aminoácido dado en la cuadrícula, bastará con el siguiente fragmento
Una forma alternativa de vincular datos complejos o visualizar datos compuestos (de más de una columna) en IgbGrid es usar una plantilla de cuerpo personalizada para la columna. Generalmente, uno puede:
use el value de la celda, que contiene los datos anidados
<IgbColumnField="Abbreviation.Long"BodyTemplateScript="AbbreviationLongCellTemplate"/>
//In JavaScript:
igRegisterScript("AbbreviationLongCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`
<div><div>
${ctx.cell.value}
${this.GetName(ctx.cell.id.rowIndex)}
${this.GetWeight(ctx.cell.id.rowIndex)}
</div></div>
`;
}, false);
function GetName(rowIndex) {
return this.grid.getRowByIndex(rowIndex).data["Name"];
}
function GetWeight(rowIndex) {
return this.grid.getRowByIndex(rowIndex).data["Weight"]["Molecular"];
}
razor
Aquí hay un ejemplo de cómo se usa la plantilla del cuerpo para mostrar datos complejos. A continuación se muestran los datos que vamos a utilizar:
public class EmployeesNestedData : List<EmployeesNestedDataItem>
{
public EmployeesNestedData()
{
this.Add(new EmployeesNestedDataItem()
{
Age = 55,
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011, 6, 3",
ID = 3,
Name = @"Michael Burke",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009, 6, 19",
ID = 2,
Name = @"Thomas Anderson",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014, 8, 18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015, 9, 17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
}
}
}
razor
La plantilla personalizada para la columna, que representará los datos anidados:
<IgbColumnHeader="Employees"Field="Employees"BodyTemplateScript="WebGridNestedDataCellTemplate" />
//In JavaScript:
igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.keyUpHandler = function() {
ctx.cell.row.data[window.event.target.id] = window.event.target.value;
}
const people = ctx.cell.value;
if (people != null) {
if (people.length === 0) return html``;
const person = people[0];
return html`
<igc-expansion-panel><h3slot="title">
${person.Name}
</h3><divclass="description"><div><labelfor="title">Title</label><inputid='Title'type="text"name="title"value="${person.Title}"style="text-overflow: ellipsis;" /></div><div><labelfor="age">Age</label><inputid='Age'type="text"name="title"value="${person.Age}"style="text-overflow: ellipsis;" /></div></div></igc-expansion-panel>
`;
}
}, false);
razor
Y el resultado de esta configuración es:
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesNestedDataItem
{
publicdouble ID { get; set; }
publicdouble Age { get; set; }
publicdouble Salary { get; set; }
publicdouble Productivity { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring HireDate { get; set; }
publicstring Name { get; set; }
publicstring Title { get; set; }
public List<EmployeesNestedDataItem_EmployeesItem> Employees { get; set; }
}
publicclassEmployeesNestedDataItem_EmployeesItem
{
publicdouble Age { get; set; }
publicdouble Salary { get; set; }
publicdouble Productivity { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesNestedData
: List<EmployeesNestedDataItem>
{
publicEmployeesNestedData()
{
this.Add(new EmployeesNestedDataItem()
{
ID = 1,
Age = 55,
Salary = 80000,
Productivity = 90,
City = @"Berlin",
Country = @"Germany",
Phone = @"609-202-505",
HireDate = @"2008-03-20",
Name = @"John Winchester",
Title = @"Development Manager",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 4,
Age = 42,
Salary = 90000,
Productivity = 80,
City = @"Kielce",
Country = @"Poland",
Phone = @"609-202-505",
HireDate = @"2014-01-22",
Name = @"Ana Sanders",
Title = @"CEO",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 44,
Salary = 80000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-202-505",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Title = @"Director"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 25,
Salary = 85000,
Productivity = 55,
City = @"Paris",
Country = @"France",
Phone = @"609-202-505",
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Title = @"Vice President"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 39,
Salary = 88000,
Productivity = 88,
City = @"London",
Country = @"UK",
Phone = @"609-202-505",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Title = @"Director"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 18,
Age = 49,
Salary = 77000,
Productivity = 70,
City = @"Manchester",
Country = @"UK",
Phone = @"222-555-577",
HireDate = @"2014-01-22",
Name = @"Victoria Lincoln",
Title = @"Senior Accountant",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 23,
Name = @"Thomas Burke",
Title = @"Senior Accountant"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 22,
Name = @"Michael Anderson",
Title = @"Junior Accountant"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 21,
Name = @"Roland Reyes",
Title = @"Accountant Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 24,
Name = @"Monica Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 10,
Age = 61,
Salary = 85000,
Productivity = 890,
City = @"Lyon",
Country = @"France",
Phone = @"259-266-887",
HireDate = @"2010-01-01",
Name = @"Yang Wang",
Title = @"Localization Developer",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 35,
Age = 35,
Salary = 75000,
Productivity = 75,
City = @"Warasw",
Country = @"Poland",
Phone = @"688-244-844",
HireDate = @"2014-01-22",
Name = @"Janine Munoz",
Title = @"HR",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 10,
Age = 49,
Salary = 95000,
Productivity = 80,
City = @"Krakow",
Country = @"Poland",
Phone = @"677-266-555",
HireDate = @"2010-01-01",
Name = @"Yang Wang",
Title = @"Sales Manager",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbInputModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridAutoGenerate="false"Data="EmployeesNestedData"Name="grid"
@ref="grid"Id="grid"><IgbColumnHeader="Name"Field="Name"Width="15%"></IgbColumn><IgbColumnField="Title"Header="Title"Width="15%"></IgbColumn><IgbColumnField="Salary"Header="Salary"Width="10%"></IgbColumn><IgbColumnField="Employees"Header="Employees"BodyTemplateScript="WebGridNestedDataCellTemplate"Width="20%"Name="column1"
@ref="column1"></IgbColumn><IgbColumnField="City"Header="City"Width="15%"></IgbColumn><IgbColumnField="Country"Header="Country"Width="15%"></IgbColumn><IgbColumnField="Age"Header="Age"Width="10%"></IgbColumn><IgbColumnField="HireDate"Header="Hire Date"DataType="GridColumnDataType.Date"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbGrid grid;
private IgbColumn column1;
private EmployeesNestedData _employeesNestedData = null;
public EmployeesNestedData EmployeesNestedData
{
get
{
if (_employeesNestedData == null)
{
_employeesNestedData = new EmployeesNestedData();
}
return _employeesNestedData;
}
}
}razor
igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.keyUpHandler = function () {
ctx.cell.row.data[window.event.target.id] = window.event.target.value;
}
const people = ctx.cell.value;
if (people != null) {
if (people.length === 0) return html``;
const person = people[0];
return html`<igc-expansion-panel><divslot="title"style="font-size: 1.1em; font-weight: bold; margin-top: 1rem; margin-bottom: 0.25rem;">${person.Name}</div><divclass="description"><igc-inputlabel='Title'type="text"name="title"value="${person.Title}"style="text-overflow: ellipsis;"></igc-input><igc-inputlabel="Age"type="text"name="title"value="${person.Age}"style="text-overflow: ellipsis;"></igc-input></div></igc-expansion-panel>
`;
}
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Resumen de trabajo con datos planos
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 IgbGridRow.
Dado que la cuadrícula Blazor 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:
public class CustomersData : List<CustomersDataItem>
{
public CustomersData()
{
this.Add(new CustomersDataItem()
{
ID = "ALFKI",
CompanyName = "Alfreds Futterkiste",
ContactName = "Maria Anders",
ContactTitle = "Sales Representative",
Address = "Obere Str. 57",
City = "Berlin",
Region = "East",
PostalCode = "12209",
Country = "Germany",
Phone = "030-0074321",
Fax = "030-0076545"
});
}
}
razor
El uso de fragmentos de código de la sección anterior dará como resultado el siguiente ejemplo de IgbGrid
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassCustomersDataItem
{
publicstring ID { get; set; }
publicstring Company { get; set; }
publicstring ContactName { get; set; }
publicstring ContactTitle { get; set; }
publicstring Address { get; set; }
publicstring City { get; set; }
publicstring Region { get; set; }
publicdouble PostalCode { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring Fax { get; set; }
}
publicclassCustomersData
: List<CustomersDataItem>
{
publicCustomersData()
{
this.Add(new CustomersDataItem()
{
ID = @"ALFKI",
Company = @"Alfreds Futterkiste",
ContactName = @"Maria Anders",
ContactTitle = @"Sales Representative",
Address = @"Obere Str. 57",
City = @"Berlin",
Region = @"East",
PostalCode = 12209,
Country = @"Germany",
Phone = @"030-0074321",
Fax = @"030-0076545"
});
this.Add(new CustomersDataItem()
{
ID = @"ANATR",
Company = @"Ana Trujillo Emparedados y helados",
ContactName = @"Ana Trujillo",
ContactTitle = @"Owner",
Address = @"Avda. de la Constitución 2222",
City = @"México D.F.",
Region = @"South",
PostalCode = 5021,
Country = @"Mexico",
Phone = @"(5) 555-4729",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"ANTON",
Company = @"Antonio Moreno Taquería",
ContactName = @"Antonio Moreno",
ContactTitle = @"Owner",
Address = @"Mataderos 2312",
City = @"México D.F.",
Region = @"South",
PostalCode = 5023,
Country = @"Mexico",
Phone = @"(5) 555-3932",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 17000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataItem()
{
ID = @"BLAUS",
Company = @"Blauer See Delikatessen",
ContactName = @"Hanna Moos",
ContactTitle = @"Sales Representative",
Address = @"Forsterstr. 57",
City = @"Mannheim",
Region = @"East",
PostalCode = 68306,
Country = @"Germany",
Phone = @"0621-08460",
Fax = @"0621-08924"
});
this.Add(new CustomersDataItem()
{
ID = @"BLONP",
Company = @"Blondesddsl père et fils",
ContactName = @"Frédérique Citeaux",
ContactTitle = @"Marketing Manager",
Address = @"24, place Kléber",
City = @"Strasbourg",
Region = @"East",
PostalCode = 67000,
Country = @"France",
Phone = @"88.60.15.31",
Fax = @"88.60.15.32"
});
this.Add(new CustomersDataItem()
{
ID = @"BOLID",
Company = @"Bólido Comidas preparadas",
ContactName = @"Martín Sommer",
ContactTitle = @"Owner",
Address = @"C/ Araquil, 67",
City = @"Madrid",
Region = @"East",
PostalCode = 28023,
Country = @"Spain",
Phone = @"(91) 555 22 82",
Fax = @"(91) 555 91 99"
});
this.Add(new CustomersDataItem()
{
ID = @"BONAP",
Company = @"Bon app'",
ContactName = @"Laurence Lebihan",
ContactTitle = @"Owner",
Address = @"12, rue des Bouchers",
City = @"Marseille",
Region = @"West",
PostalCode = 13008,
Country = @"France",
Phone = @"91.24.45.40",
Fax = @"91.24.45.41"
});
this.Add(new CustomersDataItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 28000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 10000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CACTU",
Company = @"Cactus Comidas para llevar",
ContactName = @"Patricio Simpson",
ContactTitle = @"Sales Agent",
Address = @"Cerrito 333",
City = @"Buenos Aires",
Region = @"East",
PostalCode = 1010,
Country = @"Argentina",
Phone = @"(1) 135-5555",
Fax = @"(1) 135-4892"
});
this.Add(new CustomersDataItem()
{
ID = @"CENTC",
Company = @"Centro comercial Moctezuma",
ContactName = @"Francisco Chang",
ContactTitle = @"Marketing Manager",
Address = @"Sierras de Granada 9993",
City = @"México D.F.",
Region = @"South",
PostalCode = 5022,
Country = @"Mexico",
Phone = @"(5) 555-3392",
Fax = @"(5) 555-7293"
});
this.Add(new CustomersDataItem()
{
ID = @"CHOPS",
Company = @"Chop-suey Chinese",
ContactName = @"Yang Wang",
ContactTitle = @"Owner",
Address = @"Hauptstr. 29",
City = @"Bern",
Region = @"East",
PostalCode = 3012,
Country = @"Switzerland",
Phone = @"0452-076545",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 34000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 27000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataItem()
{
ID = @"DRACD",
Company = @"Drachenblut Delikatessen",
ContactName = @"Sven Ottlieb",
ContactTitle = @"Order Administrator",
Address = @"Walserweg 21",
City = @"Aachen",
Region = @"South",
PostalCode = 52066,
Country = @"Germany",
Phone = @"0241-039123",
Fax = @"0241-059428"
});
this.Add(new CustomersDataItem()
{
ID = @"DUMON",
Company = @"Du monde entier",
ContactName = @"Janine Labrune",
ContactTitle = @"Owner",
Address = @"67, rue des Cinquante Otages",
City = @"Nantes",
Region = @"East",
PostalCode = 44000,
Country = @"France",
Phone = @"40.67.88.88",
Fax = @"40.67.89.89"
});
this.Add(new CustomersDataItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 41000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataItem()
{
ID = @"ERNSH",
Company = @"Ernst Handel",
ContactName = @"Roland Mendel",
ContactTitle = @"Sales Manager",
Address = @"Kirchgasse 6",
City = @"Graz",
Region = @"South",
PostalCode = 8010,
Country = @"Austria",
Phone = @"7675-3425",
Fax = @"7675-3426"
});
this.Add(new CustomersDataItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 27000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"FISSA",
Company = @"FISSA Fabrica Inter. Salchichas S.A.",
ContactName = @"Diego Roel",
ContactTitle = @"Accounting Manager",
Address = @"C/ Moralzarzal, 86",
City = @"Madrid",
Region = @"East",
PostalCode = 28034,
Country = @"Spain",
Phone = @"(91) 555 94 44",
Fax = @"(91) 555 55 93"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLIG",
Company = @"Folies gourmandes",
ContactName = @"Martine Rancé",
ContactTitle = @"Assistant Sales Agent",
Address = @"184, chaussée de Tournai",
City = @"Lille",
Region = @"South",
PostalCode = 59000,
Country = @"France",
Phone = @"20.16.10.16",
Fax = @"20.16.10.17"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 36000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANK",
Company = @"Frankenversand",
ContactName = @"Peter Franken",
ContactTitle = @"Marketing Manager",
Address = @"Berliner Platz 43",
City = @"München",
Region = @"East",
PostalCode = 80805,
Country = @"Germany",
Phone = @"089-0877310",
Fax = @"089-0877451"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANR",
Company = @"France restauration",
ContactName = @"Carine Schmitt",
ContactTitle = @"Marketing Manager",
Address = @"54, rue Royale",
City = @"Nantes",
Region = @"South",
PostalCode = 44000,
Country = @"France",
Phone = @"40.32.21.21",
Fax = @"40.32.21.20"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANS",
Company = @"Franchi S.p.A.",
ContactName = @"Paolo Accorti",
ContactTitle = @"Sales Representative",
Address = @"Via Monte Bianco 34",
City = @"Torino",
Region = @"East",
PostalCode = 10100,
Country = @"Italy",
Phone = @"011-4988260",
Fax = @"011-4988261"
});
}
}cs
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbInputModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridAutoGenerate="false"Data="CustomersData"PrimaryKey="ID"Name="grid"
@ref="grid"><IgbColumnHeader="ID"Field="ID"></IgbColumn><IgbColumnField="ContactName"Header="Contact"Editable="true"BodyTemplateScript="WebGridCompositeContactCellTemplate"InlineEditorTemplateScript="WebGridCompositeContactEditCellTemplate"Width="250px"Resizable="false"Name="column1"
@ref="column1"></IgbColumn><IgbColumnHeader="Address"Field="Address"Editable="true"BodyTemplateScript="WebGridCompositeAddressCellTemplate"InlineEditorTemplateScript="WebGridCompositeAddressEditCellTemplate"Width="250px"Resizable="false"Name="column2"
@ref="column2"></IgbColumn><IgbColumnHeader="Country"Field="Country"></IgbColumn><IgbColumnHeader="Region"Field="Region"></IgbColumn><IgbColumnHeader="Phone"Field="Phone"></IgbColumn><IgbColumnHeader="Fax"Field="Fax"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
var column2 = this.column2;
}
private IgbGrid grid;
private IgbColumn column1;
private IgbColumn column2;
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
}razor
igRegisterScript("WebGridCompositeContactCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<divclass="contact-container"><span><strong>Name:</strong>${ctx.cell.row.data.ContactName}</span><br /><span><strong>Title:</strong>${ctx.cell.row.data.ContactTitle}</span><br /><span><strong>Company:</strong>${ctx.cell.row.data.Company}</span><br /></div>`;
}, false);
igRegisterScript("WebGridCompositeContactEditCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.keyUpHandler = function () {
ctx.cell.row.data[window.event.target.id] = window.event.target.value;
}
return html`<divclass="contact-container--edit"style="padding: 1rem"><igc-inputid="ContactName"label='Name'type="text"name="name"value="${ctx.cell.row.data.ContactName}"onkeyup='keyUpHandler()'></igc-input><igc-inputid="ContactTitle"label='Title'type="text"name="name"value="${ctx.cell.row.data.ContactTitle}"onkeyup='keyUpHandler()'></igc-input><igc-inputid="Company"label='Company'type="text"name="name"value="${ctx.cell.row.data.Company}"onkeyup='keyUpHandler()'></igc-input></div>
`;
}, false);
igRegisterScript("WebGridCompositeAddressCellTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<divclass="address-container"><divclass="country-city"><span><strong>Country:</strong>${ctx.cell.row.data.Country}</span><br><span><strong>City:</strong>${ctx.cell.row.data.City}</span></div><divclass="phone-pscode"><span><strong>Postal Code:</strong>${ctx.cell.row.data.PostalCode}</span><br><span><strong>Phone:</strong>${ctx.cell.row.data.Phone}</span></div><br /></div>`;
}, false);
igRegisterScript("WebGridCompositeAddressEditCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.keyUpHandler = function () {
ctx.cell.row.data[window.event.target.id] = window.event.target.value;
}
return html`<divclass="contact-container--edit"style="padding: 1rem"><igc-inputid="Country"label='Country'type="text"name="country"value="${ctx.cell.row.data.Country}"onkeyup='keyUpHandler()'></igc-input><igc-inputid="City"label='City'type="text"name="city"value="${ctx.cell.row.data.City}"onkeyup='keyUpHandler()'></igc-input><igc-inputid="PostalCode"label='PostalCode'type="text"name="postalcode"value="${ctx.cell.row.data.PostalCode}"onkeyup='keyUpHandler()'></igc-input><igc-inputid="Phone"label='Phone'type="text"name="phone"value="${ctx.cell.row.data.Phone}"onkeyup='keyUpHandler()'></igc-input></div>`;
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Navegación por teclado
La navegación por teclado de IgbGrid proporciona una rica variedad de interacciones de teclado para el usuario. Mejora la accesibilidad y permite una navegación intuitiva por cualquier tipo de elementos del interior (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.).
Estilo Blazor cuadrícula
Nota: la cuadrícula usa el diseño de cuadrícula css, que no es compatible con IE sin prefijo, por lo que no se representará correctamente.
<IgbGridClass="grid"></IgbGrid>razor
Luego configure las propiedades CSS--header-background y--header-text-color para esa clase:
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.
Redwidth no depende del ancho de las columnas
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 de la--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.