Data Binding Overview
By default, the Telerik UI ListBox for ASP.NET MVC automatically binds to data.
Immediately after the ListBox loads, the DataSource sends a query and the data is loaded to the helper. To disable this behavior, set the AutoBind option of the ListBox to false.
The Data Binding is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
@(Html.Kendo().ListBox()
.Name("optional")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.DataSource(source => source
.Read(read => read.Action("GetCustomers", "ListBox"))
)
.TemplateId("customer-item-template")
.Draggable(draggable => draggable.Placeholder("customPlaceholder"))
.DropSources("selected")
.ConnectWith("selected")
.AutoBind(false) // Prevent data binding during the initialization of the widget
.Toolbar(toolbar =>
{
toolbar.Position(ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.TransferTo()
.Remove());
})
.BindTo(new List<CustomerViewModel>())
)
<script id="customer-item-template" type="text/x-kendo-template">
<span class="k-state-default" style="background-image: url('../content/web/Customers/#:data.CustomerID#.jpg')"></span>
<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>
</script>
For more information about binding the ListBox to data, refer to the articles on: