Ant Design Blazor
Transfer
Double column transfer choice box.
When To Use
- It is a select control essentially which can be use for selecting multiple items.
- Transfer can display more information for items and take up more space.
Transfer the elements between two columns in an intuitive and efficient way.
One or more elements can be selected from either column, one click on the proper direction button, and the transfer is done. The left column is considered the source and the right column is considered the target. As you can see in the API description, these names are reflected in.
Examples
The most basic usage of Transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.
Transfer with a search box.
Advanced Usage of Transfer.
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
Custom each Transfer Item, and in this way you can render a complex datasource.
Customize render list with Table component.
Customize render list with Tree component.
Transfer API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| DataSource | ParameterUsed for setting the source data. The elements that are part of this array will be present jn the left column, except for the elements whose keys are included in AntDesign.Transfer.TargetKeys. |
IEnumerable<TransferItem> | -- |
| Titles | ParameterTitles for the columns left to right. Must be an array with 2 elements. | String[] | -- |
| Operations | ParameterLabels to display next to the icons for the operations, from top to bottom. Must be an array with 2 elements. | String[] | -- |
| Disabled | ParameterWhether the component is disabled or not | Boolean | false |
| ShowSearch | ParameterWhether to show search bars in the columns or not | Boolean | false |
| ShowSelectAll | ParameterWhether to show select all buttons in the columns or not | Boolean | true |
| TargetKeys | ParameterKeys of elements that are listed in the right column | IEnumerable<String> | -- |
| SelectedKeys | ParameterCurrently selected items | IEnumerable<String> | -- |
| OnChange | ParameterCallback executed when an item moves columns | EventCallback<TransferChangeArgs> | -- |
| OnScroll | ParameterCallback executed when a column is scrolled | EventCallback<TransferScrollArgs> | -- |
| OnSearch | ParameterCallback executed when a column is searched | EventCallback<TransferSearchArgs> | -- |
| OnSelectChange | ParameterCallbac executed when the selected items change in either column | EventCallback<TransferSelectChangeArgs> | -- |
| Render | ParameterCustom render for the items in the columns | Func<TransferItem, OneOf<String, RenderFragment>> | -- |
| Locale | ParameterLocacle used for localization of text | TransferLocale | -- |
| Footer | ParameterFooter string displayed in the footer of each column | String | -- |
| FooterTemplate | ParameterFooter content displayed in the footer of each column | RenderFragment | -- |
| ChildContent | ParameterChild content | RenderFragment | -- |
| ListStyle | ParameterA custom CSS style used for rendering the transfer columns | Func<TransferDirection, String> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |