Kendo Rating in Kendo Grid

1 Answer 117 Views
Grid Rating
Top achievements
Rank 1
Niddal asked on 15 Aug 2022, 12:34 PM | edited on 15 Aug 2022, 12:42 PM


I am using kendo grid to display kendo rating. the stars are displaying on edit mode only.


        .Columns(columns =>{
            columns.Bound(p => p.languagename).Width(200).Title("Language").EditorTemplateName("_DropdownEditor").ClientTemplate("#=languagename.description#");
            columns.Bound(c =>c.speak).Width(300).Title("Speak").EditorTemplateName("_Rating").ClientTemplate("#=speak#");
            columns.Bound(p =>"Read").EditorTemplateName("_Rating").ClientTemplate("#=read#");
            columns.Bound(p => p.write).Width(300).Title("Write").EditorTemplateName("_Rating").ClientTemplate("#=write#");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        .ToolBar(toolbar => {



@(Html.Kendo().RatingFor(m => m)


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 18 Aug 2022, 06:46 AM

Hello Niddal,

Based on the shared configuration, it is expected that the Rating component is appearing only when the Edit mode is on. If I understand correctly, the requirement you are trying to use the Rating as an editor and also to display it even when the Edit mode is not on. 

The requirement is achievable but you will have to use the Rating component as a ClientTemplate and the Grid edit mode should be set to InCell. Please review the following demo in which a similar scenario is demonstrated.

Note that you have to eval() the scripts that render the Rating component when the DataBound event is fired.

    function onDataBound(e) {
        var grid = this;
        grid.table.find("tr").each(function () {
            var dataItem = grid.dataItem(this);
            var themeColor = dataItem.Discontinued ? 'success' : 'error';
            var text = dataItem.Discontinued ? 'available' : 'not available';

            $(this).find('script').each(function () {
                themeColor: themeColor,
                text: text,

            kendo.bind($(this), dataItem);

I hope this helps.


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

Grid Rating
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question