Kendo Rating in Kendo Grid

[Niddal]

Hi,

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

GRID

@(Html.Kendo().Grid<language>()
        .Name("LanguageGrid")
        .EnableCustomBinding(true)
        .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 => p.read).Width(300).Title("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 => {
            toolbar.Create();
        })

 

_Rating.cshtml

@(Html.Kendo().RatingFor(m => m)
        .Min(1)
        .Max(5)
        .Selection("continuous")
        .Label(false)
)

 

[Yanislav]

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.  
https://demos.telerik.com/aspnet-mvc/grid

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 () {
                eval($(this).html());
            });
            
            $(this).find(".badgeTemplate").kendoBadge({
                themeColor: themeColor,
                text: text,
            });


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

I hope this helps.

 

Regards,
Yanislav
Progress Telerik