KendoGrid only shows last chunk rows when virtualscroll after sort
4 Answers 30 Views
changcheng
Top achievements
Rank 1
Iron
changcheng asked on 16 Jun 2021, 06:50 AM

  1. Enable serverPaging, serverSorting, virtual scroll. Please refer the attached codes.
  2. Run the page in browser.
  3. Drag scrollbar to end
  4. Click "name" column header to sort the grid.

Observed:

Grid only shows the last 3 rows.

Question:

How can I make last ten rows show after sort? Like this:


<html>
	<head>

		<link rel="stylesheet" href="styles/kendo.common.min.css"/>
		<link rel="stylesheet" href="styles/kendo.default.min.css"/>

		<script src="jquery-3.6.0.js"></script>
		<script src="kendo.all.js"></script>

		<style>
			.grid {
				width: 800px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div class="grid"></div>
<script>
	$(()=>{
	var ds = [];
	for(var i=0;i<13;i++){
		ds[i]={name:i.toString(),number:i};
	}

	var dataSource = new kendo.data.DataSource({
		serverPaging:true,
		serverSorting:true,
		pageSize:10,
		type: "odata",
		transport: {
			read: options=>{
				var d=[];
				for(var i =options.data.skip;i<options.data.skip+options.data.take && i<ds.length;i++){
					d.push(ds[i]);
				}

				var r = {
					d: {
						__count: ds.length,
						results: d
					}
				};

				options.success(r);
			}
		}
	});

	$(".grid").kendoGrid(
		{
			sortable:true,
			columns:["name","number"],
			dataSource:dataSource,
			scrollable: {
				virtual: true
			}
		}
	);
});
</script>
	</body>
</html>

changcheng
Top achievements
Rank 1
Iron
commented on 18 Jun 2021, 05:48 AM

Can anyone help? Thanks.

4 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 20 Jun 2021, 11:22 PM

Hello,

I will need a little bit more time to review the issue. I will get back to you once I have some information to share.

Thank you very much for your patience.

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.

0
Neli
Telerik team
answered on 21 Jun 2021, 01:37 PM

Hello,

In order for the virtualization to work correctly in the described scenario, you need to set a smaller height to the Grid.

Here is the modified Dojo example. 

Let me know if you have further questions.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

changcheng
Top achievements
Rank 1
Iron
commented on 21 Jun 2021, 01:45 PM

thanks for your reply. In fact, in our project, the grid height is bigger, almost full screen. So I cannot decrease the grid height. I will appreciate if there are any other solutions.
Neli
Telerik team
commented on 24 Jun 2021, 09:00 AM

Hi,

What you could try is to increase the height of the Grid rows. You could take a look at the related knowledge base article linked below:

https://docs.telerik.com/kendo-ui/knowledge-base/edit-row-height-with-virtual-scrolling

Regards,

Neli

changcheng
Top achievements
Rank 1
Iron
commented on 28 Jun 2021, 07:22 AM

Changing row height cannot solve this issue. It still exists. Anyway, we cannot change row height in out product.
Martin
Telerik team
commented on 01 Jul 2021, 07:01 AM

As stated in our documentation, the virtual scrolling depends on several configurations, one of which is the Grid height. In general, the virtual scrolling feature is intended to be used with huge amount of data and it does not make much sense to use it for only 13 items. Nevertheless, if you need to do that, you will need to set a smaller height for the Grid in order for the feature to work correctly, as stated previously by my colleague. I suggest going through the virtual scrolling documentation and demo for further guidance. 
changcheng
Top achievements
Rank 1
Iron
commented on 01 Jul 2021, 07:31 AM

If you change data to 100003 records, this issue also happens. Is this a bug?
Neli
Telerik team
commented on 06 Jul 2021, 07:33 AM

Hi,

Note, that in the example you have provided in your first reply serverSorting is enabled. However, the sorting for the server response is not implemented. You will need to either implement the sorting for the response or you could leave the sorting to the client, by removing the serverSorting configuration. 

You could take a look at our Grid Virtualization of local and remote data demos linked below:

- https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

https://demos.telerik.com/kendo-ui/grid/virtualization-local-data

And here is a Dojo example based on the demo of virtualization of local data where the sorting on the client is enabled. 

Let me know in case you have additional questions.

0
changcheng
Top achievements
Rank 1
Iron
answered on 07 Jul 2021, 06:17 AM

Hi Neli,

The sample I provided is simplized. In our procuct, we implement soring, paging in remote.

In the sample you shared, this issue also exists. Is this a bug?

0
Neli
Telerik team
answered on 09 Jul 2021, 02:07 PM

Hi,

I discussed the issue with a developer from the team. It is a bug on our end and based on the described scenario I logged a Bug Report on your behalf in our official Feedback Portal. Below you will find a link to the issue:

https://feedback.telerik.com/kendo-jquery-ui/1527236-grid-with-local-data-and-virtualization-does-not-show-correct-items-when-sorted

As a small token of gratitude for reporting incorrect behavior, your Telerik points are now updated. 

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.

changcheng
Top achievements
Rank 1
Iron
commented on 13 Jul 2021, 01:38 AM

Thanks, Neli. Hope this can be fixed quickly. Another question, is there any workaround for this issue?
Neli
Telerik team
commented on 15 Jul 2021, 09:38 AM

Hi,

I am afraid that currently, I could not suggest a workaround for the issue. In case we find one, we update the thread with the Bug Report. You could follow the issue in the Feedback Portal in order to be notified when we have progress on it.

Regards,

Neli

Tags
Grid
Asked by
changcheng
Top achievements
Rank 1
Iron
Answers by
Neli
Telerik team
changcheng
Top achievements
Rank 1
Iron
Share this question
or