Dropdown Editors

Basic usage

Dropdown editors are DropdownList, Multiselect, Multichk, Combobox. They all have a dropdown to select the value(s) from and can be configured by setting the

Opt

parameter:

<OMultiselect @bind-Value="model.Multi1" Opt="dopt" />

<OMultichk @bind-Value="model.Multi2" Opt="dopt" />

<ODropdownList @bind-Value="model.Meal1" Opt="@(new(){ Data = meals })" /> 

Data binding

Data for the editor is a collection of

KeyContent

and can be set in the

Opt.Data

property or in the

Data

parameter. We can also set the

Opt.DataFunc

to get data on init:

dopt.DataFunc = async () =>
{
    using var cx = await cxf.CreateDbContextAsync();
    return await cx.Meals.Select(o => new KeyContent(o.Id, o.Name)).ToArrayAsync();
}

DropdownOpt

Dropdown editors options

AfterChangeFunc	Function to execute after value has changed
CaptionFunc	Item caption custom render func
ClearBtn	Clear button
CssClass	Main container css class
Data	Component data used for selecting values
DataFunc	Function that will execute on component initialization, it will return the data for the component
Disabled	Is editor disabled
InLabel	Label rendered next to the editor's selected value (caption)
ItemFunc	Select item render func
MainCaptionFunc	Main caption render func
NoSelectClose	No close on item select
OpenOnHover	Open dropdown on editor hover
ParentValueFunc	Function that returns the current value of parent components; when the parent value changes the component will reload, (for multiple parents return an array/collection)
SearchFunc	Function to execute after the user stopped typing in the search textbox, gets the search term as parameter
Width	CSS witdh