Combobox
in namespace DotVVM.Bootstrap5.Controls
Usage & Scenarios
Extends the builtin ComboBox control to allow sizing.
Sample 1: Basic Usage
To fill combobox vith values use property DataSource and then properties ItemTextBinding, ItemValueBinding and ItemTitleBinding which set text, value and title of combobox items.
To specify currently displayed item use property SelectedValue and set it to index of item.
<bs:ComboBox SelectedValue="{value: SelectedValue}"
DataSource="{value: ComboBoxDataSource}"
ItemTextBinding="{value: Text}"
ItemValueBinding="{value: Value}"
ItemTitleBinding="{value: Title}" />
Selected value: {{value: SelectedValue}}
public class ViewModel : DotvvmViewModelBase
{
public List<ListItemModel> ComboBoxDataSource { get; set; } = new List<ListItemModel>
{
new ListItemModel() { Value = 1, Text = "Too long text", Title = "Nice title", },
new ListItemModel() { Value = 2, Text = "Text", Title = "Even nicer title" }
};
public int SelectedValue { get; set; }
public class ListItemModel
{
public int Value { get; set; }
public string Text { get; set; }
public string Title { get; set; }
}
}Sample 2: ComboBox Sizing
Use the Size property to set the size of the ComboBox.
<h5>Default Size</h5>
<bs:ComboBox SelectedValue="{value: SelectedValue}"
DataSource="{value: ComboBoxDataSource}"
ItemTextBinding="{value: Text}"
ItemValueBinding="{value: Value}"
Size="Default" />
<h5>Large Size</h5>
<bs:ComboBox SelectedValue="{value: SelectedValue}"
DataSource="{value: ComboBoxDataSource}"
ItemTextBinding="{value: Text}"
ItemValueBinding="{value: Value}"
Size="Large" />
<h5>Small Size</h5>
<bs:ComboBox SelectedValue="{value: SelectedValue}"
DataSource="{value: ComboBoxDataSource}"
ItemTextBinding="{value: Text}"
ItemValueBinding="{value: Value}"
Size="Small" />public class ViewModel : DotvvmViewModelBase
{
public List<ListItemModel> ComboBoxDataSource { get; set; } = new List<ListItemModel>
{
new ListItemModel() { Value = 1, Text = "Too long text", Title = "Nice title", },
new ListItemModel() { Value = 2, Text = "Text", Title = "Even nicer title" }
};
public int SelectedValue { get; set; }
public class ListItemModel
{
public int Value { get; set; }
public string Text { get; set; }
public string Title { get; set; }
}
}Sample 3: Empty Item Text
Use property EmptyItemText to specify shown text if no item is selected.
<bs:ComboBox SelectedValue="{value: null}"
DataSource="{value: ComboBoxDataSource}"
ItemTextBinding="{value: Text}"
ItemValueBinding="{value: Value}"
EmptyItemText="Some Empty Item Text" />public class ViewModel : DotvvmViewModelBase
{
public List<ListItemModel> ComboBoxDataSource { get; set; } = new List<ListItemModel>
{
new ListItemModel() { Value = 1, Text = "Too long text", Title = "Nice title", },
new ListItemModel() { Value = 2, Text = "Text", Title = "Even nicer title" }
};
public int SelectedValue { get; set; }
public class ListItemModel
{
public int Value { get; set; }
public string Text { get; set; }
public string Title { get; set; }
}
}