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

How to add rating with half percision in grid

11 Answers 100 Views
Rating
This is a migrated thread and some comments may be shown as answers.
Boyan
Top achievements
Rank 1
Boyan asked on 28 Apr 2020, 11:16 AM

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.

11 Answers, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 30 Apr 2020, 10:27 AM

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

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.
0
Boyan
Top achievements
Rank 1
answered on 30 Apr 2020, 01:22 PM

Hi Aleksandar,

That's great. 

Thanks alot, Boyan.

0
Boyan
Top achievements
Rank 1
answered on 01 May 2020, 05:03 PM

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.

0
Boyan
Top achievements
Rank 1
answered on 02 May 2020, 05:18 AM

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

Regards, Boyan.

0
Boyan
Top achievements
Rank 1
answered on 03 May 2020, 04:23 PM

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.

0
Aleksandar
Telerik team
answered on 04 May 2020, 10:39 AM

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

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.
0
Boyan
Top achievements
Rank 1
answered on 04 May 2020, 12:19 PM

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.

0
Lance | Manager Technical Support
Telerik team
answered on 05 May 2020, 11:55 PM

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

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.
0
Boyan
Top achievements
Rank 1
answered on 06 May 2020, 05:45 AM

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.

0
Aleksandar
Telerik team
answered on 07 May 2020, 02:52 PM

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

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.
0
Boyan
Top achievements
Rank 1
answered on 11 May 2020, 07:44 AM

Hi Aleks,

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

Best Regards, Boyan.

Tags
Rating
Asked by
Boyan
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Boyan
Top achievements
Rank 1
Lance | Manager Technical Support
Telerik team
Share this question
or