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

How to get star ratings inside of a grid ?

3 Answers 112 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Web
Top achievements
Rank 1
Web asked on 18 Apr 2018, 07:19 PM
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.

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 20 Apr 2018, 06:05 AM
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:
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim
Top achievements
Rank 1
Veteran
answered on 24 Feb 2021, 11:31 AM

 

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
}

0
Petar
Telerik team
answered on 26 Feb 2021, 07:09 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Web
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Tim
Top achievements
Rank 1
Veteran
Petar
Telerik team
Share this question
or