How to get star ratings inside of a grid ?

[Web]

I have a int with a value of 1 to 5. How do I represent that with a star rating ? And to capture the event of the star being click and sent back to a web API. I have no idea how to start and my searches pointed me to nothing.

[Konstantin Dikov]

Hi,

The UI for ASP.NET MVC does not have rating helper that could be used as a custom editor for the Grid, but it should be possible to implement such editor by defining custom editor for the rating column or rendering rating in the cell directly by customizing the ClientTemplate:

• https://demos.telerik.com/kendo-ui/grid/editing-custom

Although that we do not recommend rendering editors in the column template directly, in this particular case it could be achieved with e ClientTemplate:

columns.Bound(c => c.YourRatingField)
            .ClientTemplate("#=getRatingTemplate(YourRatingField)#")
              .Width(240);

function getRatingTemplate(rating){
   ....
   ...
    return theHtmlTemplate
}

Using the rating value you can render the rating stars and furthermore, attach handler for the click event of each star for example. With the click event you can than update the underlying dataItem.



Regards,
Konstantin Dikov
Progress Telerik

[Tim]

 

Can you elaborate on what is in the template?   I have tried rendering the template directly, which partially works (I am only trying to render the Stars, not interact with them)       When this is rendered in a clientrowtemplate its not "fluid"   any suggestions?

 

function getRatingTemplate(rating){

var theHtmlTemplate = "";

if (rating >= 1 && rating < 2) {
                             theHtmlTemplate = "<span class='k-rating k-widget' tabindex='0' role='slider' aria-valuemin='1' aria-valuemax='4' aria-valuenow='"+rating+"' style=''>" +
                                 "<input id='ratingHalf' name='ratingHalf' type='hidden' value='"+rating+"' data-role='rating' class='k-hidden'/>" +
                                 "<span class='k-rating-container'><span class='k-rating-item k-state-selected' data-value='1' title='1'>" +
                                 "<span class='k-icon k-i-star'></span></span><span class='k-rating-item k-state-selected' data-value='2' title='2'>" +
                                 "<span class='k-icon k-i-star'></span></span><span class='k-rating-item k-state-selected' data-value='3' title='3'>" +
                                 "<span class='k-icon k-i-star'></span></span><span class='k-rating-item k-state-selected' data-value='4' title='4'>" +
                                 "<span class='k-rating-precision-complement' style=' left: 50%;'><span class='k-icon k-i-star-outline'>" +
                                 "</span></span><span class='k-rating-precision-part' style='width: 12px;'><span class='k-icon k-i-star'></span></span>" +
                                 "<span style='width: 24px; height: 24px; display: block;'></span></span>" +
                                 "</span></span></span>";
                         }

    return theHtmlTemplate
}

[Petar]

Hi Tim,

Can you please elaborate more on this "When this is rendered in a clientrowtemplate its not "fluid""? What functionality do you expect to have? 

One more thing I should mention is that the current thread is started back in 2018 when the Rating component wasn't available in the UI for ASP.NET MVC suite. I would suggest you check the previous link and this demo that demonstrates how the Rating can be integrated into the Grid.

You can configure the Rating to work in a Readonly mode and thus implement the targeted functionality without the implementation of complex client templates.

I hope the above examples will help you implement what you need in your application. 

Regards,
Petar
Progress Telerik