SCROLL IN GRID

[Deepak Jain]

Hi Team,

I have single row in grid but scroll in y direction is coming.

Attachment: Screenshot_20201020_133454_65f28f95.zip

[Ajith Govarthan]

Hi Deepak, 

 

Greetings from Syncfusion support. 

We have validated the reported issue with the given screenshot.  We have suspect that you have defined the specific height for Grid, then Grid can be rendered the given height. this is the default behavior HTML table. Also, we have used the default browser scroller for Grid content. So, the Y scroll pane is always displayed even content height is not exceed than the window height. This is also the default behavior of the HTML table. 

Please find the sample for your reference. 

[Code example]  

 <ejs-grid #grid [dataSource]="data" height="400"> 

    <e-columns> 

      <e-column field="OrderID" headerText="Order ID" width="150" textAlign="Right"></e-column> 

      . . . 

    </e-columns> 

  </ejs-grid> 

 

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

But , You can override the default behavior by using the following solution. 

1. Set the Grid height is ‘auto’:

 

If you set the Grid height is ‘auto’, then the Grid can automatically adjusted based on its content height and its parent height . The scroller is displayed when the content height is exceed than the window screen height. Please find the sample for your reference. 

 

Sample :  https://angular-ggpp1q-tju2xn.stackblitz.io/  

 

 

2. Using ‘hideScroll()’ method of Grid:

 

You can achieved your requirement by using ‘hideScroll()’ method . The hideScroll() method removes the Y scroller pane the if the content is not exceed than the window screen height. Please find the sample for your reference. 

 

[code example] 

 

[app.component.html]   

<div class="control-section"> 

  <button (click)='btnClick($event)'>bind data </button> 

  <ejs-grid #grid (dataBound)= 'dataBound($event)' [dataSource]='data' height='400'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='150' textAlign='Right'></e-column> 

      <e-column field='CustomerName' headerText='Customer Name' width='160'></e-column> 

      <e-column field='Freight' headerText='Freight' width='130' format='C2' textAlign='Right'></e-column> 

      <e-column field='ShipCity' headerText='Ship City' width='150'></e-column> 

      <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

[app.component.ts] 

 

import { GridComponent } from "@syncfusion/ej2-angular-grids"; 

 

@Component({ 

  selector: "app-root", 

  templateUrl: "app.component.html" 

}) 

export class AppComponent { 

  public data: Object[]; 

  @ViewChild("grid") 

  public grid: GridComponent; 

 

  public ngOnInit(): void { 

    this.data = orderDetails.slice(0, 1); 

  } 

 

  dataBound() { 

    this.grid.hideScroll(); 

  } 

  btnClick(e) { 

    this.grid.dataSource = orderDetails; 

  } 

 

In the above code example, we have called the ‘hideScroll’ method in dataBound event of Grid 

 

 

Sample : https://stackblitz.com/edit/angular-ggpp1q-egf1cg?file=app.component.html  

 

 

Please find the API documentation for your reference.                                                                                                                          

 

https://ej2.syncfusion.com/angular/documentation/api/grid/#hidescroll  

https://ej2.syncfusion.com/angular/documentation/api/grid/#databound  

 

Regards, 

Ajith G. 

[Deepak Jain]

Dear Team,

I have custom requirement to set grid height and I can't set it to 'auto' and I have requirement of virtualization.

But with the above two settings, the problem is repeating.

Can you please check ?

[Praveenkumar Gajendiran]

Hi Deepak,

Thanks for your update,

We would like to inform you that by default We need to bind large number of records when using virtualization in Grid. So we can not use virtualization for a single record.

Note: Using virtualization, Minimum 1000 records are to be bind in Grid.   

UG : https://ej2.syncfusion.com/angular/documentation/grid/virtual/#row-virtualization 

Even if you are not using virtualization in Grid, Grid content will be render based on the height what you defined in the Grid. This is the default behavior of HTML. 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G