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.
          • Small image Apple
          • Small image Bananas
          • Small image Lemon
          • Small image Broccoli
          • Small image Strawberry
          • Small image Cherry
          • Small image 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

            Attributes

            TransferList

            Name Description Type Default
            Items Gets or sets the items data source for the Transfer List. List<TItem>
            ValueField Gets or sets the function used to get the value field from the supplied data source. Func<TItem, string>
            TextField Gets or sets the function used to get the text field from the supplied data source. Func<TItem, string>
            Mode Defines the behavior mode of the Transfer List. ListGroupMode Selectable
            SelectionMode Defines the selection mode of the Transfer List. ListGroupSelectionMode Single
            Scrollable Makes the Transfer List scrollable by adding a vertical scrollbar. bool true
            ChildContent Specifies the content to be rendered inside the Transfer List. RenderFragment
            ShowMoveAll Enables the "Move All" Actions. bool true
            MoveButtonsColor Defines the color of the move buttons. Color Primary
            MaxHeight Sets the TransferList MaxHeight. Defaults to 300px. string 300px
            ItemsStart Gets or sets the items in the start list. List<TItem>
            ItemsStartChanged Gets or sets the event callback for changes in the start list. EventCallback<List<TItem>>
            ItemsEnd Gets or sets the items in the end list. List<TItem>
            ItemsEndChanged Gets or sets the event callback for changes in the end list. EventCallback<List<TItem>>
            SelectedItemStart Gets or sets item that is currently selected in the start list. TItem
            SelectedItemStartChanged Gets or sets the event callback for changes in the start list. EventCallback<TItem>
            SelectedItemEnd Gets or sets item that is currently selected in the end list. TItem
            SelectedItemEndChanged Gets or sets the event callback for changes in the end list. EventCallback<TItem>
            SelectedItemsStart Gets or sets items that are currently selected in the start list. List<TItem>
            SelectedItemsStartChanged Gets or sets the event callback for changes to the items in the start list. EventCallback<List<TItem>>
            SelectedItemsEnd Gets or sets items that are currently selected in the end list. List<TItem>
            SelectedItemsEndChanged Gets or sets the event callback for changes to the items in the end list. EventCallback<List<TItem>>
            CanMoveToStart Whether the item may be moved to the Start List. Func<TItem, bool>
            CanMoveToEnd Whether the item may be moved to the End List. Func<TItem, bool>
            ItemStartTemplate Specifies the content to be rendered inside each item of the ListView. RenderFragment<ItemContext<TItem>>
            ItemEndTemplate Specifies the content to be rendered inside each item of the ListView. RenderFragment<ItemContext<TItem>>

            Methods

            Name DescriptionReturnParameters
            MoveSelectedEnd() Moves selected items from the start list to the end list. Task
            MoveSelectedStart() Moves selected items from the end list to the start list. Task
            MoveAllEnd() Moves all items from the start list to the end list. Task
            MoveAllStart() Moves all items from the end list to the start list. Task
            On this page