<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
<div class="k-w-300">
<label for="customers">Search for shipping names</label>
<select id="customers"></select>
</div>
</div>
<script>
$(document).ready(function() {
$("#customers").kendoMultiSelect({
placeholder: "Select customers...",
dataTextField: "ContactName",
dataValueField: "CustomerID",
height: 400,
dataSource: {
transport: {
read: "https://demos.telerik.com/service/v2/core/Customers"
},
group: { field: "Country" }
}
});
});
</script>
</body>
</html>