Я пытаюсь отобразить кнопку справа от элемента в списке KendoComboBox, на который в данный момент наведен курсор. Это возможно? Как мне это сделать?
(Конечная цель состоит в том, что при нажатии этой кнопки текст соответствующего элемента должен стать редактируемым полем.)
Я начал со следующей демонстрации и просмотрел documentation, но я не могу найти упоминания о появлении всплывающей кнопки рядом с элементом в список (почти как боковое всплывающее меню с единственным элементом, кнопкой, для каждого элемента в KendoComboBox).
Я включил свой текущий код прототипирования ниже. Я могу сделать так, чтобы «licenseHoverButton» отображался в элементе списка, но я не уверен, как сделать так, чтобы он отображался рядом.
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section">
<h2>Licenses</h2>
<input id="licenses" style="width: 400px;"/>
</div>
<script id="template" type="text/x-kendo-tmpl">
<div class="licenseListItem">
# if (data.expired) { #
<p class="licenseName">#=data.name# (Expired)</p>
<button class="licenseHoverButton">Remove</button>
#} else { #
<p class="licenseName">#=data.name#</p>
<button class="licenseHoverButton">Rename</button>
#} #
<p class="licenseUsage">#=data.remaining#/#=data.total#GB</p>
</div>
</script>
<script>
$(document).ready(function() {
var mydata = [{ "name":"License Name", "remaining":"24", "total":"60", "expired":false},
{ "name":"1234-1234-1234-1234", "remaining":"60", "total":"60", "expired":false},
{ "name":"Old License Name", "remaining":"2", "total":"60", "expired":true}];
$("#licenses").kendoComboBox({
dataTextField: "name",
dataValueField: "name",
filter:"startswith",
template: kendo.template($("#template").html()),
dataSource: mydata
});
var combobox = $("#licenses").data("kendoComboBox");
});
</script>
<style scoped>
.demo-section {
width: 400px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 10px;
}
#licenses-list .k-item {
overflow: hidden;
}
#licenses-list .k-item .licenseHoverButton{
display: none;
}
#licenses-list .k-item.k-state-hover .licenseHoverButton {
display: block;
}
#licenses-list .k-item.k-state-hover .licenseUsage {
display: none;
}
#licenses-list p {
margin: 0;
}
</style>
</div>
</body>
</html>
