ListView

in namespace DotVVM.BusinessPack.Controls

Renders a ListView control similar to ListBox control.

Usage & Scenarios

Renders a list of items and allows the user to select one or more items.

Sample 1: Basic Usage

The DataSource property specifies a collection of strings. For each item in the collection, a list item is created.

The SelectedValues property is bound to a collection which contains all selected strings. The data-binding works in both ways, so you can either read, or modify the collection in the viewmodel and the control will be synchronized to reflect the changes.

<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}">
    <RowTemplate>
        <span>{{value: _this}}</span>
    </RowTemplate>
</bp:ListView>

<p>
    Selected items: 

    <dot:Repeater DataSource="{value: SelectedFruit}" RenderWrapperTag="false" >
        <ItemTemplate>
            <span>{{value: _this}},</span>
        </ItemTemplate>
    </dot:Repeater>
</p>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<string> Fruit { get; set; } = new List<string> {
            "Apple",
            "Bannana",
            "Orange",
            "Watermeloon"
        };

        public List<string> SelectedFruit { get; set; } = new List<string>();
    }
}

Sample 2: Select Restrictions

The MaxSelectedValues configures the maximum number of selected items in the control.

<p>Hold CTRL and select up to 3 items.</p>
<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}"
             MaxSelectedValues="3">
    <RowTemplate>
        <p>{{value: _this}}</p>
    </RowTemplate>
</bp:ListView>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<string> Fruit { get; set; } = new List<string> {
            "Apple",
            "Bannana",
            "Orange",
            "Watermeloon"
        };

        public List<string> SelectedFruit { get; set; } = new List<string>();
    }
}

Sample 3: Changed Event

The Changed event triggers a command in the viewmodel whenever the selection changes.

<p>Hold CTRL and select up to 3 items.</p>
<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}"
             MaxSelectedValues="3"
             Changed="{command: SelectionChanged()}">
    <RowTemplate>
        <p>{{value: _this}}</p>
    </RowTemplate>
</bp:ListView>

<p>You can  select {{value: RemainingSelections}} more items.</p>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int RemainingSelections { get; set; } = 3;

        public List<string> Fruit { get; set; } = new List<string> {
            "Apple",
            "Bannana",
            "Orange",
            "Watermeloon"
        };

        public List<string> SelectedFruit { get; set; } = new List<string>();

        public void SelectionChanged()
        {
            RemainingSelections = 3 - SelectedFruit.Count;
        }
    }
}

Sample 4: Display Modes

The DisplayMode property defines whether the list is vertical (Row) or horizontal (Tile).

In the Row mode, the RowTemplate property is used to define the look of a particular item.

In the Tile mode, the TileTemplate property is used to define the look of a particular item.

<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}"
             DisplayMode="List">
    <RowTemplate>
        <p>{{value: _this}}</p>
    </RowTemplate>
</bp:ListView>

<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}"
             DisplayMode="Tiles">
    <TileTemplate>
        <p>{{value: _this}}</p>
    </TileTemplate>
</bp:ListView>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<string> Fruit { get; set; } = new List<string> {
            "Apple",
            "Bannana",
            "Orange",
            "Watermeloon"
        };

        public List<string> SelectedFruit { get; set; } = new List<string>();
    }
}

Sample 5: Working with Objects

To make the SelectedValues property contain only some values from the DataSource objects (like the Id property of the object), you may use the ItemValueBinding property.

The SelectedValues will then contain only the values of the properties specified in the ItemValueBinding. Provided the values of the properties used as a value are unique, you don't need to specify the ItemKeyBinding property.

The ItemKeyBinding property is required only when the control cannot compare the objects in the DataSource collection with the objects in the SelectedValues. If the ItemValueBinding is set and makes the SelectedValues collection use primitive types that can be compared, the ItemKeyBinding property is not needed. Similarly, if the DataSource collection contains only primitive values (string, int etc.), the ItemKeyBinding property is not necessary.

<bp:ListView DataSource="{value: Cities}"
             SelectedValues="{value: SelectedCityIds}"
             ItemValueBinding="{value: Id}"
             ItemKeyBinding="{value: Id}"
             Changed="{command: SelectionChanged()}">
    <RowTemplate>
        <p>{{value: Name}}, {{value: Country}}</p>
    </RowTemplate>
</bp:ListView>

<p>Selected Ids: {{value: Summary}}</p>
using System.Collections.Generic;
using System.Linq;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Summary { get; set; }

        public List<City> Cities { get; set; } = new List<City> {
            new City { Id = 1, Name = "Prague", Country = "Czech Republic" },
            new City { Id = 2, Name = "Bratislava", Country = "Slovakia" }
        };

        public List<int> SelectedCityIds { get; set; } = new List<int>();

        public void SelectionChanged()
        {
            Summary = string.Join(", ", SelectedCityIds.Select(c => c.ToString()));
        }
    }
}
namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample5
{
    public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

Properties

Name Type Description Notes Default Value
property icon AllowDragDropSelection Boolean
attribute
inner element
static value
bindable
default
True
property icon AutoFocus Boolean Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false.
attribute
inner element
static value
bindable
default
False
property icon AutoFocusFirstItem Boolean
attribute
inner element
static value
bindable
default
True
property icon DataSource IEnumerable
attribute
inner element
static value
bindable
default
null
property icon DisplayMode ListViewDisplayMode Gets or sets the display mode of the ListView control. The default value is List
attribute
inner element
static value
bindable
default
List
property icon EmptyDataTemplate ITemplate Gets or sets the template which will be displayed when the DataSource is empty.
attribute
inner element
static value
bindable
default
null
property icon ItemEnabledBinding IValueBinding<Boolean?>
attribute
inner element
static value
bindable
default
null
property icon ItemKeyBinding IValueBinding Gets or sets the binding which retrieves the unique key of a DataSource item.
attribute
inner element
static value
bindable
default
null
property icon ItemValueBinding IValueBinding Gets or sets the binding which retrieves a value from a DataSource item. It retrieves the whole item by default.
attribute
inner element
static value
bindable
default
null
property icon MaxSelectedValues Int32? Gets or sets the number of values that can be selected.
attribute
inner element
static value
bindable
default
null
property icon RowTemplate ITemplate Gets or sets the Row template for each ListView item. It is rendered when the DisplayMode is set to List.
attribute
inner element
static value
bindable
default
null
property icon SelectedValues IEnumerable Gets or sets values of items selected by user.
attribute
inner element
static value
bindable
default
null
property icon TabIndex Int32 Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order.
attribute
inner element
static value
bindable
default
0
property icon TileTemplate ITemplate Gets or sets the Tile template for each ListView item. It is rendered when the DisplayMode is set to Tiles.
attribute
inner element
static value
bindable
default
null
property icon ToggleSelectionOnClick Boolean
attribute
inner element
static value
bindable
default
False

Events

Name Type Description
event icon Changed Command Gets or sets the command that will be triggered when the selected values are changed.

HTML produced by the control