Data Binding Overview

By default, the Telerik UI ListBox for ASP.NET Core 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.

Telerik UI for ASP.NET Core Ninja image

The Data Binding is part of Telerik UI for ASP.NET Core, 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>())
    )
    @{ 
        var dropSources = new string[] { "selected" };
        var customers = new List<CustomerViewModel>();
        var tools = new string[] { "transferTo", "remove" };
    }

    <kendo-listbox name="optional"
                datatextfield="ContactName"
                datavaluefield="CustomerID"
                template-id="customer-item-template"
                drop-sources="dropSources"
                connect-with="selected"
                auto-bind="false"
                bind-to="customers">
        <datasource>
            <transport>
                <read url="@Url.Action("GetCustomers", "ListBox")"/>
            </transport>
        </datasource>
        <draggable enabled="true" placeholder="customPlaceholder" />
        <toolbar position="ListBoxToolbarPosition.Right" 
                tools="tools"/>
    </kendo-listbox>
    <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:

See Also

In this article