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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to embed a rating control inside a custom template field

Thread ID:

Created:

Updated:

Platform:

Replies:

128105 Jan 2,2017 09:34 PM UTC Jan 4,2017 04:22 AM UTC ASP.NET Core 3
loading
Tags: Grid
dsapo
Asked On January 2, 2017 09:34 PM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


dsapo
Replied On January 3, 2017 04:37 PM UTC

Thanks Seeni it worked perfectly.

Regards

David

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;