La función de edición de celdas Ignite UI for Blazor en Blazor Tree Grid ofrece una manera sencilla de realizar operaciones de manipulación de datos, como crear, actualizar y eliminar registros. IgbTreeGrid le ofrece una potente API pública que le permite personalizar la forma en que se realizan estas operaciones. Las fases de manipulación de datos son:
Para especificar qué modo de edición debe habilitarse, IgbTreeGrid expone las siguientes propiedades booleanas: Editable y RowEditable.
La propiedad Editable le permite especificar las siguientes opciones:
falso: se deshabilitará la edición de la columna correspondiente. Este es el valor predeterminado.
verdadero: se habilitará la edición de la columna correspondiente.
Tenga en cuenta que si la columna no es editable, aún puede modificar su valor a través de la API pública expuesta por IgbTreeGrid.
La propiedad RowEditable le permite especificar las siguientes opciones:
falso: se deshabilitará la edición de filas en la cuadrícula correspondiente. Este es el valor predeterminado.
verdadero: se habilitará la edición de filas en la cuadrícula correspondiente.
En IgbTreeGrid, si establece la propiedad RowEditable en verdadero y la propiedad Editable no está definida explícitamente para ninguna columna, la edición se habilitará para todas las columnas excepto la clave principal.
Edición de celdas y por lotes: en este escenario, cada modificación de cada celda se conserva por separado y las operaciones de deshacer/rehacer están disponibles a nivel de celda;
Edición de filas y por lotes: en este escenario, las modificaciones se conservan a nivel de fila, por lo que las operaciones de deshacer/rehacer no funcionarán para cada celda que se modifique, sino para el grupo de celdas de cada fila.
Editar plantillas
Si desea utilizar plantillas de edición específicas de un tipo de datos, debe especificar la propiedad DataType de la columna. Entonces veamos ahora cuáles son las plantillas predeterminadas para cada tipo:
Para el tipo de datos string, la plantilla predeterminada utiliza IgbInput.
Para el tipo de datos number, la plantilla predeterminada utiliza IgbInput type="número", por lo que si intenta actualizar la celda a un valor que no se puede analizar como un número, su cambio se descartará y el valor en la celda será establecido en 0.
Para el tipo de datos date, la plantilla predeterminada utiliza IgbDatePicker
Para el tipo de datos dateTime, la plantilla predeterminada utiliza DateTimeEditor. Este editor le dará instrucciones de máscara para los elementos de entrada que forman parte del objeto DateTime.
Para el tipo de datos time, la plantilla predeterminada utiliza TimePicker.
Para el tipo de datos boolean, la plantilla predeterminada utiliza IgbCheckbox.
Para el tipo de datos currency, la plantilla predeterminada utiliza InputGroup con configuración de prefijo/sufijo basada en la configuración regional de la aplicación o la cuadrícula.
Para el tipo de datos percent, la plantilla predeterminada utiliza InputGroup con un elemento de sufijo que muestra una vista previa del valor editado en porcentajes.
La cuadrícula expone una amplia gama de eventos que brindan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de Edición de filas y Edición de celdas: al iniciar, confirmar o cancelar la acción de edición.
Evento
Descripción
Argumentos
Para interrumpir
RowEditEnter
SiRowEditing está habilitado, se activa cuando una fila ingresa al modo de edición
SiRowEditing está habilitado, se activa justo antes de que se confirme el valor de una fila en el modo de edición (por ejemplo, al hacer clic en el botónDone en la superposición de edición de filas)
RowEditEnter- Ni Row Cell entrará en modo de edición.
CellEditEnter: evita ingresar a la edición de celdas. Si RowEditable está habilitado, se activará la edición de filas, aunque la edición de celdas seguirá prohibida.
CellEdit- Permitido Cell y/o Row editar, al presionar el botón Listo o Enter, no se confirmará la transacción de valor o fila. La edición de celdas y la edición de filas no se cerrarán hasta que se haga clic en el botón Cancelar.
RowEdit: es posible confirmar la celda, pero no toda la fila. La fila permanecerá en modo de edición y la transacción de la fila se considerará abierta. Al presionar Listo no se confirma ni se cierra la fila. El botón Cancelar cierra el proceso de edición y la transacción sin confirmar los cambios.
El siguiente ejemplo demuestra la secuencia de ejecución de edición en acción:
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDataItem
{
publicdouble Age { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Phone { get; set; }
publicbool OnPTO { get; set; }
publicdouble ParentID { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesFlatData
: List<EmployeesFlatDataItem>
{
publicEmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Data="EmployeesFlatData"Name="grid"
@ref="grid"Id="grid"RowEditable="true"PrimaryKey="ID"ForeignKey="ParentID"RenderedScript="WebTreeGridRendered"RowEditEnterScript="WebGridRowEditEnter"RowEditScript="WebGridRowEdit"RowEditDoneScript="WebGridRowEditDone"RowEditExitScript="WebGridRowEditExit"CellEditEnterScript="WebGridCellEditEnter"CellEditScript="WebGridCellEdit"CellEditDoneScript="WebGridCellEditDone"CellEditExitScript="WebGridCellEditExit"><IgbColumnField="Name"DataType="GridColumnDataType.String"Editable="true"></IgbColumn><IgbColumnField="Title"Header="Job Title"DataType="GridColumnDataType.String"Editable="true"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"Editable="true"></IgbColumn></IgbTreeGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbTreeGrid grid;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}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.
Integración de características
Mientras una celda/fila está en modo de edición, un usuario puede interactuar con la cuadrícula de muchas maneras. La siguiente tabla especifica cómo una determinada interacción afecta la edición actual:
Cuadrícula de árbol
Filtración
Clasificación
Paginación
Moviente
Fijar
Ocultación
Agrupar por
Cambiar el tamaño
Escapar
Ingresar
F2
Pestaña
Clic en la celda
Agregar nueva fila/Eliminar/Editar
Mantener el modo de edición
✔
Salir del modo de edición
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
✔
Comprometerse
✔
✔
✔
✔
✔
Desechar
✔
✔
✔
✔
✔
✔
✔
✔
Como se ve en la tabla, todas las interacciones, excepto cambiar el tamaño de una columna, finalizarán la edición y descartarán los nuevos valores. En caso de que se confirme el nuevo valor, el desarrollador puede hacerlo en el evento "-ing" de característica correspondiente.
Ejemplo de cómo confirmar nuevos valores, si el usuario intenta ordenar la columna mientras una celda/fila está en modo de edición: