We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Scroll to the selected item in nested listview


I want to set the selected item in a nested listview component and if the selected item is in the second or third level in the nested listview I want to be redirected to that level to see the selected item.

This is the code implemented so far:

actionComplete($event: any) {
//here I want to scroll to the selected item from a nested level

This code works fine, the item is selected but I need to go manually to the level of where the item is. Is there a way to scroll directly to the level of the selected item to see the selection?

3 Replies

LD LeoLavanya Dhanaraj Syncfusion Team March 9, 2023 03:19 PM UTC

Hi Ciprian,

Greetings from Syncfusion support.

Based on your requirements, we have prepared and included an Angular ListView sample with the latest version. You can meet your requirements with the help of the selected list item element and the scrollIntoView method. Please check out the sample and code snippets below for your reference.

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


<ejs-listview #list [height]="450" ... ></ejs-listview>

<button (click)="onClick($event)">Goto Item</button>




public listObj: ListViewComponent;


onClick() {

    this.listObj.selectItem({ text: 'Jaguar', id: 'list-20' });




Leo Lavanya Dhanaraj

CI Ciprian-Catalin replied to LeoLavanya Dhanaraj April 19, 2023 02:41 PM UTC


I tried the approach you provided, but it is working only for the first level of the listView.

This is the code from the actionComplete method, first I get the element from the listView source by the id, I set it as the selected item, then I want to scroll to it, creating the selector based on [data-uid=itemById.id].

actionComplete($event: any) {
let itemById = this.findItemById(this.dataSource, this.nodeData.id);

I checked the this.listView.element to see the elements on which the search is done and it looks like in the list of the elements there are only the ones from the first level. So my itemById element will not be found because is in the list of the child items in the second level.

ROR DOMException: Failed to execute 'querySelector' on 'Element': '[data-uid=2ea4fe7a-5677-4b46-9c02-e763f7849149]' is not a valid selector.

Any suggestions about how to get the element from the nested level?

LD LeoLavanya Dhanaraj Syncfusion Team April 20, 2023 12:05 PM UTC

Hi Ciprian,

Thanks for the details.

We would like to mention that the scrollIntoView method is used to scroll an element into view within the visible area of the browser window. However, when dealing with nested lists, there may be multiple levels of elements that could potentially be scrolled into view, making it difficult for the method to determine which specific element to scroll to.

Additionally, we do not have loadOnDemand support for the ListView component. When attempting to scroll to nested level list items, they may not render in the DOM during initial rendering. Therefore, you can not apply the scrollIntoView method to the unavailable ID. This may cause the mentioned error issue(DOMException: Failed to execute 'querySelector' on 'Element': '[data-uid=2ea4fe7a-5677-4b46-9c02-e763f7849149]' is not a valid selector). Unfortunately, there is no possible way to achieve your requirement.

Live Chat Icon For mobile
Up arrow icon