CODEWITHSUNDEEP
sapui5
Anjali
Anjali

Reputation: 53

How to get scroll to a list item in a page that has multiple lists

I have three lists in a page where when one item is selected the other item cannot be selected in other lists. I have written code that focuses on the selected list item when I navigate to that page. Now, the issue is that it's not focusing and addEventDelegate isn't working for the lists. The focus code is getting executed and again the scroll bar is moving to the top.

Initially I tried like this:

tList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("typesList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, this)
cList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("catList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, cList)
sList.addEventDelegate({
    onAfterRendering: function() {
        debugger;
        var a = sap.ui.getCore().byId("statList").getSelectedItems()[0];
        if(a != undefined) { 
            $("#"+a.sId)[0].focus();
        }
    }
}, sList)

It didn't work. onAfterRendering is never getting fired. I tried this:

onRouteMatched: function(oEvent) {
    debugger;
    var tList = sap.ui.getCore().byId("typesList");
    var cList = sap.ui.getCore().byId("catList");
    var sList = sap.ui.getCore().byId("statList");
    var typesItem = sap.ui.getCore().byId("typesList").getSelectedItems()[0];
    if(typesItem != undefined) { 
        $("#"+typesItem.sId)[0].focus();
    }
    var catItem = sap.ui.getCore().byId("catList").getSelectedItems()[0];
    if(catItem != undefined) { 
        var i = cList.indexOfItem(catItem);
        //$("#"+catItem.sId)[0].focus();
        cList.getItems()[i].focus(); 
    }
    var statItem = sap.ui.getCore().byId("statList").getSelectedItems()[0];
    if(statItem != undefined) { 
        $("#"+statItem.sId)[0].focus();
    }
}

It's working well but I don't know why the scroll bar is moving to the top of the view after executing this code.

Any suggestions?

Upvotes: 1

Views: 3428

Answers (1)

Kyle
Kyle

Reputation: 612

Use .getDomRef().focus()

You have to be careful trying to scroll to a list item. If your view, list or items haven't been rendered in the DOM, this will error out. So write some code to protect against that.

In the example below, I check to see if the DOM reference for the selected list item exists. If it does, call .focus() to scroll to it. If the DOM reference doesn't exist, I add an event delegate to the list to be called after the list has been rendered, which then scrolls to the selected item.

_scrollToListItem: function() {
    var oItemDomRef = this.getView().byId("list").getSelectedItem().getDomRef();
    if (!oItemDomRef) {
        this.getView().byId("list").addEventDelegate({
            onAfterRendering: function() {
                this._scrollToListItem();
            }.bind(this)
        });
    } else {
        oItemDomRef.focus();
    }
}

Upvotes: 1

Related Questions