Grid columns with body template are not resized correctly on initialization with width='auto'

[dobromirts]

Description

Upon initialization, grid columns containing a body template have incorrect resizing when width='auto' is set. This leads to an issue where the column content overlaps with the adjacent column.

Steps to reproduce

1. Add grid component.
2. Create a body template and add it to some of the grid columns.
3. As content include a element with width that will overlap with the other columns if explicit column height or width='auto' are not set.
4. Set width='auto' to the column.
5. Start the application and observe the column widths.

Result

The column featuring the specified template is overlapping with the adjacent column.

Expected result

On initialization the columns with defined templates to be resized correctly.
The same approach works as expected for igniteui-angular grid.

Attachments

Sample - column-templates-initialization.zip

[dkamburov]

@dobromirts Can this be reproduced in the angular grid as well?

[dobromirts]

@dobromirts Can this be reproduced in the angular grid as well?

No, with angular grid on initialization, the columns containing templates are resized according to their widths

[MayaKirova]

@dobromirts @dkamburov Technically, it's not a problem with the body template itself, more with the fact that web components do not initialize instantly when injected in the DOM, so they don't have their actual size when measured. If you put something that is not a web component in the template, for example a simple button, then it will have it's actual size when rendered and will be measured correctly. Added some handling for such scenarios in angular.