Item Templates
The ListBox provides templates for its items that are passed as a function or string.
@(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>())
)
public class ListBoxController : Controller
{
private IProductService productService;
public ListBoxController(
IProductService service)
{
productService = service;
}
public ActionResult Index()
{
return View();
}
public ActionResult 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, JsonRequestBehavior.AllowGet);
}
}
<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>