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

Using EJ1 & EJ2


In my Asp.NET Core, I've been using EJ2.

I wanted a rating control so I was asked to use EJ1 as well.

I have two issues:

(1) Individually:   

<ej-rating id="test" value="5"/>
<input id="test">
and a text box is shown where a rating control is expected.

(2) In a Grid:

<ej-rating id="test" value="5"/>
shows as same
<ej-rating id="test" value="5"/>
Nothing gets shown in the grid 
and even the click doesn't have any effect.

Platform version:

Using Asp.NET Core 2.1 of:
Syncfusion EJ 
Syncfusion EJ.AspNet.Core
Syncfusion EJ2.AspNet.Core 

1 Reply

PO Prince Oliver Syncfusion Team March 18, 2019 08:41 AM UTC

Hi John,  
Thank you for contacting Syncfusion Support.  
Based on your requirement, we have prepared a sample by combining EJ1 Rating and EJ2 Grid. To render EJ1 and EJ2 together, you need to add the required namespace in _ViewImports.cshtml file. Kindly refer to the following code. 
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
@addTagHelper "*, Syncfusion.EJ" 
@addTagHelper *, Syncfusion.EJ2 
Kindly follow the steps in below UG link for script references.  
After adding required namespace and script reference, you can render the controls on the page. We have rendered EJ1 Rating control inside EJ2 Grid using template property of Grid column. Please refer to the below given code 
    EJ1 Rating 
    <ej-rating id="test" value="5" /> 
    <ejs-grid id="Grid" dataSource="@ViewBag.gridData" allowPaging="true" queryCellInfo=" template"> 
            <e-grid-column headerText=" Employee Rating " width="200" template="#columnTemplate"></e-grid-column> 
            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" format="yMd" width="130"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd" width="140"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
<script type="text/x-jsrender" id="columnTemplate"> 
    <input type="text" class="rating" />    
<script type="text/javascript"> 
    function template a(args) { 
        if (args.data.EmployeeID < 5) { 
            $(args.cell).find(".rating").ejRating({ allowReset: false, value:"4" }); 
        else $(args.cell).find(".rating").ejRating({ allowReset: false, value: "3" }); 
Now Rating will be rendered inside EJ2 Grid as shown below 
We attached the sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/143357/ze/EJ1andEJ2379177900  
For further reference, Kindly refer to the following UG documentation link 
Please let us know if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon