Using [innerHTML] with Angular 2 in flexGrid Cell Templates - row height issue

Posted by: ssmith on 3 January 2018, 3:39 pm EST

    • Post Options:
    • Link

    Posted 3 January 2018, 3:39 pm EST

    I have a data set returned from a service that I’m displaying in a flexGrid, and one of the columns contains simple formatted HTML (paragraph, bold, italic tags).

    I can display this with the following template:

    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item" >
        <div [innerHTML]="item.Item_Description"></div>
    </ng-template>
    
    

    The HTML blocks of data look something like this:

    Item_Description : "<p>Item One</p><p>Item Two</p><p>Item Three<br /></p>"
    
    

    However, no matter how I try to apply CSS styles to the row and contents, the entire row (and every row, even the empty ones) becomes almost the height of the screen, even though the displayed content may be only a few lines.

    Is there another / better way to handle this, or a way to constrain the row height to only the content contained within?

  • Posted 4 January 2018, 4:00 am EST

    Hi Smith,

    We are sorry, we are unable to replicate the issue at our end with the latest build version 5.20173.380.

    Please refer to the attached sample for the same.

    If the issue persists, please modify the attached sample for further investigation.

    ~Manish

    FlexGrid_innerHTML_withinCellTemplate.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels