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.

Install-Package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Examples

Multiple Selection Mode

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 Mode

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

Parameters

Parameter	Description	Type	Default
`EndCaption`	Gets or sets the end caption text for the end (right) list. Used only when EndCaptionTemplate is not provided.	`string`	`"End"`
`EndCaptionTemplate`	Gets or sets the end caption template, which can be used to render a custom header or caption for the end (right) list.	`RenderFragment`	`null`
`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`
`MoveAllToEndIconName`	Defines the icon name of the move all to end (right) button.	`IconName?`	`69`
`MoveAllToStartIconName`	Defines the icon name of the move all to start (left) button.	`IconName?`	`68`
`MoveButtonsColor`	Specifies the color of the move and "Move All" buttons.	`Color`	`Primary`
`MoveButtonsIconSize`	Defines the size of the move icons.	`IconSize?`	`null`
`MoveButtonsIconStyle`	Defines the style of the move icons.	`IconStyle?`	`null`
`MoveButtonsIconTextColor`	Defines the text color of the move icons.	`TextColor`	`null`
`MoveToEndIconName`	Defines the icon name of the move to end (right) button.	`IconName?`	`73`
`MoveToStartIconName`	Defines the icon name of the move to start (left) button.	`IconName?`	`72`
`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`
`ShowCaptions`	Determines whether the captions are visible above the lists.	`bool`	`false`
`ShowMoveAll`	Determines whether the "Move All" buttons are visible between lists.	`bool`	`true`
`StartCaption`	Gets or sets the start caption text for the start (left) list. Used only when StartCaptionTemplate is not provided.	`string`	`"Start"`
`StartCaptionTemplate`	Gets or sets the start caption template, which can be used to render a custom header or caption for the start (left) list.	`RenderFragment`	`null`

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