Set Listview page and selected item and then scroll it into view

[Richard]

I have a listview that a user can click a button on and go to a new page.  I pass the current page and the id of the selected item to the new page.  When the user clicks on a link to return to the page with the listview, the page and the id are passed back.  I can change the page to the correct page and select the record in the dataBound event as shown below but, I have not been able to figure out how to scroll it into view.   Is there a way to do that?

function dataBound(e){
        var listViewDS = $("#lvDisplay").data("kendoListView").dataSource;
        var myPage = '@ViewBag.CurrentPage';
        var myId = '@ViewBag.CurrentId';

        if (myPage != 1){
            setTimeout(() => { listViewDS.page(myPage); }, 1000);

            var listView = $("#lvDisplay").data("kendoListView");
            var dataItems = listView.dataSource.view();
            var index = 0;
            for (var j = 0; j < dataItems.length; j++) {
                if (dataItems[j].Id == myId) {
                    index = j;
                    listView.select(index);

                    var row = e.sender.element.find("[data-uid='" + dataItems[j].uid + "']");
                    row.addClass("k-state-selected");
                };
            };
        }       
    }

I have tried the code below but always get an error for top.

$("#lvDisplay").scrollTop($("#lvDisplay").find(".k-state-selected").position().top);

 

 

 

__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT__PRESENT

__PRESENT__PRESENT__PRESENT

[Mihaela]

Hi Richard,

You can scroll to the selected item automatically, as per the following approach:

• Save the selected item into a variable.
• Calculate the distance for the scroll by using the element of the selected item and the ".k-listview-content" element
• Use the animate() method to scroll to the respective element.

(The changes are highlighted)

function dataBound(e){
        var listViewDS = $("#lvDisplay").data("kendoListView").dataSource;
        var myPage = '@ViewBag.CurrentPage';
        var myId = '@ViewBag.CurrentId';

        if (myPage != 1){
            setTimeout(() => { listViewDS.page(myPage); }, 1000);

            var listView = $("#lvDisplay").data("kendoListView");
            var dataItems = listView.dataSource.view();
            var itemToSelect;
            var index = 0;
            for (var j = 0; j < dataItems.length; j++) {
                if (dataItems[j].Id == myId) {
                    index = j;
                    listView.select(index);

                    itemToSelect = e.sender.element.find("[data-uid='" + dataItems[j].uid + "']");
                    itemToSelect.addClass("k-state-selected");
                };
            }
            var scrollContentOffset = $("#lvDisplay").find(".k-listview-content").offset().top;
            var selectContentOffset = itemToSelect.offset().top; //Use the stored item to get the offset to the top
            var distance = selectContentOffset - scrollContentOffset; //Calculate the scroll distance

            $("#lvDisplay").find(".k-listview-content").animate({ //Scroll the ListView to the selected item
              scrollTop: distance
            }, 400);
        }       
    }

Here is a REPL sample for your reference, where the ListView scrolls to the last item when the page is loaded:

https://netcorerepl.telerik.com/wnFkQgPQ43W0j1p643

I hope this example will be useful to your scenario.

 

Regards,
Mihaela
Progress Telerik

[Richard]

WooHoo!  Thank you.  That gave me what I needed to get this wrapped up.