Web Components Grade com combos em cascata
A funcionalidade de edição da grade oferece a oportunidade de usar componentes de caixa de combinação em cascata. Ao selecionar o valor em qualquer IgcComboComponent anterior, os usuários receberão apenas os dados relevantes para sua seleção no próximo componente Web Components Combobox.
Angular Grid with Cascading Combos Sample Overview
O exemplo abaixo demonstra como IgcGridComponent funciona com componentes em cascata IgcComboComponent aninhados.
Setup
In order enable column editing, make sure editable property is set to true.
Depois que a edição da coluna estiver habilitada, você pode começar adicionando seu IgcComboComponent. Por favor, note que aqui, para ter apenas uma única seleção disponível, terá de utilizar a opção definir a singleSelect propriedade.
Para começar a usar o IgcComboComponent, primeiro você precisa importá-lo:
import { IgcComboComponent, defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
Em seguida, você deve definir o modelo de coluna com o 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- Obrigatório para matrizes de objetos - Especifica qual propriedade será usada para o texto dos itens. Se nenhum valor for especificado paradisplayKey, o combo usará o especificadovalueKey(se houver).
Para lidar com a mudança de seleção, precisamos do change evento. Os argumentos de evento emitidos contêm informações sobre a seleção anterior à alteração, a seleção atual e os itens que foram adicionados ou removidos. Portanto, ele filtrará os valores com base na seleção do 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;
};
});
}
E, por último, adicionar o IgcLinearProgressComponent, que é necessário ao carregar a lista de dados. O id é necessário para definir o valor do id atributo.
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
| Limitação | Descrição |
|---|---|
| A lista suspensa de combinação pode se esconder atrás de outros elementos da interface do usuário. | Devido à ordem de empilhamento dos elementos na grade, o menu suspenso de combinação pode se esconder atrás de outros elementos, como cabeçalho, rodapés, etc. |