fix(igxGrid): Grid should render all columns when grid width is set to null.

[MayaKirova]

Closes #5288

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code
• This PR includes API docs for newly added methods/properties
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes
• This PR includes behavioral changes and the feature specification has been updated with them

[3phase]

When setting igx-grid's width property to null, space is being added. That bug doesn't persist below 8.0.x and in case width is set to a value, for instance 100%, as well.
The bug fixes itself automatically when a column resize is made.

[MayaKirova]

@3phase Please re-test.

[3phase]

The bug persists on versions 8.0.x and above.
The tested samples are Grid Filter Template and Grid Column Resizing.
The first tested sample breaks on the last column and appends space for almost one full-size column at the end. When one attempts to resize a random column, the breaks are getting fixed and the behavior is as expected.
The second tested sample adds y-scrollbar but on resize hides it.
I'm attaching screenshots of both samples while broken.

Grid Filter Template:

Grid Column Resize:

[MayaKirova]

@3phase Please re-test again :)

[3phase]

Works now 👀

[MayaKirova]

@ChronosSF

• CellEditing sample - Content renders fine for me when width is set to null => [width]="null".

Are you perhaps setting "null" as string and not as a value, for example width='null'? Please note that in that case the resolved value will be string and we do no have explicit covertion for such scenarios.

• Grid Selection sample - Cannot reproduce this either.
• Percentage sample - Same.

[ChronosSF]

Agree about 1. - probably didn't box the width input.

    <igx-grid #grid1 [data]="remote | async" [primaryKey]="'ProductID'"
            [rowSelectable]="selection" (onSelection)="handleRowSelection($event)"
            [width]="null" [height]="'600px'">
        <igx-column [field]="'ProductID'" [editable]="true" [width]="'80%'"></igx-column>
        <igx-column [field]="'ProductName'"></igx-column>
        <igx-column [field]="'UnitsInStock'"></igx-column>
    </igx-grid>

<div class="sample-content">
    <div class="sample-column">
        <igx-grid [allowFiltering]="true" [data]="data" [autoGenerate]="false" displayDensity="comfortable" [width]="null" height="600px" [paging]="true" [perPage]="10">
            <igx-column field="ProductName" [pinned]="true" [movable]="true" header="Product Name" width="19%" [dataType]="'string'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" [resizable]="true">
            </igx-column>
            <igx-column field="UnitsInStock" [pinned]="false" [movable]="true"  header="Units In Stock" width="19%" [dataType]="'number'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" [resizable]="true">
            </igx-column>
            <igx-column field="OrderDate" [movable]="true" header="Order Date" width="19%" [dataType]="'date'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" [resizable]="true">
                <ng-template igxCell let-cell="cell" let-val>
                    {{val | date:'dd/MM/yyyy'}}
                </ng-template>
            </igx-column>
            <igx-column field="Discontinued" [movable]="true" [resizable]="true"  header="Discontinued" width="15%" [dataType]="'boolean'" [sortable]="false" [hasSummary]="false" [editable]="true" [filterable]="false" [resizable]="true">
            </igx-column>
            <igx-column field="ReorderLevel" header="Reorder Level" [movable]="true" [resizable]="true" [dataType]="'number'" width="19%" [sortable]="false" [hasSummary]="false" [editable]="true" >
                <ng-template igxCellEditor let-cell="cell">
                    <input type="number" [(ngModel)]="cell.value" style="color: black"/>
                </ng-template>
            </igx-column>
        </igx-grid>
    </div>
</div>