Grid Virtualization is not working properly

[Nagendra Gupta]

Dear Team,

My problem is, when enabling Virtualization setting it will load empty spaces on both top and bottom in the grid while moving up and down. Please suggest me what can I do for resolve this problem. Below is my code.

<div class="report-grid">

    <ejs-grid #grid height="100%" [dataSource]="data" [columns]="columns"

        [allowTextWrap]="true" rowHeight="25" [enableVirtualization]="true">

    </ejs-grid>

</div>

[Nagendra Gupta]

Please find the attach file.

Attachment: example_69b91bf2.zip

[Nithya Sivaprakasam]

Hi Nagendra,

Greetings from Syncfusion support.

Query:” Grid Virtualization is not working properly”

From your code, we found that you have provided the height to Grid in percentage. This is the cause of the reported problem. So please provide the static number to Grid height instead of using the percentage(like in the following code snippet),

Code:

App.component.html

 

  <ejs-grid

    [dataSource]="data"

    [columns]="columns"

    [enableVirtualization]="true"

    [enableColumnVirtualization]="true"

    [allowTextWrap]="true"

    [pageSettings]="options"

    height="400"

    rowHeight="25"

  >

  </ejs-grid>

We have attached the sample for your reference and you can find the sample in the below link,

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

Please get back to us if you need further assistance on this.

Regards,

Nithya Sivaprakasam.

[Nagendra Gupta]

Hi Nithya Sivaprakasam,

Thanks for quick reply.

We already know the solution which you given us. But we want to adjust Grid height according to container height that why we have putted height in percentage and we want one feature also that is freeze the header when user scrolling grid to up or down.

So, It is our request you to please provide us the solution for our requirement.

[Nithya Sivaprakasam]

Hi Nagendra,

Thanks for contacting Syncfusion support.

Query 1:” Grid height in percentage value”

Based on your requirement, you want to adjust the grid height according to the container by setting the grid height in percentage. By default, Virtualization works only when the height is given on the pixels. Kindly refer to the limitations listed in the following Help Documentation. 

Limitations: https://ej2.syncfusion.com/angular/documentation/grid/virtual/?no-cache=1#limitations-for-virtual-scrolling

Query 2: “we want one feature that freezes the header when the user scrolling grid up or down.”

For your second requirement, we recommend you to use the Sticky header feature. By enabling the property enableStickyHeader as true, the header will be visible when the parent element is scrolled. For your reference, kindly check the below demos and documentation.

Demos: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/sticky-header

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/scrolling/#sticky-header

Please get back to us if you need further assistance on this.

Regards,

Nithya Sivaprakasam.

[Nagendra Gupta]

Hi Nithya Sivaprakasam,

I have read your document for limitation of virtualization in grid.  But our requirement same till now, and we have no height for grid. We want calculate height at the time of rendering  or we can say that put Dynamic height. Without virtualization it is open perfectly but you know that, why virtualization  is important.

So, I request you to please provide as height as Percentage at the time of virtualization or give me other way by which full fill our requirement.

[Nithya Sivaprakasam]

Hi Nagendra,

Thanks for contacting Syncfusion support.

Query:” Grid Virtualization is not working properly when height is given in percentage”

To adjust Grid height according to the parent container height, set HTML, body, root element (app-root), `.control-section` and Grid element height as 100% and set n% height to Grid’s parent element to achieve your requirement.

Code:

Index.html

 

<style>

      html,

      body { // 100% height given to html, body

        height: 100%;

      }

      app-root { // 100% height of root element is given to app-root

        height: 100%;

      }

      .control-section { // 100% height of root element is given to control-section element

        height: 100%;

      }

   //You can give parent element height in percentage here

</style>

 

App.component.html

 

<div class="control-section">

  <ejs-grid

    #grid

    [dataSource]="data"

    [columns]="columns"

    [enableVirtualization]="true"

    [enableColumnVirtualization]="true"

    [allowTextWrap]="true"

    [pageSettings]="options"

    height="100%"

    rowHeight="25"

    (load)="load($event)"

  >

  </ejs-grid>

</div>

When using Virtualization with the responsive Grid, The pageSize provided must be two times larger than the number of visible rows in the grid. Else white space will be shown in the Grid. Refer to the below documentation.

Limitations-Virtualization: https://ej2.syncfusion.com/angular/documentation/grid/virtual/#limitations-for-virtual-scrolling (refer 7^th point)

pageSize: https://ej2.syncfusion.com/angular/documentation/api/grid/pageSettings/#pagesize

We have prepared a virtualization Grid responsive to the parent element. In which, we dynamically apply the pageSize with respect to the Grid’s parent element’s offsetHeight in the load event of Grid. Please find the below sample and code example for your reference.

App.component.ts

 

  load(args) {

    this.grid.pageSettings.pageSize = parseInt((this.grid.element.parentElement.offsetHeight /25).toString()) * 2 +8; // 25 is the row height of the grid

  }

Sample: https://stackblitz.com/edit/angular-rmk2xt-cingtl?file=app.component.ts,index.html

Please get back to us if you need further assistance.

Regards,

Nithya Sivaprakasam.

[Nagendra Gupta]

Hi Nighya,

I had implemented your mention code its working fine but when make allowTextWrap property to true and row heights are not same for all rows it not working perfectly somewhere in between its jumping many rows in between.

Applied Code in Load Event:

let offsetHeight = (this.gridObj.element.parentElement.offsetHeight / 29); // 29 is the row height of the grid

offsetHeight = +((offsetHeight * 2) + 9).toFixed();

this.gridObj.pageSettings.pageSize = offsetHeight;

Please check the sample below

https://stackblitz.com/edit/angular-sfgridjumpissue?file=app.component.ts,app.component.html

Step by step scroll between 33 to 41 and 41 to 33 back.

[Joseph Christ Nithin Issack]

Hi Nagendra,

   Thanks for your update.

   Currently we are validating your query, we will provide further information on or before 2^nd November, 2022. We appreciate your patience until then.

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Hi Nagendra,

  Based on your query, when you use allowTextWrap property to true and enable virtualization, By default in EJ2 Grid, the height of the grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. This is the reason for the reported behavior. We have discussed in detail in the below documentation.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/virtual-scroll/#limitations-for-virtual-scrolling

Regards,

Joseph I.

[Nagendra Gupta]

Hi Joseph,

It means text wrap property not required in grid, what is the way to handle this?

[Joseph Christ Nithin Issack]

As we have mentioned already, when virtualization is enabled we cannot set the height using the percentage value, since it is a limitation. As your requirement is an unique requirement, we have provided you with a custom solution in the previous update. And text wrapping is also a limitation when using virtualization using this also may cause more issues in your application. Hence it is not feasible to achieve your requirement.