Kendo ui dropdownlist jquery with custom template as rating not display the selected value properly - telerik kendo ui jquery

Question

I am trying to display a Kendo UI dropdown list with a custom template. Each item should display a rating with dynamic max value. 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. Appreciate if help.

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

score 1 · Answer 1 · answered Sep 26 '20 at 23:11

Try this:

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

That will at least render the selected value as a rating control and hopefully enable you to move forward with your solution.

What you have here is a race condition. Upon selection, kendo renders the value template and in the select event you are targetting with jquery the element that gets rendered. Except at that point it isn't actually in the DOM yet.

That setTimeout lets the template rendering finish first.

Kendo ui dropdownlist jquery with custom template as rating not display the selected value properly - telerik kendo ui jquery

1 Answers1