Horizontal Scroll Is Not Shown

I am loading a lot of columns and I have not set any height or width.

According to my understanding this should happen:

"The horizontal scrollbar appears when the sum of columns width exceeds the grid element width."

You can see here how it looks:

https://www.screencast.com/t/5IK8FTaLetJL

I also tried to run autoFitColumns but it did not work.

Here the code:

https://www.screencast.com/t/5AiFT0RX1c

https://www.screencast.com/t/qgl7KSz3m

Is this because columns are added in load event? I just followed this recommendation:

Thanks,

Marius

Hi Marius, 

Greeting from syncfusion. 

Query : horizontal scrollbar not shown when using autogenerated columns. 

By default, while using autogenerated columns then it automatically split the width for each column based on the browser width so that horizontal scroll bar is not shown for autogenerated columns. To enable horizontal scrollbar you need to set width to each column using the dataBound event of the grid . we have shared the documentation link for your reference.  

 

Code Snippet: 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/#auto-generation 

Regards, 

R.Dhivya 

But ok, so even if I define the columns it is treated as auto-generated. 

Do you have some way to find approximate column width since autoFitColumns  is not working?

Hi Marius, 

Thanks for your update. 

Query : autoFitColumns  is not working. 

While dynamically loading columns without width leads to create columns like autogenerated. We suspect that the Resize module is not injected in the grid while using autofit columns. We also prepared a sample based on your requirement. In that we have injected Resize module and loaded the columns dynamically in the load event  and then the autofitColumns method called inside the dataBound event. 

 

Code Snippet: 

 

Sample Link: https://codesandbox.io/s/fragrant-cache-seqe3 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#autofit-specific-columns 

If we misunderstood your requirement please share the more details or code example or sample to validate further at our end. 

Regards, 

R. Dhivya 

Ok, that was the reason. Thank you.

But autofitColumns can't be used anyway. The performance is not good.

Hi Marius, 

Thanks for your updte. 

By default, autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit specific columns at initial rendering by invoking the autoFitColumns method in dataBound event. 

The autofit column sets width based on header and content cell width. It compares the column header content and tbody cell content  width and the width will be assigned based on the largest width for each columns and total width of the column will be assigned for both header and content table. We would like to know your exact requirement. 

To validate further please share the below details.  

 

Sample Link: https://codesandbox.io/s/fragrant-cache-seqe3 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#autofit-specific-columns 

VideoLink: https://www.syncfusion.com/downloads/support/forum/150450/ze/AUTOFI~3-1204290405.zip  

Please get back to us with the above details that will help us to provide a better solution as soon as possible. 

Regards, 

R.Dhivya