Hi folks, I have what I would think is a simple situation but I'm scratching my head and hope that I'm missing something obvious.
I have a grid that has 3 columns. The grid is in a dialog component. I want the grid to fill the width of the dialog but also have my 3 columns fill the width of the grid. One of the columns needs to be more narrow than the others.
The behavior I'm seeing is that when I resize the dialog using a CSS transform the "grid" resizes with it, regardless of if I call reflow or not, but the column "container" doesn't.
What I mean by this is that the columns don't resize with the grid so I tried manually changing the column sizes when the transition occurs and found that the column somewhat resizes but all of the graphical elements related to the column don't change so it looks like the column didn't resize but the data moved as if it did.
Here is what it looks like if I don't resize the columns manually (note that the red border is to show the size of the grid):
Here is what it looks like if I resize manually after transform:
Here is my grid and column definition:
<igx-grid id="dummyId" *ngIf="dummyCondition" #dummyNameForViewChild [data]="dummyDataSet"
[allowFiltering]="false" width="100%" style="border: solid 1px red;">
<ng-template igxCell let-cell="cell" let-row="row" >
<button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex, cell)">
<igx-column [field]="'BlockDate'" [header]="'Date'" [editable]="false" [sortable]="true"
[resizable]="true" [formatter]="dateFormatter" [dataType]="Date" >
<igx-column [field]="'BlockSize'" [header]="'# Rooms'" [editable]="true" [sortable]="true"
[resizable]="true" [dataType]="number" >
<ng-template igxCell let-cell="cell">
<ng-template igxCellEditor let-cell="cell">
<input type="number" name="inputEHBDays" [(ngModel)]="cell.gridAPI.get_cell_inEditMode(cell.gridID).cell.editValue" />
Any suggestions on how I can achieve this functionality?
After sleeping on it for the weekend I came back and ended up explicitly defining the width based on where the transition is. It's not ideal but it works for this case.
Hello User 42,
Currently the solution is to call IgxGridComponent.reflow API to re-calculate the grid dimensions (which, I believe is what you did). There is an issue #3639 on GitHub that seems to describe the same problem (when grid width is 100% the grid body is not resized correctly). You can subscribe to it to get notifications about its progress.
I created the issue on Github that Martin Pavlov suggested (#3639). I found a temporary solution to my problem, which would have to be modified slightly (instead of basing around navdrawer, you would base around dialog).
Link to Temp Solution