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

Rating is displayed in two lines in a data grid

Hey,

The rating stars are being shown in two lines in spite of giving longer width.

Could you please let me know how I could show all 5 stars in a single line in a data grid?

Thank you.
John

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 8, 2019 03:03 AM

Hi John, 

Greetings from Syncfusion support. 

Before proceeding to your query please provide the following details. 

  1. Share the screen shot or video demonstration of the issue.
  2. Share the Grid code example.
  3. Do you specify the width for that template column (rating column) ?
  4. Share the Essential Studio version details.
  5. Do you have ej 1 Rating control inside a ej 2 Grid control ?

Regards, 
Thavasianand S. 



JS John Stephen Mangam April 9, 2019 01:56 AM

Dear Thavasianand,

Please find the information that you requested:
  • Share the screen shot or video demonstration of the issue.
Attached a zip file
  • Share the Grid code example.
<e-grid-columns>
        <e-grid-column field="x1" isIdentity="true" isPrimaryKey="true" allowSorting="false" allowFiltering="false" visible="false"></e-grid-column>
        <e-grid-column field="x2" headerText="x2" textAlign="Left" width="200px"></e-grid-column>
        <e-grid-column field="x3" headerText="x3" textAlign="Left" width="160px"></e-grid-column>
        <e-grid-column field="x4" headerText="x4" textAlign="Left" template="#mediaPlayer" width="270px" minWidth="50px"></e-grid-column>
        <e-grid-column field="Rating" headerText="Rating" textAlign="Left" width="200px" template="#UpdateRatingGridRowCommand"></e-grid-column>
        <e-grid-column field="x6" headerText="x" textAlign="Left" width="120px" template="#someGridRowCommand"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

  • Do you specify the width for that template column (rating column) ?
<script id="UpdateRatingGridRowCommand" type="text/x-template">
    <input class="ratingControl" id="${Id}" value="${Rating}" />
</script>
  • Share the Essential Studio version details.
- syncfusion.ej\16.4.0.54
- syncfusion.ej2.aspnet.core\16.4.0.54
  • Do you have ej 1 Rating control inside a ej 2 Grid control ?
Yes, that's true

Attachment: grid_c23f2126.zip


TS Thavasianand Sankaranarayanan Syncfusion Team April 10, 2019 04:29 AM

Hi John, 

We have tried to reproduce the issue at our end, but it is unsuccessful. We have applied the same properties for rating column. But we cannot reproduce the issue. We have attached the sample for your reference. 


If you still faced the issue please share the following details:  
  1. Full Grid code example.
  2. Have you used any other events except queryCellInfo
  3. Reproduce the issue in given sample If possible

Regards, 
Thavasianand S. 



JS John Stephen Mangam May 8, 2019 08:17 AM

Hi,

Here's my code for queryCellInfo:

function CommonGridCellTemplate(args) {
        $(args.cell).find(".ratingControl").ejRating({
            allowReset: false, value: args.data.Rating, change:
                function changedRating(args) {
                ...

Thank you.


RS Renjith Singh Rajendran Syncfusion Team May 9, 2019 07:35 AM

Hi John, 

We have checked in our sample with your shared code snippet. But we are still unable to reproduce the issue at our end. We have attached the sample for your reference. If you still faced the issue please share the following details. 
  1. Reproduce the issue in above sample and revert to us
  2. Please share the snippet of Grid properties you have used in your sample


Please get back to us with the above details, So we colud provide a better solution as soon as possible. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Live Chat Icon For mobile
Up arrow icon