Horizontal Scrolling and Auto Column Fit

[James]

Sir, the Auto Column fit is a great feature!

However, it seems to conflict with the automatic showing of Horizontal scroll bars

I understand that to enable the Horizontal scroll bars automatically I set the grid 'width' to some value, eg 1024. If the total width of all the columns exceed 1024 then the

horizontal scroll bars activate... all good.

However, if I use Auto Column Fit as per your example here https://ej2.syncfusion.com/angular/documentation/grid/columns/#autofit-specific-columns, then

a) If the total width of all the auto fitted columns > 1024 then the Horizontal scroll bars appear as expected - all good

b) BUT if  total width of the auto fitted columns  is < 1024 then the grids heading bar remains set to 1024 and is padded out. I include a screen shot to show you

Question: How do I resolve this?

Possible solution?

Is it possible to get the final width of the grid after (dataBound) completes? Then if the final width is greater than >1024 I set the grid with to '1024' to cause scrolling, but if the final width is < 1024 then I could then set the grid width to '100%' which does remove the problem. Setting to 100% causes the horizontal scrollbars to not appear, but I would not need them if <1024

Attachment: Heading_Padded_34b5818.zip

[Rajapandi Ravi]

Hi James, 

Greetings from syncfusion support 

By default in EJ2 Grid the autoFitColumns method will calculate and set the columns width based on Grid content and header. So,  the Grid width will be in static and if the column’s total width does not meet the Grids total width the remaining width will be the white space.  

It was the default behavior of our Grid. To overcome the empty space we suggest you to add the below code in the dataBound event of EJ2 Grid.  

Code Snippet:  

app.component.ts 

    dataBound(args){ 

      this.grid.autoFitColumns(); 

      this.grid.width = (this.grid.getContentTable() as any).offsetWidth;     

    } 

For your convenience we have attached the sample and please download the sample from the following link 

Sample Link: https://stackblitz.com/edit/angular-cnwfxb-cj6h8w?file=app.component.html 

Regards, 

Rajapandi R

[James]

Thankyou Rajapandi for your update.

It is *almost* a good solution.

The solution causes the horizontal scroll bars to be activated, which they should not because you set the grid width to the total width of all the columns. If I add 15px to the offset width then the horizontal scroll bars are not activated , but this causes the grid to not have a correct right margin and looks silly, so this is not a good solution.

In your solution below, how do I also stop the Horizontal scroll bars from being enabled?

The horizontal scroll bars need to be enabled if the calculated grid width is greater than some maximum eg 1024 

[Rajapandi Ravi]

Hi James, 

From validating your query we understand you like to disable the horizontal scrollbar after calling the autoFitColumns(). Based on your query we have prepared a sample and achieved your requirement. In this below sample we have set the css property “overflow-x” as hidden. Please refer the below code example and sample for more information. 

 

dataBound(args){ 

      this.grid.autoFitColumns();  

      this.grid.width = (this.grid.getContentTable() as any).offsetWidth;  

      (document.querySelector('.e-content') as any).style.cssText = "overflow-x: hidden;" 

    } 

Sample: https://stackblitz.com/edit/angular-cnwfxb-ovxzpy?file=app.component.ts 

Regards, 

Rajapandi R

[James]

Thank you for your response, it works well

However your line this.grid.width = (this.grid.getContentTable() as any).offsetWidth;  

uses type 'any' which then allows the IElement interface to be violated. Typescript is a maturing language and the use of types  'any' or 'null' should be avoided as they mess up the compilers warning systems, and allow interface violations.

I think the below is a better solution,  as it is consistent with the IEement interface

this.grid.width = (this.grid.getContentTable() as Element).scrollWidth; 

James

[Rajapandi Ravi]

Hi James, 

We are glad that you were able to find a solution at your end. 

Please get back to us if you need any other assistance. 

Regards,
Rajapandi R