Item Templates

The ListBox provides templates for its items that are passed as a function or string.

Razor

    @(Html.Kendo().ListBox()
        .Name("optional")
        .DataTextField("ContactName")
        .DataValueField("CustomerID")
        .DataSource(source => source
            .Read(read => read.Action("GetCustomers", "ListBox")) // Configure the data source for remote data binding
        )
        .TemplateId("customer-item-template") // Configure the item template
        .Draggable(draggable => draggable.Placeholder("customPlaceholder")) // Create a custom placeholder
        .DropSources("selected")
        .ConnectWith("selected")
        .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                .Remove());
        })
        .BindTo(new List<CustomerViewModel>())
    )

    @(Html.Kendo().ListBox()
        .Name("selected")
        .DataTextField("ContactName")
        .DataValueField("CustomerID")
        .TemplateId("customer-item-template")
        .Draggable(draggable => draggable.Placeholder("customPlaceholder"))
        .DropSources("optional")
        .ConnectWith("optional")
        .BindTo(new List<CustomerViewModel>())
    )

Razor

    @{
        var dropSources = new string[] { "selected" };
        var dropSources2 = new string[] { "optional" };
        var customers = new List<CustomerViewModel>();
        var customers2 = new List<CustomerViewModel>();
        var tools = new string[] { "moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove" };
    }

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

    <kendo-listbox name="selected"
                    datatextfield="ContactName"
                    datavaluefield="CustomerID"
                    template-id="customer-item-template"
                    drop-sources ="dropSources2"
                    connect-with="opitonal"
                    bind-to="customers2">
            <draggable enabled="true" placeholder="customPlaceholder"/>
    </kendo-listbox>

IndexController.cs

    public class ListBoxController : Controller
    {
        private IProductService productService;

        public ListBoxController(
            IProductService service)
        {
            productService = service;
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult GetCustomers()
        {
            var customers = Enumerable.Empty<CustomerViewModel>();

            using (var northwind = GetContext())
            {
                customers = northwind.Customers.Select(customer => new CustomerViewModel
                {
                    CustomerID = customer.CustomerID,
                    CompanyName = customer.CompanyName,
                    ContactName = customer.ContactName,
                    ContactTitle = customer.ContactTitle,
                    Address = customer.Address,
                    City = customer.City,
                    Region = customer.Region,
                    PostalCode = customer.PostalCode,
                    Country = customer.Country,
                    Phone = customer.Phone,
                    Fax = customer.Fax,
                    Bool = customer.Bool
                }).ToList();
            }

            return Json(customers);
        }
    }

scripts

    <script id="customer-item-template" type="text/x-kendo-template">
        <span class="k-state-default" style="background-image: url(@Url.Content("~/shared/web/Customers/")#:data.CustomerID#.jpg);"></span>
        <span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>
    </script>

    <script>
        function customPlaceholder(draggedItem) {
            return draggedItem
                    .clone()
                    .addClass("custom-placeholder")
                    .removeClass("k-ghost");
        }
    </script>

See Also

• Templates in the Telerik UI ListBox for ASP.NET Core (Demo)
• Server-Side API