any chance to generate Rating control in the PDF

GemBox.Document
1

I need to have in my PDF document very close to the following:

image
image837×141 1.56 KB

is it possible ? and if yes, please advise

2

Hi,

On the following link, you can find the example for drawing shapes:

And on the following link, you can find the example for drawing text:

So in short, try creating multiple rectangles and write text above their locations.

I hope this helps.

Regards,
Mario

3

Thank you and sorry that I have not mentioned it in the beginning. We are using HTML

var html = _pdfHtmlAdjustmentService.ProcessHtml(summary.Summary);
var document = _documentSummaryPdfService.CreateSummary(html);

and

   var htmlLoadOptions = new HtmlLoadOptions();
   using var htmlStream = new MemoryStream(htmlLoadOptions.Encoding.GetBytes(content));
   DocumentModel document = DocumentModel.Load(htmlStream);

And even if we have “border 1px” and etc in our HTML - it’s not displayed in PDF.

Do you think, that we have missed something?
styling in HTML should be displayed in PDF in the same way?

Thanks,
Alex

4

Hi Alex,

Please send us your HTML content so we can investigate it.

Regards,
mario

5

Hello.
Sorry for the delay. Here is the HTML.

It should look like

image
image731×106 1.25 KB

<html>
    <style>
        .numeric-rating {
  line-height: 3.5em;
  font-size: 1em;
  .rating-box {
    cursor: pointer;
    text-align: center;
    padding: 0.4em 1.1em;
    margin: 0.2em;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    transition:
      background-color 0.3s,
      color 0.3s;

    &:hover {
      background-color: #f0f0f0;
    }

    &.selected {
      background-color: #ffc107;
      color: white;
    }
  }
}
    </style>

    <body>
        <ey-display-rating _ngcontent-ng-c831470693="" _nghost-ng-c679851103="" ng-reflect-max-rating="10" ng-reflect-rating-type="Number" ng-reflect-rating-value="5" ng-reflect-is-disabled="true">
    <div _ngcontent-ng-c679851103="" class="container">
        <div _ngcontent-ng-c679851103="" class="d-flex row" ng-reflect-ng-switch="Number">
            <div _ngcontent-ng-c679851103="" class="numeric-rating col-12">
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 1 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 2 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 3 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 4 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only selected" id="ratundefined" tabindex="-1"> 5 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 6 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 7 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 8 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 9 </span>
                <span _ngcontent-ng-c679851103="" numberratingvalue="99" class="rating-box read-only" id="ratundefined" tabindex="-1"> 10 </span>
            </div>
        </div>
    </div>
</ey-display-rating>
    </body>
</html>
6

Unfortunately, GemBox.Document currently doesn’t support CSS nesting.
Another problem is that inline-level elements in Word documents don’t have padding and margin.

I’m afraid you’ll need to use a different approach.
For example, can you use table cells to represent those rating controls? However, the problem with table cells is that you can’t specify rounded borders.