Blazor Grid with Cascading Combos
The Grid's Editing functionality provides with the opportunity to use Cascading Combobox components. By selecting the value in any preceding IgbCombo, the users will receive only the data that is relevant to their selection within the next Blazor Combobox component.
Angular Grid with Cascading Combos Sample Overview
The sample below demonstrates how IgbGrid works with nested Cascading IgbCombo components.
Setup
In order enable column editing, make sure editable property is set to true.
Once the column editing is enabled, you can start by adding your IgbCombo. Please note that here in order to have only one single selection available, you will need to use set the singleSelect property.
To get started with the IgbCombo, first you need to import it:
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbComboModule)
);
Then you should define the column template with the 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- Required for object arrays - Specifies which property will be used for the items' text. If no value is specified fordisplayKey, the combo will use the specifiedvalueKey(if any).
In order to handle the selection change, we need the change event. The emitted event arguments contain information about the selection prior to the change, the current selection and the items that were added or removed. Therefore, it will filter the values based on the selection of the previous combo.
//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);
}
});
And lastly, adding the IgbLinearProgress, which is required while loading the list of data.
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
| Limitation | Description |
|---|---|
| Combo drop-down list may hide behind other UI elements. | Due to the stacking order of elements in the grid the combo drop-down may hide behind other elements like header, footers etc. |