I have a Grid with almost 15 columns and my grid doesn’t fit on the page and it becomes scrollable horizontally and vertically. I don’t have an issue with this.
I have the .setAutoWidth(true) on all of the columns and .setFlexGrow(0) on 13 columns, I left the 2 columns in hope they will grow based on the content width.
The problem is with these 2 columns, somehow they are taking a fixed width and because of this in some rows, column content is not showing in a single line. it goes to the next line within that column.
after grid.setItems(), i am using grid.recalculateColumnWidths() also but it doesn’t take any effect and the column content is still multi-line.
I tried to load(grid.setItems()) the row with multi-line column value first then my existing code works fine and the column’s value is in a single line.
So, i think what is happening is that the first row’s columns width is getting considered for all the following rows and if in the following rows, the column content is more wider, it goes into multi-line. Is that the default behaviour of Grid?
What i want is to show all my columns value in a single line. The grid is horizontally scrollable, so I don’t care if the entire grid’s width increases.
The Grid lazyloads its rows, so it cannot know how wide the content in rows further down are. (And it cannot adjust the width of columns as you scroll down and it encounters wider content as that would become very confusing for the user, and probably complicated to implement well.)
I do think it should take more than the first row into account though, but I don’t remember for certain.
The cell content should not wrap by default though – that should only happen if you’ve applied the theme variant that does that (or if you have a custom renderer whose contents wrap)
Hi @useful-whale , so i checked again. There was a Lumo Theme Variant of WRAP_CELL_CONTENT. i removed it and now it is on single line. But the wider cell values are not showing fully. it is showing … at the end. I load 300 rows at a time in Grid
and again if i load the wider column value row first, then it shows complete value without … at the end. any idea how to make it always show the complete value? I don’t care if the grid’s width increases
You can’t, because as mentioned above, the Grid does not know how wide cells might be 3000000 rows down.
The only way is to figure out yourself how wide the column needs to be and set that as a fixed width.
From V22 onward, auto-width should be based on the rows initially visible in the Grid. In older versions it might very well be just the first row, however.
i am using V24.3.5, i will try with the fixed width but i know it will not look good to the end user 
Yeah, it’s a compromise :/
The alternative would be to load 300 rows of data into the UI up front, which would be rather slow and also not make users happy.
yes, i am loading this 300 rows upfront and don’t have the lazy loading
The Grid lazy loads rows into the DOM, it’s not something you do in your code.
Even if you pass 300 rows to the grid with a non-lazy-loading dataprovider, the actual HTML elements that the rows and cells are rendered with are not generated for 300 items up front. That would be slow.
setAllRowsVisible could “help” here 
i implemented a button just to see whether the recalculateColumnWidths() works. it does work on my button click and i can see the vertical scrollbar moving a little. but it doesn’t work when i am calling it after .setItems(). maybe some delay issue