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,
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