New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Binding to Arrays
The ListBox provides options for binding it to server-side and client-side arrays.
Server-Side Arrays
When you use complex data objects, apply the DataTextField and DataValueField properties to notify the widget of your preferred binding behavior.
The following example demonstrates how to initialize the ListBox and bind it to a server-side array.
Razor
var data = new string[] {
"Washington",
"London",
"Canberra",
"Ottawa",
"Sofia",
"Moscow",
"Madrid"
};
@(Html.Kendo().ListBox().Name("listbox")
.Toolbar(x => x.Position(ListBoxToolbarPosition.Right)
.Tools(y =>
{
y.MoveUp();
y.MoveDown();
y.TransferTo();
y.TransferFrom();
y.TransferAllTo();
y.TransferAllFrom();
y.Remove();
}))
.BindTo(data)
)Client-Side Arrays
The following example demonstrates how to initialize the ListBox and bind it to a client-side array.
Razor
@(Html.Kendo().ListBox().Name("listbox")
.Toolbar(x => x.Position(ListBoxToolbarPosition.Right)
.Tools(y =>
{
y.MoveUp();
y.MoveDown();
y.TransferTo();
y.TransferFrom();
y.TransferAllTo();
y.TransferAllFrom();
y.Remove();
}))
.DataSource("dataSource")
)
<script>
var dataSource = new kendo.data.DataSource({
data: [
"Washington",
"London",
"Canberra",
"Ottawa",
"Sofia",
"Moscow",
"Madrid"]
})
</script>