Igniteui-angular: igx-grid: Cannot set grouped column width in percentage.

[mkamiishi]

Description

Cannot set grouped column width in percentage.

• igniteui-angular version: 7.1.9, 7.2.0-rc.1
• browser: Chrome

Steps to reproduce

Run the attached sample.

Result

Column width is not correct for col2 and col3.

Expected result

Column width should reflect the values set in width property.

Attachments

igxGrid.zip

[ddincheva]

Hello @mkamiishi ,
I have downloaded and run the attached sample, but I can not see a problem in this sample. The grid is rendered as expected and the columns are calculated correctly: When we have column groups and for specific column group there is not defined width, the width is calculated as a sum of its children width; and for each child column the width is calculated based on the size of its parent. So in the sample that you have attached col2 is 20% of the width of group1 and group1 is 40% of the width of grid component.

So what is the behavior that you expect?! Can you, please, describe in more details?

[mkamiishi]

Hi @ddincheva,

I now understand that widths of child headers are calculated based on the parent header width.

The header layout I was looking for with the attached sample is this:
"col1" - 20%, "col2" - 20%, "col3" - 20%, and "col4" - 40% - of the grid total width, where col2 and col3 are grouped into "group1" whose width is 40%(20% + 20%) of the grid total width.

I changed the html like below, but now the grid shows a horizontal scrollbar.

I would like the sum of all the column headers to be 100% of the grid width. How am I supposed to define a grid like this?

[ddincheva]

Hello @mkamiishi ,
I investigated the matter a little more deeper and currently the behavior that you want to achieve is not possible, because igx-grid provides a limited support when set the column width in percents. At the moment the predefined behavior defining the column width is the following: you can not set directly a width to a group column nor in pixels neither in percents, because in this way we prevent the case when the parent column width is not enough to fit all of its child columns. But any way, I consider your scenario for an absolutely valid and I think it is good to provide the described behavior when you set all of your column widths either in pixels and in percents and not mixing them. So I will change the label for this issue to a feature request and we will discuss and resolve this matter as soon as possible.

[zdrawku]

I wanted to provide a brief update of this requirement based on the discussion that we had with @radomirchev and @rkaraivanov. There are scenarios when having both parent and child columns set in % will cause inconsistencies and we cannot guarantee that the result will be what's expected by the end-user. We could consider the following behavior though, each child column to have its size calculated relatively to the Grid size, not based on the parent header width. Any other solution may affect the rendering performance of the grid and every resize interaction later on.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[ddincheva]

After resolving the following issue #5486 , the igxGrid now support setting column widths in both pixels and percentage.
Now when the width of a certain column is set in percentage, its width is calculated based on the grid width no matter if it is a regular column or is a child column part of column group hierarchy. The group column width can be set neither in pixels nor in percentage. Its width is always calculated as a sum of the widths of its children.
So if we want to achieve the layour described in the comment above we need to set the following values for the column widths:

<igx-grid [data]="datasource" [autoGenerate]="false" [width]="'600px'" [height]="'300px'">
<igx-column field="col1" header="col1" [width]="'20%'">
<igx-column-group header="group1">
<igx-column field="col2" header="col2" [width]="'20%'">
<igx-column field="col3" header="col3" [width]="'20%'">
</igx-column-group
<igx-column field="col4" header="col4" [width]="'40%'">

And this is the result:

[zdrawku]

Thank you @ddincheva for the thorough research and explanation. This decision is based on the discussions that we had with @radomirchev and @rkaraivanov. @mkamiishi if you have any questions or concerns do let us know.