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.

page.dothtml
ViewModel.cs

<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",
            "Banana",
            "Orange",
            "Watermelon"
        };

        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.

page.dothtml
ViewModel.cs

<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",
            "Banana",
            "Orange",
            "Watermelon"
        };

        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.

page.dothtml
ViewModel.cs

<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",
            "Banana",
            "Orange",
            "Watermelon"
        };

        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.

page.dothtml
ViewModel.cs

<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",
            "Banana",
            "Orange",
            "Watermelon"
        };

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

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AllowDragDropSelection	Boolean		attribute inner element static value bindable default	True
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	null
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
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	null
DataSource	IEnumerable		attribute inner element static value bindable default	null
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	null
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
ItemEnabledBinding	IValueBinding<Boolean?>		attribute inner element static value bindable default	null
ItemKeyBinding	IValueBinding	Gets or sets the binding which retrieves the unique key of a DataSource item.	attribute inner element static value bindable default	null
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
MaxSelectedValues	Int32?	Gets or sets the number of values that can be selected.	attribute inner element static value bindable default	null
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
SelectedValues	IEnumerable	Gets or sets values of items selected by user.	attribute inner element static value bindable default	null
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	null
ToggleSelectionOnClick	Boolean		attribute inner element static value bindable default	False
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.

Edit on Github

ListView

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Select Restrictions

Sample 3: Changed Event

Sample 4: Display Modes

Sample 5: Working with Objects

Properties

Events

HTML produced by the control

On this page

ListView

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Select Restrictions

Sample 3: Changed Event

Sample 4: Display Modes

Sample 5: Working with Objects

Properties

Events

HTML produced by the control

On this page

Information about cookies