DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

ComboBox

in namespace DotVVM.Framework.Controls

Renders the HTML drop-down list.

Properties

Name Type Description Notes Default Value
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
1
DataContext Object Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.
attribute
inner element
static value
bindable
default
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
DisplayMember String Gets or sets the name of property in the DataSource collection that will be displayed in the control.
attribute
inner element
static value
bindable
default
EmptyItemText String
attribute
inner element
static value
bindable
default
Enabled Boolean Gets or sets a value indicating whether the control is enabled and can be modified.
attribute
inner element
static value
bindable
default
True
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
SelectedValue Object Gets or sets the value of the selected item.
attribute
inner element
static value
bindable
default
ValueMember String Gets or sets the name of property in the DataSource collection that will be passed to the SelectedValue property when the item is selected.
attribute
inner element
static value
bindable
default
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
SelectionChanged Command Gets or sets the command that will be triggered when the selection is changed.

Usage & Scenarios

Renders the HTML drop-down list.

HTML Rendered by the Control

The control renders the HTML select element.

<select data-bind="..."></select>

Sample 1: Basic ComboBox Usage

The ComboBox control has property DataSource which expects an IEnumerable. Each object is treated as an item in the drop-down list.

The SelectedValue property will contain the selected value.

<dot:ComboBox DataSource="{value: Fruits}" 
              SelectedValue="{value: SelectedFruit}"/>

{{value: SelectedFruit}}
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.ComboBox.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Fruits { get; set; } = { "Apple", "Banana", "Orange" };

        public string SelectedFruit { get; set; }
    }
}

Sample 2: Empty Item

There is the EmptyItemText property which adds an empty item which means that nothing is selected.

The SelectedFruit property will be null when nothing is selected.

<dot:ComboBox DataSource="{value: Fruits}" 
              SelectedValue="{value: SelectedFruit}" 
              EmptyItemText="Select..." />

{{value: SelectedFruit}}
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.ComboBox.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Fruits { get; set; } = { "Apple", "Banana", "Orange" };

        public string SelectedFruit { get; set; }
    }
}

Sample 3: ValueMember and DisplayMember

Typically, the DataSource is not a collection of strings, but a collection of some complex objects.

The ValueMember property defines which property of the object will be passed to the SelectedValue property.

The DisplayMember property defines which property of the object will be displayed in the drop-down list.

<dot:ComboBox DataSource="{value: Fruits}" 
              SelectedValue="{value: SelectedFruitId}" 
              ValueMember="Id" 
              DisplayMember="Name" />

{{value: SelectedFruitId}}
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.ComboBox.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public Fruit[] Fruits { get; set; } = 
        {
            new Fruit { Id = 0, Name = "Apple" },
            new Fruit { Id = 1, Name = "Banana" },
            new Fruit { Id = 2, Name = "Orange" }
        };

        public int SelectedFruitId { get; set; } = 1;

    }

    public class Fruit
    {
        public int Id { get; set; }

        public string Name { get; set; }
        
    }
}

Sample 4: SelectionChanged Event

The ComboBox control also has the SelectionChanged event which is fired whenever the selection changes.

<dot:ComboBox DataSource="{value: Fruits}" 
              SelectedValue="{value: SelectedFruit}" 
              SelectionChanged="{command: IsItReallyFruit()}"/>

{{value: Message}}
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.ComboBox.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Fruits { get; set; } = { "Apple", "Banana", "IceCream", "Orange" };

        public string SelectedFruit { get; set; }

        public string Message { get; set; }

        public void IsItReallyFruit()
        {
            if (SelectedFruit == "IceCream")
            {
                Message = "Ice cream isn't a fruit!";
            }
            else
            {
                Message = "Yes, it's a fruit!";
            }
        }
    }
}

Sample 5: Cascading ComboBoxes

This is an example of two connected ComboBoxes.

<dot:ComboBox DataSource="{value: Groups}" 
              SelectedValue="{value: SelectedGroup}" 
              SelectionChanged="{command: GroupSelectionChanged()}" 
              EmptyItemText="Select Group..."/> 
<br />

<dot:ComboBox DataSource="{value: Items}" 
              SelectedValue="{value: SelectedItem}" 
              Visible="{value: SelectedGroup != null}" /> 
<br />

{{value: SelectedItem}}
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.ComboBox.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Groups { get; set; } = { "Vegetables", "Fruits" };
        
        public string SelectedGroup { get; set; }


        public string[] Items { get; set; }
        
        public string SelectedItem { get; set; }
                


        public void GroupSelectionChanged()
        {
            if (SelectedGroup == "Fruits")
            {
                Items = new string[] { "Apple", "Banana", "Orange" };
            }
            else if (SelectedGroup == "Vegetables")
            {
                Items = new string[] { "Broccolini", "Lettuce", "Cabbage" };
            }
            else
            {
                Items = new string[] { };
            }
        }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message