Local Binding
The Telerik UI ListBox for ASP.NET Core enables you to bind it to local data.
When you use complex data objects, use the DataTextField and DataValueField properties to notify the ListBox about your preferred binding behavior.
@(Html.Kendo().ListBox()
.Name("optional")
.Toolbar(toolbar =>
{
toolbar.Position(ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.MoveUp()
.MoveDown()
.TransferTo()
.TransferFrom()
.TransferAllTo()
.TransferAllFrom()
.Remove()
);
})
.ConnectWith("selected")
.BindTo(ViewBag.Attendees) // Bind the ListBox to a collection
)
@(Html.Kendo().ListBox()
.Name("selected")
.BindTo(new List<SelectListItem>())
.Selectable(ListBoxSelectable.Multiple)
)
@{
var tools = new string[] { "moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove" };
var selectedItems = new List<SelectListItem>();
}
<kendo-listbox name="optional"
connect-with="selected"
bind-to="@ViewBag.Attendees">
<toolbar position="ListBoxToolbarPosition.Right"
tools="tools"/>
</kendo-listbox>
<kendo-listbox name="selected"
bind-to="selectedItems"
selectable="ListBoxSelectable.Multiple">
</kendo-listbox>
public class ListBoxController : Controller
{
public ActionResult Index()
{
ViewBag.Attendees = new List<SelectListItem>
{
new SelectListItem(){ Value = "1", Text = "Steven White" },
new SelectListItem(){ Value = "2", Text = "Nancy King" },
new SelectListItem(){ Value = "3", Text = "Nancy Davolio" },
new SelectListItem(){ Value = "4", Text = "Michael Leverling" },
new SelectListItem(){ Value = "5", Text = "Andrew Callahan" },
new SelectListItem(){ Value = "6", Text = "Michael Suyama" }
};
return View();
}
}