Nest Rating in Listview

[CPS]

Hello

I would like to use jQuery ListView to display products for an eshop solution.

Is it possible to nest a jQuery Rating Widget inside the ListView template and set the value when binding the data to the ListView?

I use ASP.Net Core with RazorPages.

Thank u for ur support!

[Nikolay]

Hi Mirko,

It is possible to add a Kendo UI Rating inside the ListView template. Here are the steps:

 - Add an input to the template:

      <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <input id='rating_#=ProductID#' data-bind='value: SupplierID' class='rating'/>
        </div>
      </script>

 - Initialize the Rating and the binding for it inside the ListView dataBound event handler:

          dataBound: function() {
              var listView = this;
              $(this.content).find(".k-listview-item").each(function() {
                var dataItem = listView.dataItem(this);
                $(this).find(".rating").kendoRating({
                  min: 1,
                  max: 5,
                  label: false,
                  selection: "continuous"
                });
                kendo.bind($(this), dataItem);
              }) 
            }

Here is a runnable Dojo I prepared demonstrating the above:

• https://dojo.telerik.com/iHaMenat

Please let me know if you have any questions.

Regards,
Nikolay
Progress Telerik