问题描述
我正在尝试显示带有自定义模板的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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)