How to retrieve a rating control's id that is embedded in a grid

[John Stephen Mangam]

 Hi,

Let's say we have a column with EJ Rating control. I would like to set the id of this rating control with the EmployeeID. I would like to retrieve its ID in the rating value changes event.

Thank you.

[Seeni Sakthi Kumar Seeni Raj]

Hi John, 

Greetings from syncfusion support. 

Query#: I would like to set the id of this rating control with the EmployeeID 

 

Based on your query we have prepared a sample and achieved your requirement by using queryCellInfo event of grid. So we suggest you to use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

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

        <e-grid-columns> 

            <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-column field="EmployeeID"  headerText="Rating column" textAlign="Left" width="120" template="#columnTemplate"></e-grid-column> 

        </e-grid-columns> 

 

    </ejs-grid> 

 

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

    

    <input type="text" id="${EmployeeID}" class="rating" />  //Using this EmployeeID field you can set the unique id 

    

</script> 

 

<script type="text/javascript"> 

    function template(args) { 

        if (args.column.field == "EmployeeID") { 

            $(args.cell).find(".rating").ejRating({         //Rendering EJ Rating control 

                value: 2 

            }); 

        } 

           } 

     

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/149706/ze/coltemp-281212118.zip 

Regards, 

Seeni Sakthi Kumar S 

[John Stephen Mangam]

Hi,

Thank you for helping me understand the way to set the id for the rating control. How to retrieve it to see/read the id of the rating?

<script type="text/javascript"> 

    function template(args) { 

        if (args.column.field == "EmployeeID") { 

            $(args.cell).find(".rating").ejRating({         //Rendering EJ Rating control 

                value: 2 

            }); 

        } 

           } 

     

</script> 

[Seeni Sakthi Kumar Seeni Raj]

Hi John, 

Thanks for the update. 

Query#: How to retrieve it to see/read the id of the rating? 

 

You can retrieve the id of the rating control in change event . Please refer the below code example for more information. 

<script type="text/javascript"> 

    function template(args) { 

        if (args.column.field == "EmployeeID") { 

            $(args.cell).find(".rating").ejRating({ 

                value: 2, 

                change: function (val) { 

                    var getID = this.element[0].id;      //retrieve the element id 

                } 

            }); 

        } 

           } 

     

</script> 

Regards, 

Seeni Sakthi Kumar S