Scroll Position Reset - Angular Grid with Row Virtualization

[René Fabel]

Hello Syncfusion Support,

I have a problem with using the Angular Grid with Row Virtualization.

How can I reset the scroll position of the grids table after emiting complete new data from a search function?

I have created a small sample application to show the problem.

1. run npm install && npm start

2. scroll the grid down

3. type "o" into the search field

4. issue => the grid is white, scroll position not updated

I'm trying to reset the scroll position by setting:

 "this.grid!.pageSettings.currentPage = 1;"

but that doesn't work.

I found an alternative way, just comment in

// this.resetScrollPosition(state);

to see in action.

This is a bit messy (do it twice, using setTimeout()).

Is there a way to reset the gird´s scroll position to top?

If there is currently no way, I would like to ask for a feature request.

The data output is in the form of the DataResult interface.

Is it possible to add a boolean property "resetScrollPosition":true to give the grid the information to reset the scroll position?

With kind regards

René

Attachment: syncfusiongridvirtualizationsearch_594c3d5.zip

[Rajapandiyan Settu]

Hi René,

Thanks for contacting Syncfusion support.

By analyzing your code example, we found that you are manually performing the search operation with your service without using the Grid. This is the cause of the behavior.

To perform search operation in the Grid, you need to execute the grid.search method. or you can also use a built-in toolbar search. When you perform a search action in the Grid, the scroller will be automatically moved to the top.

Search: https://ej2.syncfusion.com/angular/documentation/grid/searching/

We suggest you to use grid.search() method to perform the search operation in the Grid.

 

  private searchControlValueChanges$ = this.searchControl.valueChanges.pipe(

    tap((value) => {

      this.grid!.search(value); // perform the search action in the Grid

    })

  );

 

When you perform the search action, the dataStateChange event will be triggered and in that event, you need to execute your service with a search query and return the data.

 

  dataStateChange(state: DataStateChangeEventArgs): void {

      const take = state.take;

      const skip = state.skip;

      if (state.search){

        this.dataService.search(state.search[0].key, take, skip);

     } else {

        this.dataService.search(‘’, take, skip);

     }

  }

 

Screenshot:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-grid-virtualization-search-1456562164.zip

Note:

For every grid action (such as Search,Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have sent the corresponding action details(like skip, take, search, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.   

Find the below documentation for more information.

https://ej2.syncfusion.com/angular/documentation/grid/observables/
https://ej2.syncfusion.com/angular/documentation/grid/observables/#handling-grid-actions

Regards,

Rajapandiyan S

[René Fabel]

Hello  Rajapandiyan S,

Thank you very much for your quick answer. Your suggestion helped me a lot. I was able to refactor my current project and it works for me.

Regard

René

[Rajapandiyan Settu]

Hi René,

We are glad to hear that you have achieved your requirement with the solution provided.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[René Fabel]

Hello,

I run into another issue with the scroll bar. When I enter or copy a search term in the search field and the search result is empty, the scroll bar does not reset.

Regards

René

Attachment: syncfusiongridvirtualizationsearch_4ab9e131.zip

[Rajapandiyan Settu]

Hi René,

Thanks for your update.

Query: When I enter or copy a search term in the search field and the search result is empty, the scroll bar does not reset.

By using the following code example in the dataBound event, we can hide the scroller when no record is displayed in the Grid.

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

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

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

 

[app.component.ts]

 

  dataBound() {

    if (this.grid!.getCurrentViewRecords().length == 0 && this.grid!.enableVirtualization) {

      // remove the scrollbar thumb

      ((this.grid!.getContent() as HTMLElement).querySelector('.e-virtualtrack') as HTMLElement).style.height = 'unset'; 

      // hide the scrollbar

      this.grid!.hideScroll();

    }

  }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2_grid_virtualization_search_hidescroll-888770936.zip

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[René Fabel]

Hello  Rajapandiyan,

thank you the answer and the suggested workaround. I have a similar in place. 

For me it sounds like a bug in the component. You dont want to fix it?

Regards

René

[Rajapandiyan Settu]

Hi René,

We have confirmed that the reported behavior is an issue from our side and logged this issue as - “Scroller thumb is shown when empty record displayed in the Virtualization Grid”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on June 15^th, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

Feedback: https://www.syncfusion.com/feedback/35336/scroller-thumb-is-shown-when-empty-record-displayed-in-the-virtualization-grid

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi René,

Thanks for your patience.

We are glad to announce that our Essential Javascript2 patch release (v20.1.60) has been rolled out successfully and in that release, we have added the fix of “Scroller thumb is shown when empty record displayed in the Virtualization Grid” issue. So, please update your Syncfusion packages to the current version and use the latest style script to get this.

Release notes: https://ej2.syncfusion.com/javascript/documentation/release-notes/20.1.60/?type=all#grid

Find the below sample for your reference.

Sample: https://stackblitz.com/edit/angular-pxpfsk-uya9gu?file=package.json

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.

Regards,

Rajapandiyan S