We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Horizontal Scroll Is Not Shown

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:

Thanks,
Marius

5 Replies

DR Dhivya Rajendran Syncfusion Team January 8, 2020 01:50 PM UTC

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(); 
    } 
  } 


Regards, 
R.Dhivya 



ML Marius Lian January 8, 2020 03:46 PM UTC

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


DR Dhivya Rajendran Syncfusion Team January 9, 2020 12:32 PM UTC

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
  } 
 


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

Regards, 
R. Dhivya 



ML Marius Lian January 9, 2020 09:10 PM UTC

Hi,

Ok, that was the reason. Thank you.

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

Thanks,
Marius


DR Dhivya Rajendran Syncfusion Team January 10, 2020 08:41 AM UTC

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.
 



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 


Loader.
Live Chat Icon For mobile
Up arrow icon