search

IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
571 stars 163 forks source link

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

Closed mddragnev closed 8 months ago

mddragnev commented 9 months ago

Description

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

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: Screenshot 2024-01-22 at 18 45 38

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 commented 8 months ago

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

dkamburov commented 8 months ago

@mddragnev can we do the pr to the elements branch