Kendo Grid with loaderType = 'skeleton' resets the grid scrollbar after triggering a sort

1 Answer 10 Views

Grid

Juan Gabriel asked on 05 May 2025, 05:41 PM

Expected:

When a scrollable grid has loaderType = 'skeleton', and when a user clicks sort on a column, the scroll bar will not move.

Actual:

The scrollbar resets to the beginning.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css">
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      // The remote endpoint from which the data is retrieved.
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  },
  pageSize: 10
});

$("#grid").kendoGrid({
  // The dataSource configuration is set to an existing DataSource instance.
  dataSource: dataSource,
  pageable: true,
  columns: [
    {width: 500, field: 'ProductID' },
    {width: 500, field: 'ProductName' },
    {width: 500, field: 'UnitPrice' },
    {width: 500, field: 'UnitsInStock' },
    {width: 500, field: 'Discontinued' },
    {width: 500, field: 'test' }
  ],
  scrollable: true,
  sortable: true,
  loaderType: "skeleton",
});
</script>
</body>
</html>

Dojo: https://dojo.telerik.com/gmdqkCcS

Is there a fix/workaround for this?

1 Answer, 1 is accepted

answered on 08 May 2025, 09:52 AM

Hi Juan Gabriel,

To avoid this behavior, you could handle the sort event of the Grid. Then you can get the current scroller position and set it again once the Grid sort is applied:

sort: function(e){
    var position =  $('.k-grid-content').scrollLeft();
    setTimeout(function(){
       $('.k-grid-content').scrollLeft(position);
    })
  },

Here is a Dojo example where you can test the workaround - https://dojo.telerik.com/gYyGCZDB.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.