Using EJ1 & EJ2

Thread ID:	Created:	Updated:	Platform:	Replies:
143357	Mar 15,2019 01:40 PM UTC	Mar 18,2019 08:41 AM UTC	ASP.NET Core	1

Subscribe to this post

Tags: Rating

John Stephen Mangam

Asked On March 15, 2019 01:40 PM UTC

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

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

Reply | Reply with quote

Prince Oliver [Syncfusion]

Replied On 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.

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>

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

Reply | Reply with quote

Using EJ1 & EJ2

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US