Hello,
I have a table with large columns that far exceeds the width of the screen so it appears represented with a horizontal scroll bar.
Using the autosize() method at load data time I am able to resize the visible columns to adjust their width to the width of the header and content, but when scrolling to the right the rightmost columns are not resized.
Is there any way to make autosize() resize all the columns of the table?
Thanks in advance,
Hello Hector,
After investigating this further, I determined that the autosize() method resizes only the currently visible columns. This is the reason why the top right columns are not autosized. What I could suggest in order to achieve your requirement is to bind a method to the gridScroll event. In this method the rest of the columns would be resized, they could be accessed after autosize is called for the first columns:
this.grid.columnList.forEach(col => col.autosize());
this.columnsNotInView = this.grid.columnList.filter( column => column.calcWidth === column.defaultWidth );
public onScroll(evt) {
if (evt.direction === 'horizontal') {
this.columnsNotInView.forEach(col => col.autosize());
this.columnsNotInView = this.grid.columnList.filter(column => column.calcWidth === column.defaultWidth);
}
I have prepared a small sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
Hi Monika. I have tried your solution in my project and it is effective but I have a table with many columns and some of them with very long texts, so, until columnsNotInView is not emptied the scroll is extremely slow.
Maybe there is a way to resize all columns at load data time instead of the onScroll event. This strategy would avoid the delay when scrolling.
Thank you very much for your attention.