React Grid 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 anterioresIgrCombo, los usuarios recibirán solo los datos relevantes para su selección dentro del siguiente componente React Combobox.
Angular Grid with Cascading Combos Sample Overview
El ejemplo siguiente demuestra cómoIgrGrid funciona con componentes en cascadaIgrCombo 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.IgrCombo Ten en cuenta que aquí, para tener solo una opción disponible, tendrás que usar set thesingleSelect property.
import { IgrCombo } from 'igniteui-react';
Luego deberías definir la plantilla de columna con el combo:
<IgrColumn
field="Country"
header="Country"
bodyTemplate={webGridCountryDropDownTemplate}>
</IgrColumn>
const webGridCountryDropDownTemplate = (ctx: IgrCellTemplateContext) => {
const rowId = ctx.cell?.id.rowID;
if (!rowId) return <></>;
const comboId = `country_${rowId}`;
return (
<>
<IgrCombo
data={countries}
ref={getComboRef(comboId)}
onChange={(event: CustomEvent) => { onCountryChange(rowId, event) }}
placeholder="Choose Country..."
valueKey="Country"
displayKey="Country"
singleSelect={true}
name={comboId}>
</IgrCombo>
</>
);
}
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.
const onCountryChange = (rowId: string, event: CustomEvent) => {
const regionCombo = getComboRef(`region_${rowId}`).current;
const cityCombo = getComboRef(`city_${rowId}`).current;
const regions = regions;
const newValue = event.detail.newValue[0];
if (newValue === undefined) {
regionCombo.deselect(regionCombo.value);
regionCombo.disabled = true;
regionCombo.data = [];
cityCombo.deselect(regionCombo.value);
cityCombo.disabled = true;
cityCombo.data = [];
} else {
regionCombo.disabled = false;
regionCombo.data = regions.filter(x => x.Country === newValue);
cityCombo.deselect(cityCombo.value);
cityCombo.disabled = true;
cityCombo.data = [];
}
}
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. |