resize all columns when table has horizontal scroll bar

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.

Hello Hector,

All columns could not be autosized after the data is loaded because some of the columns are not displayed and the autosize method would not have any impact on them.

Another suggestion would be to create an array with all columns which are currently in the view:

this.grid.rowList.first.cells.forEach(cell => this.columnsInView.push(cell.column) );

In the method bound to the gridScroll event would be checked if there is a column in the view, which is not in the array. If there is such column, it would be added to the visible columns and resized.

public onScroll(evt) {

    if (this.columnsInView.indexOf(this.grid.rowList.first.cells.last.column) < 0) 

    {

      this.grid.rowList.first.cells.last.column.autosize();

      this.columnsInView.push(this.grid.rowList.first.cells.last.column);

    }

  }

I have modified the prepared sample. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

Thank you very much Monika, this solution is much better than the previous one. It is still not perfect, because if you scroll quickly some columns are not evaluated as "last" and their autofit does not occur. However, I think it can be useful for me.
Thanks for your help!

Hello Hector,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.

Regards,
Monika Kirkova,
Infragistics