Soms is één kolom niet genoeg om een item te herkennen. MultiColumnComboBox toont meerdere kolommen met een kopregel en doorzoekt ze allemaal.
Waarom het helpt
- Meerdere kolommen in de lijst
- Typen doorzoekt elke kolom
- Gebouwd op Autocomplete
Waar het past
- Klanten met plaats en id
- Producten met code en prijs
- Medewerkers met afdeling
Voorbeeld
<MultiColumnComboBox TItem="Person" Items="SampleData.People" Columns="_columns" ItemText="@(p => p.Name)" @bind-Value="_person" Label="Employee" Placeholder="Search by any column" />
<p>Chosen: @(_person?.Name ?? "none")</p>
@code {
private Person? _person;
private readonly IReadOnlyList<ComboColumn<Person>> _columns =
[
new("Name", p => p.Name, "10rem"),
new("Department", p => p.Department, "8rem"),
new("Age", p => p.Age, "4rem")
];
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.