Scroll to the selected item in nested listview

[Ciprian-Catalin]

Hi,

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) {

      this.argomentoListViewId?.selectItem(storedData.argomentoItem);

//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?

[LeoLavanya Dhanaraj]

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

[app.component.html]

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

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

 

[app.component.ts]

@ViewChild('list')

public listObj: ListViewComponent;

 

onClick() {

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

    this.listObj.element.querySelector('[data-uid=list-20]').scrollIntoView();

}

Regards,

Leo Lavanya Dhanaraj

[Ciprian-Catalin]

Hi,

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);

this.listView?.selectItem(itemById);

this.listView?.element.querySelector(`[data-uid=${itemById.id}]`)?.scrollIntoView();

}

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?

[LeoLavanya Dhanaraj]

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.