How to embed a rating control inside a custom template field

[dsapo]

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]

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. 

 

http://help.syncfusion.com/js/api/ejgrid#events:templaterefresh 

 

Regards, 

Seeni Sakthi Kumar S. 

[dsapo]

Thanks Seeni it worked perfectly.

Regards

David

[Seeni Sakthi Kumar Seeni Raj]

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.