How to add rating with half percision in grid

[Boyan]

Hi,

I'm trying to add the new kendo rating control in a grid template column. When using percision=half, the last selected item is with hidden star. .

You can check it in this dojo - https://dojo.telerik.com/@bzpetkov/OburapiH

Otherwise, if the percision is full, everything is as expected. 

Please advise. Thanks, Boyan.

[Aleksandar]

Hello Boyan,

To achieve the desired result use a template that would create an input element with a unique id, from which a Rating widget would be initialized. Then within the dataBound event 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
        });
      }

Check this dojo for an updated example.

Regards,
Aleksandar
Progress Telerik

[Boyan]

Hi Aleksandar,

That's great. 

Thanks alot, Boyan.

[Boyan]

Hi Aleks,

I'm having now another problem. Using the dataBound event didn't resolve working with remote data + including an editor behind the rating property. On edit + cancel the dataBound is not fired and the input remains ungenerated. Please check my new dojo. Any suggestions? 

Thanks, Boyan.

[Boyan]

Ok. I figured it as handle the cancel event. Here is the example if someone need it as well. Thanks again Alex,

Regards, Boyan.

[Boyan]

Hi Aleks,

I tried some other use cases and I found it's not working as MVVM pattern for example in the scheduler editor as well. Here's the dojo. The same issue is for any other template. If it requires always to recreate it manual, this mean it's not usable at all with this kind of configuration. Also, in previous example (with the grid), I was required to handle the edit event as well (ex: the user click on edit on first row, then click on edit on second row without cancel the first one) and it's such a pain.

Regards, Boyan.

[Aleksandar]

Hi Boyan,

The observed behavior, when the Rating is set to precision:"half", occurs as the template is evaluated before the content of the Window is rendered. In addition, the Rating widget contains additional logic to ensure precise rendering of the half value when the precision is set to half. Basically, when initializing the Rating widget with precision set to half the DOM content of the edit window is not available and the half star is not sized and rendered correctly. 

Having said that a possible solution to the issue could be to handle the activate event of the edit window and set the value of the Rating widget when the DOM content is available and the half star can be styled:

        editable: {
          template: $("#editor").html(),
          window: {
            activate: function(e) {
              var rating = e.sender.element.find("[data-role='rating']").getKendoRating();

              rating._updateItemsRendering(rating.value());
            }
          }
        }

You will find the updated dojo here.

Note the above is not required when the precision is set to "item" and the whole item is selected.

Regards,
Aleksandar
Progress Telerik

[Boyan]

Hi Aleks,

Yes it seems to work like this (the part with the DOM), but I believe it should not be. Please advise if I have to report it as a bug. 

Meanwhile, could you please help me with an example about gantt tooltip. Here is the dojo.

Thanks, Boyan.

[Lance | Senior Manager Technical Support]

Hello Boyan,

I wanted to take a moment to reply in this thread because tomorrow is a public holiday for the European engineering teams (in Sofia). This means there will be a small delay from Aleksander to the question of reporting the behavior as a bug or not.

Regarding your new question, we ask that you open a new Support Ticket for the Gantt questions. This is the best way to get the most from Support. It not only allows us to work on your issues in parallel and prevents long, nested-topic threads that usually lead to further delays.

But more fundamentally, this is the Kendo Rating forum thread :)

Until Aleksander can reply, thank you for your patience and understanding!

Regards,
Lance | Team Lead - US DevTools Support
Progress Telerik

[Boyan]

Hi Lance,

Thanks for your support. I know about 6th of may and I don't rush. Our office is also in Bulgaria :)

Otherwise if excusing the short question definition in my last post, it's again about kendo rating. I agree it's better to open a new issue, but if this one is called "how to add rating with half percision in grid", the new one will be "how to add rating with half percision in gantt tooltip".

Meanwhile I preffer to wait about the Aleksander answer and take no further actions before that because I rearlly appreciate his help and I believe he will provide me with a valuable solution.

Thanks again, Boyan.

[Aleksandar]

Hi Boyan,

The reason for the observed behavior of the Rating widget rendered in the Gantt tooltip is the same, as explained in my previous post.

I have logged a Bug Report on your behalf and you can monitor the status of the item via this GitHub item:

https://github.com/telerik/kendo-ui-core/issues/5751

I am afraid, however, I cannot provide a workaround at the time being. I would suggest monitoring the issue and updating the Kendo UI version used, once the issue is resolved.

Regards,
Aleksandar
Progress Telerik

[Boyan]

Hi Aleks,

Thanks a lot for the support. I'll follow it and wait until it's resolved. 

Best Regards, Boyan.