Rating in Grid column

[Andrey]

Hi, Dev Team!

What is the best way to show data in column (numbers from 0 to 5) as rating with ability to change it? Thanks!

 

For grid data i use kendo.data.DataSource()

[Andrey]

Okay, I found the way with "role" and DataBound()

$("#Handover").kendoGrid({
dataSource: HandoverDS,
columns: [
    {
        field: "Value",
        filterable: { multi: true, search: true },
        template: function (dataItem) {
            return "<input id='value" + dataItem.Code + "' value='" + dataItem.Value + "' role='value' style='width: 100%;' />";
        }

    }
],
dataBound: function (e) {
    console.log("dataBound");
    document.querySelectorAll('[role="value"]').forEach(function (el) {
        $('#' + el.id).kendoRating(
            {
                min: 1,
                max: 5,
                itemTemplate: $('#rating-item-template').html(),
                selectedTemplate: $('#rating-selected-template').html(), hoveredTemplate: $('#rating-selected-template').html()
            }).getKendoRating()
    });
}
});

[Nikolay]

Hello Andrey,

I could suggest using a template to create an input element with a unique id, from which a Rating widget would be initialized. Then in the dataBound event handler initialize a Rating widget for each input element. 

dataBound:function(e){
            var items = e.sender.items();
            items.each((item,element)=>createRating(item,element))
          }
...
function createRating(item,element) {
        var grid = $("#grid").getKendoGrid();
        var dataItem = grid.dataItem(element);
        var rating = $(element).find('.ratingInGrid');
        rating.kendoRating({
          min: 1,
          max: 5,
          selection: "continuous",
          precision: "half",
          value:dataItem.rating
        });
      }

Below I am posting a small Dojo demo demonstrating the above. Let me know if you have any questions.

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

Regards,
Nikolay
Progress Telerik