Version: 1.1 | 2.0 |

ListView

in namespace DotVVM.BusinessPack.Controls

Renders a ListView control similar to ListBox control.

Properties

Name Type Description Notes Default Value
AllowDragDropSelection Boolean
attribute
inner element
static value
bindable
default
True
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
AutoFocusFirstItem Boolean
attribute
inner element
static value
bindable
default
True
DataSource IEnumerable
attribute
inner element
static value
bindable
default
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
EmptyDataTemplate ITemplate Gets or sets the template which will be displayed when the DataSource is empty.
attribute
inner element
static value
bindable
default
ItemEnabledBinding IValueBinding<Boolean?>
attribute
inner element
static value
bindable
default
ItemKeyBinding IValueBinding Gets or sets the binding which retrieves the unique key of a DataSource item.
attribute
inner element
static value
bindable
default
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
MaxSelectedValues Int32? Gets or sets the number of values that can be selected.
attribute
inner element
static value
bindable
default
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
SelectedValues IEnumerable Gets or sets values of items selected by user.
attribute
inner element
static value
bindable
default
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
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
ToggleSelectionOnClick Boolean
attribute
inner element
static value
bindable
default
False

Events

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

Usage & Scenarios

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

HTML Rendered by the Control

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 changes will get synchronized with the control.

<bp:ListView DataSource="{value: Fruit}"
             SelectedValues="{value: SelectedFruit}">
    <RowTemplate>
        <p>{{value: _this}}</p>
    </RowTemplate>
</bp:ListView>
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; }
    }
}

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