La función de adición de filas Ignite UI for Blazor en Blazor cuadrícula permite a los usuarios ingresar y enviar nuevos registros de datos sin tener que navegar a un formulario o página separados. Con él IgbGrid, los usuarios pueden manipular los datos a través de la adición de filas en línea y una potente API para operaciones CRUD. Agregue un IgbActionStrip componente con acciones de edición habilitadas en la plantilla de la cuadrícula. Después de eso, coloque el cursor sobre una fila y use el botón provisto. Finalmente, presione ALT + + para generar la fila que agrega la interfaz de usuario.
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(IgbInputModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridAutoGenerate="false"Name="grid"
@ref="grid"Id="grid"Data="NwindData"PrimaryKey="ProductID"RowEditable="true"><IgbActionStrip
><IgbGridEditingActionsAddRow="true"></IgbGridEditingActions></IgbActionStrip><IgbColumnName="ID"
@ref="iD"Field="ProductID"Header="Product ID"DataType="GridColumnDataType.Number"Hidden="true"></IgbColumn><IgbColumnName="ReorderLevel"
@ref="reorderLevel"Field="ReorderLevel"Header="Reorder Level"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnName="ProductName"
@ref="productName"Field="ProductName"Header="Product Name"DataType="GridColumnDataType.String"></IgbColumn><IgbColumnName="UnitsInStock"
@ref="unitsInStock"Field="UnitsInStock"Header="Units In Stock"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnName="UnitPrice"
@ref="unitPrice"Field="UnitPrice"Header="Unit Price"DataType="GridColumnDataType.Number"Sortable="true"></IgbColumn><IgbColumnName="OrderDate"
@ref="orderDate"Field="OrderDate"Header="Order Date"DataType="GridColumnDataType.Date"></IgbColumn><IgbColumnName="Discontinued"
@ref="discontinued"Field="Discontinued"Header="Discontinued"DataType="GridColumnDataType.Boolean"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var iD = this.iD;
var reorderLevel = this.reorderLevel;
var productName = this.productName;
var unitsInStock = this.unitsInStock;
var unitPrice = this.unitPrice;
var orderDate = this.orderDate;
var discontinued = this.discontinued;
}
private IgbGrid grid;
private IgbColumn iD;
private IgbColumn reorderLevel;
private IgbColumn productName;
private IgbColumn unitsInStock;
private IgbColumn unitPrice;
private IgbColumn orderDate;
private IgbColumn discontinued;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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.
Uso de adición de filas
Luego defina un IgbGrid con una fuente de datos vinculada, RowEditable configurado en verdadero y un componente IgbActionStrip con acciones de edición habilitadas. La entrada AddRow controla la visibilidad del botón que genera la interfaz de usuario que agrega la fila.
<IgbGridAutoGenerate="false"Id="grid"Data="NwindData"PrimaryKey="ProductID"RowEditable="true"><IgbColumnField="ProductID"Header="Product ID"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnField="ReorderLevel"Header="Reorder Level"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnField="ProductName"Header="Product Name"DataType="GridColumnDataType.String"></IgbColumn><IgbColumnField="UnitsInStock"Header="Units In Stock"DataType="GridColumnDataType.Number"></IgbColumn><IgbColumnField="OrderDate"Header="Order Date"DataType="GridColumnDataType.Date"></IgbColumn><IgbColumnField="Discontinued"Header="Discontinued"DataType="GridColumnDataType.Boolean"></IgbColumn><IgbActionStrip><IgbGridEditingActionsAddRow="true"></IgbGridEditingActions></IgbActionStrip></IgbGrid>razor
Nota: La configuración de la clave principal es obligatoria para las operaciones de adición de filas.
Nota: Todas las columnas, excepto la clave principal, se pueden editar en la fila que agrega la interfaz de usuario de forma predeterminada. Si desea deshabilitar la edición de una columna específica, debe establecer la entrada de la columna Editable en false.
Nota: La entrada IgbGridEditingActions que controla la visibilidad del botón Agregar fila puede usar el contexto de la tira de acción (que es del tipo IgbRowType para ajustar qué registros muestra el botón.
El BaseTransactionService interno se proporciona automáticamente para Grid. Mantiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.
Iniciar fila agregando mediante programación
Grid permite generar mediante programación la interfaz de usuario para agregar filas utilizando dos métodos públicos diferentes. Uno que acepta un ID de fila para especificar la fila bajo la cual debe generarse la interfaz de usuario y otro que funciona por índice. Puede utilizar estos métodos para generar la interfaz de usuario en cualquier lugar dentro de la vista de datos actual. No se admite cambiar la página ni especificar una fila que, por ejemplo, esté filtrada.
El uso BeginAddRowById requiere que especifique la fila que se utilizará como contexto para la operación mediante su RowID (PK). Luego, el método funciona como si el usuario final hiciera clic en el botón agregar fila de acción para la fila especificada, generando la interfaz de usuario debajo de ella. También puede hacer que la interfaz de usuario se genere como la primera fila de la cuadrícula pasando null para el primer parámetro.
@code {awaitthis.grid.BeginAddRowByIdAsync('ALFKI', false); // Spawns the add row UI under the row with PK 'ALFKI'awaitthis.grid.BeginAddRowByIdAsync(null, false); // Spawns the add row UI as the first record}razor
El método beginAddRowByIndex funciona de manera similar, pero requiere que especifiques el índice en el que debe generarse la interfaz de usuario. Los valores permitidos oscilan entre 0 y el tamaño de la vista de datos: 1.
@code {awaitthis.grid.BeginAddRowByIndexAsync(10); // Spawns the add row UI at index 10awaitthis.grid.BeginAddRowByIndexAsync(0); // Spawns the add row UI as the first record}razor
Posicionamiento
La posición predeterminada de la interfaz de usuario para agregar filas está debajo de la fila en la que el usuario final hizo clic en el botón Agregar fila.
The Red scrolls to fully display the add row UI automatically.
La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.
Comportamiento
La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de cuadrícula para obtener más información.
Después de agregar una nueva fila a través de la interfaz de usuario que agrega filas, su posición y/o visibilidad está determinada por el estado de clasificación, filtrado y agrupación de Grid. En un Grid que no tenga aplicado ninguno de estos estados, aparece como último registro. Se muestra brevemente una barra de refrigerios que contiene un botón que el usuario final puede usar para desplazar la Grid a su posición si no está a la vista.
Navegación por teclado
ALT + +: ingresa al modo de edición para agregar una fila
ESC sale del modo de agregar filas sin enviar ningún cambio
TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.
Integración de funciones
Cualquier operación de adición de filas se detendrá si se modifica la vista de datos de la Grid. Se envían todos los cambios realizados por el usuario final. Las operaciones que cambian la vista de datos incluyen, entre otras, ordenar, agrupar, filtrar, paginar, etc.
Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.
Personalizar la superposición de agregar filas
Personalizando el texto
Es posible personalizar el texto de la fila agregando superposición usando RowAddTextDirective.
Nota: El uso de la plantilla RowEditActions cambiará las acciones de edición tanto para editar como para agregar botones superpuestos.
Estilo
La interfaz de usuario para agregar filas comprende los botones en las acciones de edición IgbActionStrip, los editores de edición y la superposición, así como la barra de bocadillos que permite a los usuarios finales desplazarse a la fila recién agregada. Para diseñar estos componentes, puede consultar estas guías completas en sus respectivos temas: