We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to embed a rating control inside a custom template field

Hi Support:
I have a custom grid with a column using a template defined like this:

col.Template("#detailTemplate").Add();

Inside the template we need to embed a rating control.'

I was testing something like this but the rating does not show:

<code>

<script type="text/x-jsrender" id="detailTemplate">

    @{Html.EJ().Rating("Rating").Value(5)
                                  .ShapeWidth(30)
                                  .ShapeHeight(30)
                                  .Render();


    }

</code>


For us is important to have the rating inside a template column because we will be rendering the data as follows:

Hotel California☆☆☆☆☆
11111 Pineapple St
Orlando, FL, 161171


Thanks in advanced

David

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 3, 2017 10:27 AM UTC

Hi David,  
 
Thanks for contacting Syncfusion Support. 
 
You can render the control inside the Template Column of the Grid using the TemplateRefresh event. So we suggest to assign the HTML input element for Template and render the ejRating within the TemplateRefresh event of Grid. Refer to the following code example. 
 
@{Html.EJ().Grid<object>("ColumnTemplate") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .Columns(col => 
        { 
             . . 
              . . . 
            col.Field("Rating").HeaderText("Rating") 
                .Template("<input id='RatingValue{{:OrderID}}' type='text' class='rating' />").Add(); 
            //Based on the OrderID generated Unique ID for each row's rating element 
        }) 
        .ClientSideEvents(events => events.TemplateRefresh("refreshTemplate")).Render(); 
} 
 
<script> 
    function refreshTemplate(args) { 
        if (args.column.headerText == "Rating") 
            $(args.cell).find("#RatingValue" + args.data.OrderID).ejRating({//Rendered ejRating 
                precision: ej.Rating.Precision.Exact, 
                value: args.data.Rating 
            }); 
    } 
</script> 
 
 
Refer to the following Help Document for templateRefresh event of ejGrid. 
 
 
Regards, 
Seeni Sakthi Kumar S. 



DS dsapo January 3, 2017 04:37 PM UTC

Thanks Seeni it worked perfectly.

Regards

David


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 4, 2017 04:22 AM UTC

Hi David, 
 
We are happy to hear that your requirement has been achieved. Get back to us, if you require further assistance on this. 
 
Regards, 
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon