Added in v1.4

Blazorise Transfer List component

The TransferList component is a versatile control element in Blazor that facilitates transferring items between two lists within applications.

Transfer List components provide an intuitive way to move items between two lists. These components enhance the user experience and streamline tasks that involve item organization and categorization.

Examples

Multiple Selection Mode

In the multiple selection mode, users can transfer multiple items between two lists.

Apple
Banana
Cherry
Grapes
Orange
Pear
Strawberry

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Multiple"
              Mode="ListGroupMode.Selectable"
              Scrollable=false
              ShowMoveAll=false
              ValueField="item => item"
              TextField="item => item">
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry" };
}

Single Selection Mode

In the single selection mode, users can transfer one item at a time between two lists.

Apple
Banana
Cherry
Grapes
Orange
Pear
Strawberry

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Single"
              Mode="ListGroupMode.Selectable"
              Scrollable=false
              ShowMoveAll=false
              ValueField="item => item"
              TextField="item => item">
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry" };
}

Move All

You can enable the ShowMoveAll parameter to display the Move All buttons. These buttons allow users to move all items to the opposite list.

Apple
Banana
Cherry
Grapes
Orange
Pear
Strawberry

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Multiple"
              Mode="ListGroupMode.Selectable"
              Scrollable=false
              ShowMoveAll
              ValueField="item => item"
              TextField="item => item">
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry" };
}

Bind Lists

You can bind to both lists. The ItemsStart and ItemsEnd parameters track the items in the first and second lists, respectively. You may also provide the starting items for each list. If the opposite list is empty, the list will be populated with the remaining items.

Cherry
Strawberry

Apple
Banana
Grapes
Orange
Pear

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Single"
              Mode="ListGroupMode.Selectable"
              Scrollable=false
              ShowMoveAll=false
              @bind-ItemsStart=@listStart
              @bind-ItemsEnd=@listEnd
              ValueField="item => item"
              TextField="item => item">
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry" };
    private List<string> listStart = new List<string> {"Cherry", "Strawberry" };
    private List<string> listEnd;

}

Scrollable

If you have a large number of items, you can enable the Scrollable parameter to add a vertical scrollbar to the Transfer List. And control the maximum height by using the MaxHeight parameter.

Cherry
Strawberry

Apple
Banana
Grapes
Orange
Pear
Watermelon
Pineapple
Mango
Blueberry
Raspberry
Kiwi
Peach
Plum
Pomegranate
Coconut
Lemon
Lime
Cantaloupe
Honeydew
Avocado
Fig
Guava
Passion Fruit
Papaya
Apricot
Cranberry
Blackberry
Currant
Lychee
Dragon Fruit
Tangerine
Nectarine
Persimmon
Star Fruit
Quince
Kumquat
Elderberry

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Single"
              Mode="ListGroupMode.Selectable"
                Scrollable
               MaxHeight="500px"
               ShowMoveAll=false
               @bind-ItemsStart=@listStart
               @bind-ItemsEnd=@listEnd
               ValueField="item => item"
               TextField="item => item">
 </TransferList>

@code {
    private List<string> list = new List<string> {
        "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry",
        "Watermelon", "Pineapple", "Mango", "Blueberry", "Raspberry",
        "Kiwi", "Peach", "Plum", "Pomegranate", "Coconut", "Lemon",
        "Lime", "Cantaloupe", "Honeydew", "Avocado", "Fig", "Guava",
        "Passion Fruit", "Papaya", "Apricot", "Cranberry", "Blackberry",
        "Currant", "Lychee", "Dragon Fruit", "Tangerine", "Nectarine",
        "Persimmon", "Star Fruit", "Quince", "Kumquat", "Elderberry"
    };

    private List<string> listStart = new List<string> { "Cherry", "Strawberry" };
    private List<string> listEnd;

}

Can Move

You may customize which of the items are able to be moved by utilizing the CanMoveToStart and CanMoveToEnd parameters.

Apple
Banana
Cherry
Grapes
Orange
Pear
Strawberry

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Single"
              Mode="ListGroupMode.Selectable"
              CanMoveToEnd="@(item => item != "Orange")"
              CanMoveToStart="@(item => item != "Strawberry" && item != "Cherry")"
              Scrollable=false
              ShowMoveAll
              ValueField="item => item"
              TextField="item => item">
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Banana", "Cherry", "Grapes", "Orange", "Pear", "Strawberry" };
}

Customize

You may customize the look of each of the transfer list by utilizing the ItemStartTemplate and ItemEndTemplate parameters.

Apple
Bananas
Lemon
Broccoli
Strawberry
Cherry
Cabbage

