I have already set [width]="auto" I still see "..." ellipsis at the end of my string, I don't want to see ellipsis at the end of the string, as when I load data in the igx-grid initially, it do not properly adjust the column width, as I refresh the grid this problem is resolved.Please help
<igx-column *ngFor="let col of gridColumns" [field]="col.field" [header]="col.header" [sortable]="true"
[hidden]="col.hidden" [pinned]="col.pinned" [exportExcel]="true" [resizable]="true"
[width]="'auto'" [cellClasses] = "cellClasses"
[hasSummary]="isTotalsSummaryRequired(col.field)"
[summaries]="isTotalsSummaryRequired(col.field) ? totalSummary : null">
</igx-column>
Initially it looks:after refreshing:
Hello Anupam,
Thank you for posting in our community!
I have been looking into your question and what I can say is that setting the width property to auto is the proper way to auto-size columns on initialization. If any of the cells’ values are not adjusted on initialization, this may be because initially, they are not in the viewport. Is this applicable to your scenario? Are the cells that are not adjusted outside the viewport initially?
I am asking this question because this behavior is expected as mentioned in our Auto-size columns on initialization section here:
When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included.
The IgxGrid itself cannot adjust the column width without the cells being present. If you want all records to be displayed so the columns can be properly auto-sized, you can set the IgxGrid height property to null. Please note that in this case, there is no vertical virtualization and if the grid data contains too many rows, it might have a significant impact on the browser performance, since all rows would be rendered without virtualization.
More information can be found in our Angular Grid Sizing topic.
Nevertheless, what I would suggest is setting the column width to a value in pixels or percentages that will be enough to fit the cells’ values and keep the vertical virtualization functionality.
Please let me know if you need any further information on the matter.
Sincerely, Riva Ivanova Software Developer
Riva Ivanova,The above issue was fixed by setting the IgxGrid height property to null. However, I need help with the code below:
IgxGrid
null
<igx-grid #grid1 [data]="gridDataSource$ | async" [autoGenerate]="false" [allowFiltering]="true" (toolbarExporting)="configureExport($event)" (selected)="onCellSelected($event)" [clipboardOptions]="clipboardOptions" [filterMode]="'excelStyleFilter'" [emptyGridMessage]="'Report criteria not met.'" [width]="'100%'" [rowHeight]="'35px'" [height]="'100%'"> <igx-grid-toolbar> ... igx-grid-toolbar configuration </igx-grid-toolbar> <ng-template igxExcelStyleHeaderIcon> <igx-icon>{{filterIcon}}</igx-icon> </ng-template> <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'"> <igx-excel-style-column-operations> </igx-excel-style-column-operations> <igx-excel-style-filter-operations> <igx-excel-style-search></igx-excel-style-search> </igx-excel-style-filter-operations> </igx-grid-excel-style-filtering> <igx-column *ngFor="let col of gridColumns" [field]="col.field" [header]="col.header" [sortable]="true" [hidden]="col.hidden" [pinned]="col.pinned" [exportExcel]="true" [resizable]="true" [width]="'auto'" [cellClasses] = "cellClasses" [hasSummary]="isTotalsSummaryRequired(col.field)" [summaries]="isTotalsSummaryRequired(col.field) ? totalSummary : null"> </igx-column> </igx-grid>
I need to set the IgxGrid height to 100%, but I also need the column widths to automatically fit to the largest string without wrapping the text with an ellipsis ("..."). Is there another way to achieve this?
Thank you, Riva Ivanova your answer helped me resolve the issue.