Cuadrícula Blazor con combos en cascada
La funcionalidad de Edición de la Grid ofrece la oportunidad de utilizar componentes de Cascading Combobox. Al seleccionar el valor en cualquiera de los anterioresIgbCombo, los usuarios recibirán solo los datos relevantes para su selección dentro del siguiente componente Blazor Combobox.
Angular Grid with Cascading Combos Sample Overview
El ejemplo siguiente demuestra cómoIgbGrid funciona con componentes en cascadaIgbCombo anidados.
Setup
Para permitir la edición de columnas, asegúrate deEditable que la propiedad esté configurada comotrue.
Una vez habilitada la edición de columnas, puedes empezar añadiendo tu.IgbCombo Ten en cuenta que aquí, para tener solo una opción disponible, tendrás que usar set theSingleSelect property.
Para empezar,IgbCombo primero necesitas importarlo:
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbComboModule)
);
Luego deberías definir la plantilla de columna con el combo:
<IgbColumn Field="Country" Header="Country" BodyTemplate="WebGridCountryDropDownTemplate"></IgbColumn>
@code{
public static RenderFragment<IgbCellTemplateContext> WebGridCountryDropDownTemplate = (context) =>
{
var id = "country_" + context.Cell.Id.RowID;
return @<IgbCombo id="@id" Placeholder="Choose Country..." SingleSelect=true ValueKey="Country" DisplayKey="Country" ChangeScript="CountryChange"></IgbCombo>;
};
}
DisplayKey- Obligatorio para arrays de objetos - Especifica qué propiedad se usará para el texto de los elementos. Si no se especifica ningún valorDisplayKey, la combinación usará el especificadoValueKey(si es que lo hay).
Para manejar el cambio de selección, necesitamos elonChange evento. Los argumentos del evento emitido contienen información sobre la selección anterior al cambio, la selección actual y los elementos que se añadieron o eliminaron. Por lo tanto, filtrará los valores según la selección de la combinación anterior.
//In Javascript
igRegisterScript("CountryChange", (ctx) => {
const value = e.detail.newValue;
cell.update(value);
const nextCombo = document.getElementById("region_" + cell.id.rowID);
const nextProgress = document.getElementById("progress_region_" + cell.id.rowID);
if (value === "") {
nextCombo.deselect(nextCombo.value);
nextCombo.disabled = true;
nextCombo.data = [];
} else {
nextProgress.style.display = "block";
setTimeout(() => {
nextProgress.style.display = "none";
nextCombo.disabled = false;
nextCombo.data = this.regions.filter(x => x.Country === value);
}, 2000);
}
});
Y por último, añadir elIgbLinearProgress, que es necesario al cargar la lista de datos.
public static RenderFragment<IgbCellTemplateContext> WebGridRegionDropDownTemplate = (context) =>
{
var id = "region_" + context.Cell.Id.RowID;
return @<div style="display:flex;flex-direction:column;"><IgbCombo id="@id" Placeholder="Choose Region..." SingleSelect=true ValueKey="Region" DisplayKey="Region" ChangeScript="RegionChange"></IgbCombo><IgbLinearProgress Indeterminate=true></IgbLinearProgress></div>;
};
Known Issues and Limitations
| Limitación | Descripción |
|---|---|
| La lista desplegable combinada puede ocultarse detrás de otros elementos de la interfaz de usuario. | Debido al orden de apilamiento de los elementos en la cuadrícula, el menú desplegable combinado puede ocultarse detrás de otros elementos como encabezados, pies de página, etc. |