KendoGrid only shows last chunk rows when virtualscroll after sort

4 Answers 210 Views

Grid

changcheng asked on 16 Jun 2021, 06:50 AM

Enable serverPaging, serverSorting, virtual scroll. Please refer the attached codes.
Run the page in browser.
Drag scrollbar to end
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

commented on 18 Jun 2021, 05:48 AM

Can anyone help? Thanks.

4 Answers, 1 is accepted

changcheng

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

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

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

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

commented on 01 Jul 2021, 07:31 AM

If you change data to 100003 records, this issue also happens. Is this a bug?

Neli

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.

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

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

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