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 theDataSource
collection with the objects in theSelectedValues
. If theItemValueBinding
is set and makes theSelectedValues
collection use primitive types that can be compared, theItemKeyBinding
property is not needed. Similarly, if theDataSource
collection contains only primitive values (string
,int
etc.), theItemKeyBinding
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 | |
---|---|---|---|---|---|
AllowDragDropSelection | Boolean |
attribute
static value
|
True | ||
Attributes | Dictionary<String,Object> |
attribute
static value
|
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
static value
|
False | |
AutoFocusFirstItem | Boolean |
attribute
static value
|
True | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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
static value
bindable
|
null | |
DataSource | IEnumerable |
attribute
bindable
|
null | ||
DisplayMode | ListViewDisplayMode | Gets or sets the display mode of the ListView control. The default value is List |
attribute
static value
bindable
|
List | |
EmptyDataTemplate | ITemplate | Gets or sets the template which will be displayed when the DataSource is empty. |
inner element
static value
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
ItemEnabledBinding | IValueBinding<Boolean?> |
attribute
static value
bindable
|
null | ||
ItemKeyBinding | IValueBinding | Gets or sets the binding which retrieves the unique key of a DataSource item. |
attribute
static value
bindable
|
null | |
ItemValueBinding | IValueBinding | Gets or sets the binding which retrieves a value from a DataSource item. It retrieves the whole item by default. |
attribute
static value
bindable
|
null | |
MaxSelectedValues | Int32? | Gets or sets the number of values that can be selected. |
attribute
static value
|
null | |
RowTemplate | ITemplate | Gets or sets the Row template for each ListView item. It is rendered when the DisplayMode is set to List. |
inner element
static value
|
null | |
SelectedValues | IEnumerable | Gets or sets values of items selected by user. |
attribute
bindable
|
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
static value
|
0 | |
TileTemplate | ITemplate | Gets or sets the Tile template for each ListView item. It is rendered when the DisplayMode is set to Tiles. |
inner element
static value
|
null | |
ToggleSelectionOnClick | Boolean |
attribute
static value
|
False | ||
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
Changed | Command | Gets or sets the command that will be triggered when the selected values are changed. |