<TransferList TItem="string"
              Items="@list"
              SelectionMode="ListGroupSelectionMode.Single"
              Mode="ListGroupMode.Selectable"
              Scrollable
              ShowMoveAll=false
              ValueField="item => item"
              TextField="item => item">
    <ItemStartTemplate>
        @(transferListItemContent( context ))
    </ItemStartTemplate>
    <ItemEndTemplate>
        @(transferListItemContent( context ))
    </ItemEndTemplate>
</TransferList>

@code {
    private List<string> list = new List<string> { "Apple", "Bananas", "Lemon", "Broccoli", "Strawberry", "Cherry", "Cabbage" };
    private List<string> listStart = new List<string>() { "Cabbage", "Broccoli" };

    private RenderFragment<Blazorise.Components.ListView.ItemContext<string>> transferListItemContent => item => __builder =>
    {
        <Card Background=Background.Info Shadow="Shadow.Default">
            <CardBody>
                @{
                    var imageSource = $"img/fruit/{item.Value.ToLower()}.png";
                }
                <Image Source="@imageSource" Style="width:24px;height:24px;" Text="Small image" />
                @item.Value
            </CardBody>
        </Card>
    };
}

API

Parameters

Parameter	Description	Type	Default
`ItemEndTemplate`	Defines the template used to render items in the end (right) list.	`RenderFragment<ItemContext<TItem>>`	`null`
`Items`	Provides the complete collection of items managed by the transfer list.	`List<TItem>`	`null`
`ItemsEnd`	Gets or sets the items displayed in the end (right) list.	`List<TItem>`	`null`
`ItemsStart`	Gets or sets the items displayed in the start (left) list.	`List<TItem>`	`null`
`ItemStartTemplate`	Defines the template used to render items in the start (left) list.	`RenderFragment<ItemContext<TItem>>`	`null`
`MaxHeight`	Sets the maximum height of each list pane. Defaults to 300px.	`string`	`"300px"`
`Mode`	Defines how the list groups behave (e.g., selectable, static). Possible values:`Static`, `Selectable`	`ListGroupMode`	`Selectable`
`MoveButtonsColor`	Specifies the color of the move and "Move All" buttons.	`Color`	`Primary`
`Scrollable`	Enables a vertical scrollbar when the list exceeds the maximum height.	`bool`	`true`
`SelectedItemEnd`	Gets or sets the currently selected item in the end (right) list.	`TItem`	`null`
`SelectedItemsEnd`	Gets or sets the currently selected items in the end (right) list for multi-selection mode.	`List<TItem>`	`null`
`SelectedItemsStart`	Gets or sets the currently selected items in the start (left) list for multi-selection mode.	`List<TItem>`	`null`
`SelectedItemStart`	Gets or sets the currently selected item in the start (left) list.	`TItem`	`null`
`SelectionMode`	Defines how many items can be selected at once in each list. Possible values:`Single`, `Multiple`	`ListGroupSelectionMode`	`Single`
`ShowMoveAll`	Determines whether the "Move All" buttons are visible between lists.	`bool`	`true`

Events

Event	Description	Type
`CanMoveToEnd`	Determines whether a specific item can be moved to the end (right) list.	`Func<TItem, bool>`
`CanMoveToStart`	Determines whether a specific item can be moved to the start (left) list.	`Func<TItem, bool>`
`ItemsEndChanged`	Event callback triggered when the end list items change.	`EventCallback<List<TItem>>`
`ItemsStartChanged`	Event callback triggered when the start list items change.	`EventCallback<List<TItem>>`
`SelectedItemEndChanged`	Event callback triggered when the selected item in the end list changes.	`EventCallback<TItem>`
`SelectedItemsEndChanged`	Event callback triggered when the selected items in the end list change.	`EventCallback<List<TItem>>`
`SelectedItemsStartChanged`	Event callback triggered when the selected items in the start list change.	`EventCallback<List<TItem>>`
`SelectedItemStartChanged`	Event callback triggered when the selected item in the start list changes.	`EventCallback<TItem>`
`TextField`	Function used to extract the display text field from an item.	`Func<TItem, string>`
`ValueField`	Function used to extract the unique value field from an item.	`Func<TItem, string>`

Methods

Method	Description	Return
`MoveSelectedEnd`	Moves the currently selected item(s) from the start (left) list to the end (right) list, based on SelectionMode.	`Task`
`MoveSelectedStart`	Moves the currently selected item(s) from the end (right) list to the start (left) list, based on SelectionMode.	`Task`
`MoveAllEnd`	Moves all eligible items from the start (left) list to the end (right) list.	`Task`
`MoveAllStart`	Moves all eligible items from the end (right) list to the start (left) list.	`Task`