Edit on Github

Combobox

in namespace DotVVM.Bootstrap5.Controls

Usage & Scenarios

Extends the builtin ComboBox control to allow sizing.

https://getbootstrap.com/docs/5.2/forms/select/

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; }
    }
}

HTML produced by the control