问题描述
我正在尝试显示带有自定义模板的Kendo UI下拉列表。每个项目都应显示带有动态最大值的等级。它工作正常，这一点，但是当选择一个项目选择项目不显示等级控制，从来没有呈现为评级，只是一个普通的输入。感谢帮助。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>
<input id="customers" style="width: 100%;"/>
<script>
$(document).ready(function() {
$("#customers").kendoDropDownList({
dataTextField: "CompanyName",dataValueField: "ID",valueTemplate: '<input id="ratingSelected" class="ratingSelected" /><span>#:data.Max#</span>',template: '<input id="rating" data-role="rating" class="rating" data-rate="1" data-max="#:data.Max#" />' +
'<span class="k-state-default"><p>#: data.CompanyName #</p></span>',dataSource: [
{
"ID":1,"Max": 1,"CompanyName": "test 1"
},{
"ID":2,"Max": 2,"CompanyName": "test 2"
},{
"ID":3,"Max": 3,"CompanyName": "test 3"
}],height: 400,dataBound: onDataBound,select:onSelect
});
var dropdownlist = $("#customers").data("kendoDropDownList");
dropdownlist.value(2);
});
function onDataBound(){
$(".ratingSelected").kendorating();
$("#customers-list").find(':input[class="rating"]').each(function(e){
var max= $(this).attr("data-max");
$( this ).kendorating({max: max,enabled: false});
});
}
function onSelect(e)
{
//console.log($("#selectedrate").html());
// $("#selectedrate").hide();
// console.log($("#selectedrate").html());
//console.log(e.item[0].innerHTML);
//$('.ratingSelected').kendorating();
}
</script>
</html>
解决方法
尝试一下：
function onSelect(e)
{
setTimeout(function () {
$('.ratingSelected').kendoRating();
},0);
}
这至少会将选定的值呈现为等级控件，并希望使您能够继续进行自己的解决方案。
这里有一个比赛条件。选择后，kendo将渲染值模板，并且在select事件中，您将使用jquery定位要渲染的元素。除此之外，它实际上还不在DOM中。
setTimeout使模板渲染首先完成。