How to move the scrolling of the grid after setting the 'enableVirtualization' property.

[???]

hello. Thank you for your hard work.

I want to add a row to the bottom of the grid and then have the grid scroll down to the added row. The opposite is also true.

But if I give 'enableVirtualization' property it doesn't work well.

setTimeout(() => {

        const div = gridObj?.getContent()?.children[0];

        const trs = div?.querySelectorAll("tr");

       

        if(position === 'top') {

          div.scrollTo(0,0); // it works strangely in 'enableVirtualization'

          // trs[0].focus(); // not works in 'enableVirtualization'

          gridObj?.clearSelection();

          gridObj?.selectRow(0);

 

        } else if(position === 'bottom') {

          // div.scrollTo(0,document.body.scrollHeight); // it works strangely in 'enableVirtualization'

          // trs[gridData.length - 1].focus(); // not works in 'enableVirtualization'

          gridObj?.clearSelection();

          gridObj?.selectRow(gridData.length-1);

        }

      }, 100);

[Vikram Sundararajan]

Hi

Greetings from Syncfusion support,

We understand that your query regarding adding a new record as "newRowPosition" at the bottom with virtual scroll enabled. After thorough investigation, it appears that utilizing "Bottom" as newRowPosition in editSettings when virtual scroll is enabled might not be feasible. This is primarily because row elements are rendered based on the viewport height, with additional rows loading only when scrolling occurs. As a result, appending a new row at the bottom may not be achievable, and the added row might only become visible after scrolling up and down to reach the bottom of the scroll bar.

Regards,

Vikram S

[???]

Hello! Thank you for your answer, but my problem has not been solved yet. Here I am sending you some of my angular source files and a screenshot gif file.

Thank you always for your kind reply.

Attachment: virtualization_problems_fff960d2.zip

[Aishwarya Rameshbabu]

Hi,

We have reviewed the shared file and observed two gif images and the sample code files. One image pertains to the scroller issue when adding records to the "Bottom" position in the Grid component. When virtualization is enabled, adding new rows at the bottom position is not feasible. As the row elements are rendered based on the viewport height, the last row will only be rendered when the scroller reaches the bottom of the scroll bar. Due to the inability to find the last row index adding rows at the bottom position is not possible. So, we recommend using the “Top” position for inserting new records.

The second gif image also shows a scroller issue, specifically white space appearing when moving the scroller to the bottom. As you have mentioned that the problem has not been resolved, kindly confirm if the issue you are facing is related to the display of white space. Please share the following details that would be helpful for us to validate the issue further:

1. Please provide a detailed explanation of how the issue can be replicated.

2. Please share the type of data binding you are using in the grid - Remote or local data binding.

3. If remote data is used, please share the adapter details.

4. Please specify the package version you are using.

5. If possible, please share an issue replication sample along with a video demonstration.

Regards

Aishwarya R

[???]

Or maybe if you set "virtualization: true" and "editSettings" properties to "allowAdding: true" etc. and add addRecord() without any parameters to the grid, it will automatically add a row to the bottom of the grid and focus. If you could let me know this principle, wouldn't it be possible for me to customize the action I want?

[Aishwarya Rameshbabu]

Hi,

After reviewing your query, we noticed that you mentioned being able to add records at the bottom using the addRecord() method of Grid. We attempted to do the same but were unsuccessful. Please refer to the sample below and the demonstration video.
In Virtualization, the next set of records loads only when the scroller is moved, making it impossible to add a new row at the bottom position. Therefore, we recommend using newRowPosition as 'Top' to insert the new records in the virtualization enabled Grid.

Sample: https://stackblitz.com/edit/angular-gpts6x-jijngo?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards

Aishwarya R

Attachment: 187181Demo_1a1f1aee.zip