Added in v1.4

Blazorise TransferList component

The TransferList component lets users move items between two lists with optional selection and templating.

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.

To use the TransferList component, install the Blazorise.Components package first.

Installation

The TransferList extension is part of the Blazorise.Components NuGet package.

NuGet

Install extension from NuGet.

dotnet add package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Examples

Multiple selection

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

<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

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

<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.

<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.

<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.

<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.

<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.

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

Captions

You can add captions above the lists by providing strings StartCaption and EndCaption or custom templates StartCaptionTemplate and EndCaptionTemplate. Turning the captions on or off is controlled by the ShowCaptions parameter.

In Stock

Checkout

<TransferList TItem="string"
              Items="@list"
              ValueField="item => item"
              TextField="item => item"
              ShowCaptions>
    <StartCaptionTemplate>
        <Heading4>In Stock</Heading4>
    </StartCaptionTemplate>
    <EndCaptionTemplate>
        <Heading4>Checkout</Heading4>
    </EndCaptionTemplate>
</TransferList>

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

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<TransferList />