This is a migrated thread and some comments may be shown as answers.

Kendo UI virtual scrolling not working after sorting

1 Answer 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Amlan
Top achievements
Rank 1
Amlan asked on 31 Mar 2020, 06:43 PM

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

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 02 Apr 2020, 10:48 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Amlan
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or