Kendo UI virtual scrolling not working after sorting

[Amlan]

Hi All,



I work in one of the Big 4 firms and we have been using Kendo for a few years now but recently an issue has cropped up when virtual vertical scrolling does not work when the grid is sorted on a column. It does not matter what column. Scrolling works fine without the sorting when the grid loads. When sorted on any column the grid loads the first pagesize items but on going to the end of the page the new items does load. No call to the server also being made and no network or console activity

 

Here is the code

 

@(Html.Kendo().Grid<IGridItem>()<br>    .Name(gridName)<br>    .HtmlAttributes(new { @class = "table-response browse-table " + Model.GridType.ToString().ToLower() + "-grid-type" })<br>    .Columns(columns =><br>    {<br>        columns<br>            .Bound("Name")<br>            .Title(MarkupMessages.Grid_NameHeader)<br>            .Width(500)<br>            .HeaderTemplate("<span" + MarkupMessages.Grid_NameHeader + "</span>")<br>            .HtmlAttributes(new { @class = "name-column" })<br>            .ClientTemplate(nameColumnTemplate)<br>            .Locked(true)<br>            .Lockable(false)<br>            .Hidden(false)<br>            .Sortable(true)<br>            .Filterable(false)<br>            .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.Name));<br>        columns<br>            .Bound("ID")<br>            .Title("")<br>            .Width(30)<br>            .HeaderTemplate("")<br>            .HtmlAttributes(new {@class = "context-menu-column"})<br>            .ClientTemplate(menuColumnTemplate)<br>            .Locked(true)<br>            .Lockable(false)<br>            .Hidden(false)<br>            .Sortable(false)<br>            .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.ID))<br>            .Filterable(false);<br>        columns<br>            .Bound("Category")<br>            .Title(MarkupMessages.Grid_CategoryHeader)<br>            .Width(200)<br>            .ClientTemplate("<div>#: Category #</div> ")<br>            .Locked(false)<br>            .Lockable(false)<br>            .Hidden(false)<br>            .Sortable(true)<br>            .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.Type))<br>            .Filterable(filter =><br>            {<br>                filter.Multi(true);<br>                filter.CheckAll(false);<br>                filter.ItemTemplate("itemTemplate");<br>                filter.DataSource(source =><br>                {<br>                    source.Read(r => r.Url(Model.Url));<br>                    source.Events(e => e.RequestStart("GridHelper.filterCancelRequest"));<br>                });<br>            });<br>        columns<br>            .Bound("LastModifiedDate")<br>            .Title(MarkupMessages.Grid_LastModifiedDateHeader)<br>            .Width(200)<br>            .ClientTemplate("<div>#: LastModifiedDate #<div>")<br>            .Locked(false)<br>            .Lockable(false)<br>            .Hidden(false)<br>            .Sortable(true)<br>            .Filterable(false)<br>            .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.LastModifiedDate));<br>    .DataSource(ds => ds<br>        .Ajax()<br>        .ServerOperation(Model.ServerOperation)<br>        .Sort(sort =><br>        {<br>            if (Model.DefaultSortOrder == SortDirection.Descending)<br>            {<br>                sort.Add(Model.DefaultSort).Descending();<br>            }<br>            else<br>            {<br>                sort.Add(Model.DefaultSort).Ascending();<br>            }<br>        })<br>        .PageSize(200)<br>        .Read(read =><br>        {<br>            read.Url(Model.Url);<br>            read.Data(dataSourceGetAdditionalData);<br>        })<br>        .Events(events => events.Error(dataSource_Error)))<br>    .AutoBind(false)<br>    .Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))<br>    .Scrollable(scrollable => scrollable.Virtual(true).Height(382))<br>    .Resizable(resizable => resizable.Columns(true))<br>    .Reorderable(reorder => reorder.Columns(true))<br>    .Filterable(filter =><br>    {<br>        filter.Enabled(true);<br>        filter.Extra(false);<br>    })<br>    .Events(events =><br>    {<br>        if (!String.IsNullOrEmpty(gridEvent_SelectionChanged))<br>        {<br>            events.Change(gridEvent_SelectionChanged);<br>        }<br><br>        if (!String.IsNullOrEmpty(gridEvent_DataBound))<br>        {<br>            events.DataBound(gridEvent_DataBound);<br>        }<br><br>        if (!String.IsNullOrEmpty(gridEvent_DataBinding))<br>        {<br>            events.DataBinding(gridEvent_DataBinding);<br>        }<br><br>        if (!String.IsNullOrEmpty(gridEvent_FilterInitialize))<br>        {<br>            events.FilterMenuInit(gridEvent_FilterInitialize);<br>        }<br><br>        if (!String.IsNullOrEmpty(gridEvent_ColumnReorder))<br>        {<br>            events.ColumnReorder(gridEvent_ColumnReorder);<br>        }<br>    }))

[Preslav]

Hello Amlan,

I understand the problem; however, I cannot understand the provided code and based on your description, I cannot determine what the cause of this issue is.

I tested the scenario in our demo - https://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data

It seems that the virtual scrolling is working okay with sorting on my side. Having said that, could you please check the above demo and let me know what the differences with the Grid on your side are?

I look forward to hearing from you.

 

Regards,
Preslav
Progress Telerik