[Elements] Hierarchical grid with column groups and initial pinning has bad layout

[mddragnev]

Description

In the elements project hierarchical grid pinning with column groups breaks the layout

• igniteui-angular version:
• browser:

Steps to reproduce

1. Start elements project and use the following template:

 <igc-hierarchical-grid  id="hgrid1" moving="true" height="600px" allow-filtering="true" editing="true" >
        <igc-column-group id="firstColumnGroup" pinned="false" header="General Information" collapsible="true" expanded="false">
            <igc-column field="ContactName" header="Full Name"  data-type="string" sortable="true" resizable="true" width="200px"  visible-when-collapsed="false"></igc-column>
            <igc-column id="lastname" editable="true" field="LastName" header="Last Name" data-type="string" sortable="true" resizable="true" width="200px" visible-when-collapsed="true"></igc-column>
            <igc-column field="ContactTitle" header="Title"  width="250px" data-type="string" sortable="true" resizable="true"></igc-column>
            <igc-column field="CustomerID" width="140px" resizable="true" filterable="false" visible-when-collapsed="false"></igc-column>
            <igc-column field="CompanyName" header="Company" width="140px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
            <igc-column field="Phone"  data-type="string" width="140px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
        </igc-column-group>
        
        <igc-column-group header="Address Information" pinned="true">
            <igc-column-group header="Location" collapsible="true">
                <igc-column field="FullAddress" width="300px" data-type="string" sortable="true" resizable="true" visible-when-collapsed="true"></igc-column>
                <igc-column field="Country" data-type="string" width="200px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
                <igc-column field="City" data-type="string" width="200px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
                <igc-column field="Address" data-type="string" width="200px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
                <igc-column field="PostalCode" data-type="string" width="200px" sortable="true" resizable="true" visible-when-collapsed="false"></igc-column>
            </igc-column-group>
        </igc-column-group>
    </igc-hierarchical-grid>

and the following script to init the grid

const hgridData = (await import(`/assets/${'data'}/projects-hgrid.js`)).default;
    let hgrid = document.getElementById('hgrid1');
    for (const item of hgridData) {
            const names = item.ContactName.split(' ');
            item.FirstName = names[0];
            item.LastName = names[names.length - 1];
            item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`;
        }
    hgrid.data = hgridData;

and the following data from here: https://stackblitz.com/run?file=src%2Fapp%2Fdata%2Fhierarchical-data.ts NOTE: use the CUSTOMER collection 2. Observe:

Result

You can see that the layout is broken

Expected result

The layout should be ok

Attachments

Attach a sample if available, and screenshots, if applicable.

[mddragnev]

Note: When any of the Prs regarding issue #13843 is merged then we can cherry-pick the fix for the elements branch.

[dkamburov]

@mddragnev can we do the pr to the elements branch