Horizontal Scroll Is Not Shown

[Marius Lian]

Hi Syncfusion,

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:

https://www.syncfusion.com/forums/150419/add-columns-programatically-before-they-are-auto-generated

Thanks,

Marius

[Dhivya Rajendran]

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: 

public dataBound() { 

    if (this.grid) {   

      const columns: ColumnModel[] = this.grid.columns as ColumnModel[]; 

       

      for (const col of columns) { 

        col.width = 120; 

      } 

      this.grid.refreshColumns(); 

    } 

  } 

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

Regards, 

R.Dhivya 

[Marius Lian]

Hi R.Dhivya,

They are not auto-generated, they are generated like this: https://www.screencast.com/t/qgl7KSz3m

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?

Or is there some way to create columns programmatically and ensure columns is being treated the same way as when they are defined in the html code?

Thanks,

Marius

[Dhivya Rajendran]

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: 

<div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :allowPaging="true" 

      :editSettings="editSettings" 

      :load="load" 

      :dataBound="dataBound" 

    ></ejs-grid> 

  </div> 

dataBound: function() { 

      this.$refs.grid.ej2Instances.autoFitColumns(); 

    } 

provide: { 

    grid: [Page, Edit, Toolbar, Resize] 

  } 

 

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 

[Marius Lian]

Hi,

Ok, that was the reason. Thank you.

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

Thanks,

Marius

[Dhivya Rajendran]

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.  

1. Share the code example of the sample.
2. Share the video of the performance issue while using autofit columns.
3. Describe more details about your requirement.

 

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