This is a migrated thread and some comments may be shown as answers.

Rating in Grid column

2 Answers 173 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andrey
Top achievements
Rank 1
Veteran
Andrey asked on 22 May 2020, 03:43 PM

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()

2 Answers, 1 is accepted

Sort by
0
Andrey
Top achievements
Rank 1
Veteran
answered on 26 May 2020, 09:01 AM

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()
    });
}
});
0
Nikolay
Telerik team
answered on 26 May 2020, 09:29 AM

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.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Andrey
Top achievements
Rank 1
Veteran
Answers by
Andrey
Top achievements
Rank 1
Veteran
Nikolay
Telerik team
Share this question
or