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: