Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Ellipsis("...") at the end of my string of column with [width] = "auto"
posted

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:

Parents
  • 700
    Verified Answer
    Offline posted

    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

Reply Children