<!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>
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div class="kd-nodata-wrapper">
# var value = instance.input.val(); #
# var id = instance.element[0].id; #
<div>
No data found. Do you want to add new item - '#: value #' ?
</div>
<br />
<button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" onclick="addNew('#: id #', '#: value #')" ontouchend="addNew('#: id #', '#: value #')">Add new item</button>
<div>
</script>
<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
<div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
<span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>
<div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
<span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
<span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
</div>
<div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
</div>
</div>
<div class="main-container k-pb-8 k-d-flex k-flex-col">
<div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
<span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
<h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
</div>
<span class="k-d-inline-block">Favourite sport</span>
<select id="multiselect"></select>
<span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>
<div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
</div>
<div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
</div>
</div>
</div>
<style>
.demo-wrapper {
grid-template-columns: 180px 1fr;
}
.k-h4 {
line-height: 26px;
margin-bottom: 0;
}
.kd-nodata-wrapper{
display: block !important;
padding-top: 20px !important;
}
/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@media (max-width: 678px), (min-width: 821px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
.demo-wrapper {
grid-template-columns: 1fr;
}
.avatar {
display: block !important;
}
.side-container {
display: none !important;
}
.main-container {
padding-bottom: 0;
}
.content-expanded {
border-end-end-radius: 0;
border-end-start-radius: 0;
}
}
/* Breakpoint for full screen demo: max:359px */
@media (max-width: 476px) {
.avatar {
width: 32px;
height: 32px;
}
}
</style>
<script>
function addNew(widgetId, value) {
var widget = $("#" + widgetId).getKendoMultiSelect();
var dataSource = widget.dataSource;
console.log(dataSource.length)
if (confirm("Are you sure?")) {
dataSource.add({
Id: dataSource.data().length + 1,
sportName: value
});
var currentValue = widget.value();
currentValue.push(dataSource.data().length)
widget.value(currentValue);
widget.trigger("change");
}
};
$(document).ready(function() {
// create MultiSelect from input HTML element
var dataSource = new kendo.data.DataSource({
data: [
{ Id: 1, sportName: "Basketball"},
{ Id: 2, sportName: "Golf"},
{ Id: 3, sportName: "Baseball"},
{ Id: 4, sportName: "Table Tennis"},
{ Id: 5, sportName: "Volleyball"},
{ Id: 6, sportName: "Football"},
{ Id: 7, sportName: "Boxing"},
{ Id: 8, sportName: "Badminton"},
{ Id: 9, sportName: "Cycling"},
{ Id: 10, sportName: "Gymnastics"},
{ Id: 11, sportName: "Swimming"},
{ Id: 12, sportName: "Wrestling"},
{ Id: 13, sportName: "Snooker"},
{ Id: 14, sportName: "Skiing"},
{ Id: 15, sportName: "Handball"}
],
sort: { field: "sportName", dir: "asc" }
});
$("#multiselect").kendoMultiSelect({
dataTextField: "sportName",
dataValueField: "Id",
dataSource: dataSource,
filter: "contains",
placeholder: "Please select your favourite sport...",
downArrow: true,
noDataTemplate: $("#noDataTemplate").html()
});
});
</script>
</body>
</html>