DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

ListView

in namespace DotVVM.BusinessPack.Controls

Renders a ListView control similar to ListBox control.

Properties

Name Type Description Notes Default Value
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
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
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
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
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
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
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

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;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample1
{
    public class ViewModel
    {
        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;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample2
{
    public class ViewModel
    {
        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;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample3
{
    public class ViewModel
    {
        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;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample4
{
    public class ViewModel
    {
        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;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ListView.sample5
{
    public class ViewModel
    {
        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