First Row after Reload or Paging

[Robert Madrian]

Hi,

I have the following listview below - what I want to have is that at every reload ($("#gridMitglied").data("kendoListView").dataSource.read();) and after paging
the first row should be visible (listview Scrolling) - the listview is not selectable!

now after a reload or changing the page not the first row is visible which is not usable...

@(Html.Kendo().ListView<SEARCH_GPDB>()
        .Name("gridMitglied")
        .TagName("div")
        .ClientTemplateId("template")
        //.ClientAltTemplateId("templatealt")
        //.Selectable(ListViewSelectionMode.Single)
        .Pageable(pageable => pageable
            .Refresh(true)
            .ButtonCount(5)
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Mitglied_Read", "Suche").Data("Suche"))
            .PageSize(20)
        )
        .Pageable()
)

[Konstantin Dikov]

Hi Robert,

Can you please provide some additional information on the requirement that you have or the issue that you are facing, especially on what refer to with "the first row". If you want to display the first record on all pages, this is something that is not supported and if that is the exact requirement, you can display that record separately from the ListView, so it could always be visible.

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik by Progress

[Robert Madrian]

If I scroll at the end of the listview in the current page and go to the next page I'm still at the end and not at the top of this page - this is absolut annoying und not Logical!

I Need the possibility to move at the first row in the current page and made them visible...

robert

[Konstantin Dikov]

Hello Robert,

The ListView does not have built-in scrolling and if you are enabling it through its wrapping elements you need to handle that scrolling manually. This could be achieved within the DataBound event of the ListView, where you can get reference to the wrapping element and reset its scroll position to 0:

<div class="demo-section k-content wide">
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .Events(ev=>ev.DataBound("dataBound"))
    .DataSource(dataSource => dataSource
        .PageSize(20)
        .ServerOperation(false)
     )
    .Pageable()
)
</div>

<script>
    function dataBound(e) {
        e.sender.element.scrollTop(0);
    }
</script>
<style>
    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 510px;
        overflow-y: scroll;
        height: 500px;
    }

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Robert Madrian]

Works perfect thank you!