使用自定义模板作为评级的Kendo ui dropdownlist jQuery无法正确显示所选值-Telerik Kendo UI jQuery

问题描述

我正在尝试显示带有自定义模板的Kendo UI下拉列表。每个项目都应显示带有动态最大值的等级。它工作正常,这一点,但是当选择一个项目选择项目不显示等级控制,从来没有呈现为评级,只是一个普通的输入。感谢帮助。

o

<!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 (将#修改为@)