0

我正在尝试使用自定义模板显示 Kendo UI 下拉列表。每个项目都应显示具有动态最大值的评级。It works fine to this point but when select one item the select item doesn't display the rating control and never render it as rating and is just a normal input. 感谢帮助。

○

<!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>
4

1 回答 1

1

尝试这个：

function onSelect(e)
{                 
    setTimeout(function () {
        $('.ratingSelected').kendoRating();
    }, 0);
}

这至少会将所选值呈现为评级控件，并希望使您能够继续使用您的解决方案。

你在这里有一个竞争条件。选择后，kendo 会呈现值模板，并且在您使用 jquery 定位的选择事件中，将呈现被呈现的元素。除了那个时候它实际上还没有在 DOM 中。

该 setTimeout 让模板渲染首先完成。

于 2020-09-26T23:11:44.717 回答