Cuadrícula Web Components con combinaciones en cascada
La funcionalidad de edición de Grid brinda la oportunidad de utilizar componentes de Cascading Combobox. Al seleccionar el valor en cualquier IgcComboComponent anterior, los usuarios recibirán solo los datos que sean relevantes para su selección dentro del siguiente componente del cuadro combinado Web Components.
Angular Grid with Cascading Combos Sample Overview
El siguiente ejemplo demuestra cómo funciona IgcGridComponent con componentes IgcComboComponent en cascada anidados.
Setup
In order enable column editing, make sure editable property is set to true.
Una vez habilitada la edición de columnas, puede comenzar agregando su IgcComboComponent. Tenga en cuenta que aquí para tener solo una selección disponible, deberá utilizar la propiedad singleSelect.
Para comenzar con IgcComboComponent, primero debe importarlo:
import { IgcComboComponent, defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
Luego deberías definir la plantilla de columna con el combo:
public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
const id = ctx.cell.id.rowID;
const comboId = "country_" + id;
return html`<igc-combo placeholder="Choose Country..." value-key="Country" display-key="Country" id="${comboId}" single-select></igc-combo>`
}
displayKey: obligatorio para matrices de objetos: especifica qué propiedad se utilizará para el texto de los elementos. Si no se especifica ningún valor paradisplayKey, el combo utilizará lavalueKeyespecificada (si corresponde).
Para manejar el cambio de selección, necesitamos el evento change. Los argumentos del evento emitido contienen información sobre la selección anterior al cambio, la selección actual y los elementos que se agregaron o eliminaron. Por lo tanto, filtrará los valores en función de la selección del combo anterior.
public countries = [...this.worldCitiesAbove500K].filter(x => this.countryNames.indexOf(x.Country) !== -1).filter((value, index, array) => array.findIndex(x => x.Country === value.Country) === index);
public bindEventsCountryCombo(rowId: any, cell: any) {
const comboId = "country_" + rowId;
var combo = document.getElementById(comboId) as IgcComboComponent<any>;
combo?.addEventListener("igcChange", (e:any) => {
const value = e.detail.newValue[0];
cell.update(value);
const nextCombo = document.getElementById("region_" + cell.id.rowID) as IgcComboComponent<any>;
const nextProgress = document.getElementById("progress_region_" + cell.id.rowID) as IgcLinearProgressComponent;
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);
}
});
combo?.addEventListener("igcOpening", (e:any) => {
var currCombo = e.target;
if (currCombo.data.length === 0) {
combo.data = this.countries;
};
});
}
Y, por último, agregar IgcLinearProgressComponent, que es necesario al cargar la lista de datos. La id es necesaria para establecer el valor del atributo id.
public webGridRegionDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
const id = ctx.cell.id.rowID;
const comboId = "region_" + id;
const progressId = "progress_region_" + id;
return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose Region..." disabled value-key="Region" display-key="Region" id="${comboId}" single-select></igc-combo>
<igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress><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. |