Using EJ1 & EJ2

[John Stephen Mangam]

Hey,

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"/>

shows 

as

<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"/>

but 

Nothing gets shown in the grid 

and even the click doesn't have any effect.

Platform version:

Using Asp.NET Core 2.1

16.4.0.54 of:

Syncfusion EJ 

Syncfusion EJ.AspNet.Core

Syncfusion EJ2.AspNet.Core 

[Prince Oliver]

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.  

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/render-both-ej1-and-ej2-grids-in-same-application/  

 

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 

 

<div> 

    EJ1 Rating 

</div> 

<div> 

    <ej-rating id="test" value="5" /> 

</div> 

<br/> 

<div> 

    EJ2-Grid 

    <ejs-grid id="Grid" dataSource="@ViewBag.gridData" allowPaging="true" queryCellInfo=" template"> 

        <e-grid-columns> 

            <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> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

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

    <input type="text" class="rating" />    

</script> 

 

<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" }); 

    } 

</script> 

 

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 

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/render-other-components-in-column/  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince